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

package/dist/index.cjs.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom$1 = require('react-dom');
 var PropTypes = require('prop-types');
 var reactMergeRefs = require('react-merge-refs');
 var styled = require('styled-components');
@@ -62,134 +63,157 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
 })(["", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
-StyledMenu.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$a = 'datepickers.menu_wrapper';
 const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
-  className: props.isAnimated && 'is-animated'
+  'data-garden-id': COMPONENT_ID$a,
+  'data-garden-version': '9.1.0',
+  className: props.$isAnimated && 'is-animated'
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.$placement), {
   theme: props.theme,
-  hidden: props.isHidden,
+  hidden: props['aria-hidden'],
   margin: `${props.theme.space.base}px`,
-  zIndex: props.zIndex,
-  animationModifier: props.isAnimated ? '.is-animated' : undefined
+  zIndex: props.$zIndex,
+  animationModifier: props.$isAnimated ? '.is-animated' : undefined
 }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
-StyledMenuWrapper.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$9 = 'datepickers.datepicker';
-const retrievePadding = _ref => {
+const sizeStyles$4 = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let value = theme.space.base * 5;
-  if (isCompact) {
-    value = theme.space.base * 4;
-  }
-  return `margin: ${value}px;`;
+  const margin = theme.space.base * ($isCompact ? 4 : 5);
+  return styled.css(["margin:", "px;"], margin);
+};
+const colorStyles$3 = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const foreground = reactTheming.getColor({
+    variable: 'foreground.default',
+    theme
+  });
+  return styled.css(["background-color:transparent;color:", ";"], foreground);
 };
 const StyledDatePicker = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$9
+  'data-garden-id': COMPONENT_ID$9,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledDatePicker",
   componentId: "sc-15hwqzh-0"
-})(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => reactTheming.getColorV8('background', 600 , props.theme), props => reactTheming.getColorV8('foreground', 600 , props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledDatePicker.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["direction:", ";", " ", " ", ";"], p => p.theme.rtl && 'rtl', sizeStyles$4, colorStyles$3, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
 
 const COMPONENT_ID$8 = 'datepickers.range_calendar';
 const StyledRangeCalendar = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$8
+  'data-garden-id': COMPONENT_ID$8,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
 })(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
-StyledRangeCalendar.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
 
 const COMPONENT_ID$7 = 'datepickers.header';
 const StyledHeader = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$7
+  'data-garden-id': COMPONENT_ID$7,
+  'data-garden-version': '9.1.0'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
-StyledHeader.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
 
-const retrieveSizing = _ref => {
+const sizeStyles$3 = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
-  let size = theme.space.base * 10;
-  if (isCompact) {
-    size = theme.space.base * 8;
-  }
-  return styled.css(["width:", "px;height:", "px;"], size, size);
+  const iconSize = theme.iconSizes.md;
+  const size = theme.space.base * ($isCompact ? 8 : 10);
+  return styled.css(["width:", "px;height:", "px;svg{width:", ";height:", ";}"], size, size, iconSize, iconSize);
 };
-const retrieveColor$1 = _ref2 => {
+const colorStyles$2 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColorV8('primaryHue', 600, theme, 0.08), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('primaryHue', 600, theme, 0.2), reactTheming.getColorV8('foreground', 600 , theme), reactTheming.getColorV8('neutralHue', 600, theme));
+  const foreground = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    theme
+  });
+  const foregroundHover = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundHover = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundActive = reactTheming.getColor({
+    variable: 'foreground.subtle',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
+  const backgroundActive = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  return styled.css(["color:", ";:hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}"], foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$6
+  'data-garden-id': COMPONENT_ID$6,
+  'data-garden-version': '9.1.0'
 }).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$1, props => `${props.theme.iconSizes.md}`, props => `${props.theme.iconSizes.md}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
-StyledHeaderPaddle.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;align-items:center;justify-content:center;transform:", ";border-radius:50%;cursor:pointer;&[aria-hidden]{visibility:hidden;}", " ", " ", ";"], props => props.theme.rtl && 'rotate(180deg)', sizeStyles$3, colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
 
 const COMPONENT_ID$5 = 'datepickers.header_label';
 const StyledHeaderLabel = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$5
+  'data-garden-id': COMPONENT_ID$5,
+  'data-garden-version': '9.1.0'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
-StyledHeaderLabel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
 
 const COMPONENT_ID$4 = 'datepickers.calendar';
 const StyledCalendar = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$4
+  'data-garden-id': COMPONENT_ID$4,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCalendar",
   componentId: "sc-g5hoe8-0"
-})(["width:", "px;", ";"], props => props.isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
-StyledCalendar.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["width:", "px;", ";"], props => props.$isCompact ? props.theme.space.base * 56 : props.theme.space.base * 70, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
 
 const COMPONENT_ID$3 = 'datepickers.calendar_item';
-const retrieveSize = _ref => {
+const sizeStyles$2 = _ref => {
   let {
-    isCompact,
+    $isCompact,
     theme
   } = _ref;
   let size;
-  if (isCompact) {
+  if ($isCompact) {
     size = `${theme.space.base * 8}px`;
   } else {
     size = `${theme.space.base * 10}px`;
@@ -197,109 +221,146 @@ const retrieveSize = _ref => {
   return styled.css(["width:", ";height:", ";"], size, size);
 };
 const StyledCalendarItem = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$3
+  'data-garden-id': COMPONENT_ID$3,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledCalendarItem",
   componentId: "sc-143w8wb-0"
-})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], retrieveSize, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
-StyledCalendarItem.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:inline-block;position:relative;vertical-align:top;", " ", ";"], sizeStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
 
 const COMPONENT_ID$2 = 'datepickers.day_label';
 const StyledDayLabel = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$2
+  'data-garden-id': COMPONENT_ID$2,
+  'data-garden-version': '9.1.0'
 }).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
-StyledDayLabel.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["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 => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
 
 const COMPONENT_ID$1 = 'datepickers.highlight';
-const retrieveBorderRadius = _ref => {
+const sizeStyles$1 = _ref => {
   let {
     theme,
-    isEnd,
-    isStart
+    $isEnd,
+    $isStart
   } = _ref;
-  const startValue = 'border-radius: 0 50% 50% 0;';
-  const endValue = 'border-radius: 50% 0 0 50%;';
+  let borderRadius;
+  const startValue = '0 50% 50% 0;';
+  const endValue = '50% 0 0 50%;';
   if (theme.rtl) {
-    if (isStart) {
-      return startValue;
-    } else if (isEnd) {
-      return endValue;
+    if ($isStart) {
+      borderRadius = startValue;
+    } else if ($isEnd) {
+      borderRadius = endValue;
     }
   }
-  if (isStart) {
-    return endValue;
-  } else if (isEnd) {
-    return startValue;
+  if ($isStart) {
+    borderRadius = endValue;
+  } else if ($isEnd) {
+    borderRadius = startValue;
   }
-  return '';
+  return styled.css(["border-radius:", ";width:100%;height:100%;"], borderRadius);
 };
-const retrieveColor = _ref2 => {
+const colorStyles$1 = _ref2 => {
   let {
-    isHighlighted,
+    $isHighlighted,
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColorV8('primaryHue', 600, theme, 0.08));
+  return styled.css(["background-color:", ";"], $isHighlighted && reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100],
+    theme
+  }));
 };
 const StyledHighlight = styled__default.default.div.attrs({
-  'data-garden-id': COMPONENT_ID$1
+  'data-garden-id': COMPONENT_ID$1,
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledHighlight",
   componentId: "sc-16vr32x-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;", " ", " ", ";"], retrieveBorderRadius, retrieveColor, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
-StyledHighlight.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["position:absolute;top:0;left:0;", " ", " ", ";"], sizeStyles$1, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
 
-const retrieveStyledDayColors = _ref => {
+const sizeStyles = () => {
+  return styled.css(["border-radius:50%;width:100%;height:100%;"]);
+};
+const colorStyles = _ref => {
   let {
-    isSelected,
-    isDisabled,
-    isToday,
-    isPreviousMonth,
-    theme
+    $isToday,
+    $isPreviousMonth,
+    theme,
+    ...props
   } = _ref;
+  const isSelected = props['aria-selected'];
+  const isDisabled = props['aria-disabled'];
   let backgroundColor = 'inherit';
-  let color = reactTheming.getColorV8('primaryHue', 600, theme);
+  let foreground;
+  const backgroundHover = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[100]
+  });
+  const foregroundHover = !$isToday && reactTheming.getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 100
+    },
+    dark: {
+      offset: -100
+    },
+    theme
+  });
+  const backgroundActive = reactTheming.getColor({
+    variable: 'background.primaryEmphasis',
+    theme,
+    transparency: theme.opacity[200]
+  });
+  const foregroundActive = !$isToday && reactTheming.getColor({
+    variable: 'foreground.primary',
+    light: {
+      offset: 200
+    },
+    dark: {
+      offset: -200
+    },
+    theme
+  });
   if (isSelected && !isDisabled) {
-    backgroundColor = reactTheming.getColorV8('primaryHue', 600, theme);
-    color = reactTheming.getColorV8('background', 600 , theme);
+    backgroundColor = reactTheming.getColor({
+      variable: 'background.primaryEmphasis',
+      theme
+    });
+    foreground = reactTheming.getColor({
+      variable: 'foreground.onEmphasis',
+      theme
+    });
   } else if (isDisabled) {
-    color = reactTheming.getColorV8('neutralHue', 400, theme);
-  } else if (isToday) {
-    color = 'inherit';
-  } else if (isPreviousMonth) {
-    color = reactTheming.getColorV8('neutralHue', 600, theme);
+    foreground = reactTheming.getColor({
+      variable: 'foreground.disabled',
+      theme
+    });
+  } else if ($isToday) {
+    foreground = 'inherit';
+  } else if ($isPreviousMonth) {
+    foreground = reactTheming.getColor({
+      variable: 'foreground.subtle',
+      theme
+    });
+  } else {
+    foreground = reactTheming.getColor({
+      variable: 'foreground.primary',
+      theme
+    });
   }
-  return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
-      :hover {
-        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.08)};
-        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
-      }
-
-      :active {
-        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.2)};
-        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
-      }
-  `);
+  return styled.css(["background-color:", ";color:", ";&:not([aria-disabled]):not([aria-selected]):hover{background-color:", ";color:", ";}&:not([aria-disabled]):not([aria-selected]):active{background-color:", ";color:", ";}"], backgroundColor, foreground, backgroundHover, foregroundHover, backgroundActive, foregroundActive);
 };
 const COMPONENT_ID = 'datepickers.day';
-const StyledDay = styled__default.default.div.attrs(props => ({
+const StyledDay = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'aria-disabled': props.isDisabled ? 'true' : 'false'
-})).withConfig({
+  'data-garden-version': '9.1.0'
+}).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 => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
-StyledDay.defaultProps = {
-  theme: reactTheming.DEFAULT_THEME
-};
+})(["display:flex;position:absolute;align-items:center;justify-content:center;cursor:", ";font-size:", ";font-weight:", ";", " ", " ", ";"], props => props['aria-disabled'] ? 'inherit' : 'pointer', props => props.$isCompact ? props.theme.fontSizes.sm : props.theme.fontSizes.md, props => props.$isToday && !props['aria-disabled'] ? props.theme.fontWeights.semibold : 'inherit', sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
 
 const DatePickerContext = React.createContext(undefined);
 const useDatePickerContext$1 = () => {
@@ -388,7 +449,7 @@ function getStartOfWeek(locale) {
 }
 
 var _path$1;
-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); }
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -404,7 +465,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
 };
 
 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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -436,18 +497,18 @@ const MonthSelector = _ref => {
     return formatter.format(date);
   }, [locale]);
   return React__namespace.default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     }
   }, React__namespace.default.createElement(SvgChevronLeftStroke, null)), React__namespace.default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(state.previewDate)), React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
@@ -491,15 +552,15 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval.eachDayOfInterval({
     start: startDate,
     end: endDate
-  }).map((date, itemsIndex) => {
+  }).map(date => {
     const formattedDayLabel = getDate.getDate(date);
     const isCurrentDate = isToday.isToday(date);
     const isPreviousMonth = !isSameMonth.isSameMonth(date, state.previewDate);
@@ -512,14 +573,14 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
       isDisabled = isDisabled || isAfter.isAfter(date, maxValue) && !isSameDay.isSameDay(date, maxValue);
     }
     return React__namespace.default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      key: date.toISOString(),
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
+      $isToday: isCurrentDate,
+      $isPreviousMonth: isPreviousMonth,
+      $isCompact: isCompact,
+      "aria-selected": isSelected || undefined,
+      "aria-disabled": isDisabled || undefined,
       onClick: () => {
         if (!isDisabled) {
           dispatch({
@@ -532,7 +593,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
@@ -540,7 +601,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
     locale: locale,
     isCompact: isCompact
   }), React__namespace.default.createElement(StyledCalendar, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, dayLabels, items));
 });
 Calendar$1.displayName = 'Calendar';
@@ -786,6 +847,7 @@ Input.displayName = 'Input';
 const PLACEMENT_DEFAULT = 'bottom-start';
 const DatePicker = React.forwardRef((props, calendarRef) => {
   const {
+    appendToNode,
     children,
     placement: _placement,
     zIndex,
@@ -870,24 +932,16 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
       type: 'CONTROLLED_LOCALE_CHANGE'
     });
   }, [locale]);
-  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(Input, {
-    element: Child,
-    dispatch: dispatch,
-    state: state,
-    refKey: refKey,
-    ref: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
-  }), React__namespace.default.createElement(DatePickerContext.Provider, {
-    value: contextValue
-  }, React__namespace.default.createElement(StyledMenuWrapper, {
+  const Node = React__namespace.default.createElement(StyledMenuWrapper, {
     ref: floatingRef,
     style: {
       transform
     },
-    isHidden: !state.isOpen,
-    isAnimated: isAnimated && (state.isOpen || isVisible),
-    placement: placement,
-    zIndex: zIndex
-  }, (state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
+    $isAnimated: !!isAnimated && (state.isOpen || isVisible),
+    $placement: placement,
+    $zIndex: zIndex,
+    "aria-hidden": !state.isOpen || undefined
+  }, !!(state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
     ref: calendarRef,
     isCompact: isCompact,
     value: value,
@@ -895,10 +949,20 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
     maxValue: maxValue,
     locale: locale,
     weekStartsOn: weekStartsOn
-  })))));
+  })));
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(Input, {
+    element: Child,
+    dispatch: dispatch,
+    state: state,
+    refKey: refKey,
+    ref: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  }), React__namespace.default.createElement(DatePickerContext.Provider, {
+    value: contextValue
+  }, appendToNode ? reactDom$1.createPortal(Node, appendToNode) : Node));
 });
 DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = {
+  appendToNode: PropTypes__default.default.any,
   value: PropTypes__default.default.any,
   onChange: PropTypes__default.default.any,
   formatDate: PropTypes__default.default.func,
@@ -1410,26 +1474,26 @@ const Month = React.forwardRef((_ref, ref) => {
     const formattedDayLabel = dayLabelFormatter(date);
     return React__namespace.default.createElement(StyledCalendarItem, {
       key: `day-label-${formattedDayLabel}`,
-      isCompact: isCompact
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledDayLabel, {
-      isCompact: isCompact
+      $isCompact: isCompact
     }, formattedDayLabel));
   });
   const items = eachDayOfInterval.eachDayOfInterval({
     start: startDate,
     end: endDate
-  }).map((date, itemsIndex) => {
+  }).map(date => {
     const formattedDayLabel = dayFormatter(date);
     const isCurrentDate = isToday.isToday(date);
     const isPreviousMonth = !isSameMonth.isSameMonth(date, displayDate);
     if (isPreviousMonth) {
       return React__namespace.default.createElement(StyledCalendarItem, {
-        key: `day-${itemsIndex}`,
-        isCompact: isCompact
+        key: date.toISOString(),
+        $isCompact: isCompact
       }, React__namespace.default.createElement(StyledDay, {
-        isCompact: isCompact,
-        isPreviousMonth: true,
-        isDisabled: true
+        $isCompact: isCompact,
+        $isPreviousMonth: true,
+        "aria-disabled": true
       }, "\xA0"));
     }
     let isSelected = false;
@@ -1472,18 +1536,18 @@ const Month = React.forwardRef((_ref, ref) => {
       }
     }
     return React__namespace.default.createElement(StyledCalendarItem, {
-      key: `day-${itemsIndex}`,
-      isCompact: isCompact
+      key: date.toISOString(),
+      $isCompact: isCompact
     }, React__namespace.default.createElement(StyledHighlight, {
-      isHighlighted: !isInvalidDateRange && isHighlighted && !isDisabled,
-      isStart: !isInvalidDateRange && isHighlightStart,
-      isEnd: !isInvalidDateRange && isHighlightEnd
+      $isHighlighted: !isInvalidDateRange && !!isHighlighted && !isDisabled,
+      $isStart: !isInvalidDateRange && isHighlightStart,
+      $isEnd: !isInvalidDateRange && isHighlightEnd
     }), React__namespace.default.createElement(StyledDay, {
-      isToday: isCurrentDate,
-      isPreviousMonth: isPreviousMonth,
-      isSelected: !isInvalidDateRange && isSelected,
-      isDisabled: isDisabled,
-      isCompact: isCompact,
+      $isToday: isCurrentDate,
+      $isPreviousMonth: isPreviousMonth,
+      "aria-selected": !isInvalidDateRange && isSelected || undefined,
+      "aria-disabled": isDisabled || undefined,
+      $isCompact: isCompact,
       onClick: () => {
         if (!isDisabled) {
           dispatch({
@@ -1553,32 +1617,32 @@ const Month = React.forwardRef((_ref, ref) => {
   });
   return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseDown: e => {
       e.preventDefault();
     }
   }, React__namespace.default.createElement(StyledHeader, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_PREVIOUS_MONTH'
       });
     },
-    isHidden: isPreviousHidden
+    "aria-hidden": isPreviousHidden || undefined
   }, React__namespace.default.createElement(SvgChevronLeftStroke, null)), React__namespace.default.createElement(StyledHeaderLabel, {
-    isCompact: isCompact
+    $isCompact: isCompact
   }, headerLabelFormatter(displayDate)), React__namespace.default.createElement(StyledHeaderPaddle, {
-    isCompact: isCompact,
-    isHidden: isNextHidden,
+    $isCompact: isCompact,
+    "aria-hidden": isNextHidden || undefined,
     onClick: () => {
       dispatch({
         type: 'PREVIEW_NEXT_MONTH'
       });
     }
   }, React__namespace.default.createElement(SvgChevronRightStroke, null))), React__namespace.default.createElement(StyledCalendar, {
-    isCompact: isCompact,
+    $isCompact: isCompact,
     onMouseLeave: () => {
       dispatch({
         type: 'HOVER_DATE',
@@ -1596,7 +1660,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, Object.assign({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.9'
+    "data-garden-version": '9.1.0'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true