@primer/components 0.0.0-202110323331 → 0.0.0-2021103235619

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -0,0 +1,332 @@
+import { isAfter, isBefore, addMonths, subMonths, isWeekend, addDays, subDays, addWeeks, subWeeks, isSaturday, isSunday, nextSaturday, previousFriday, previousSunday, subYears, addYears, nextMonday, isMonday, previousMonday, isFriday, nextFriday, format } from 'date-fns';
+import React, { useCallback, useMemo, useRef } from 'react';
+import Box from '../Box';
+import { Month } from './Month';
+import styled from 'styled-components';
+import { COMMON, get, TYPOGRAPHY } from '../constants';
+import useDatePicker, { normalizeDate } from './useDatePicker';
+import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
+import StyledOcticon from '../StyledOcticon';
+import Button, { ButtonPrimary } from '../Button';
+import sx from '../sx';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { FocusKeys } from '../behaviors/focusZone';
+const DatePickerPanelContainer = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelContainer",
+  componentId: "sc-19upxpo-0"
+})(["align-items:stretch;display:flex;flex-direction:column;position:relative;"]);
+const DatePickerTopNav = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerTopNav",
+  componentId: "sc-19upxpo-1"
+})(["display:flex;justify-content:space-between;position:absolute;top:0;left:0;right:0;padding:", ";z-index:10;"], get('space.3'));
+const DatePickerPanelMonths = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelMonths",
+  componentId: "sc-19upxpo-2"
+})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";margin-top:", ";padding:", ";position:relative;"], get('space.6'), get('space.1'), get('space.3'));
+const DatePickerPanelFooter = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelFooter",
+  componentId: "sc-19upxpo-3"
+})(["align-items:flex-start;border-top:1px solid;border-top-color:", ";display:flex;gap:", ";padding-top:12px;padding-bottom:12px;padding-left:", ";padding-right:", ";flex-direction:row;justify-content:space-between;position:relative;"], get('colors.border.default'), get('space.6'), get('space.3'), get('space.3'));
+const ArrowButton = styled(Button).withConfig({
+  displayName: "DatePickerPanel__ArrowButton",
+  componentId: "sc-19upxpo-4"
+})(["width:40px;height:28px;"]);
+const Select = styled.select.withConfig({
+  displayName: "DatePickerPanel__Select",
+  componentId: "sc-19upxpo-5"
+})(["background:", ";border:0;color:", ";font-weight:600;", ";", ";", ";"], get('colors.canvas.default'), get('colors.fg.default'), TYPOGRAPHY, COMMON, sx);
+const Option = styled.option.withConfig({
+  displayName: "DatePickerPanel__Option",
+  componentId: "sc-19upxpo-6"
+})(["background:", ";border:0;color:", ";font-weight:400;padding:", " ", ";", ";", ";", ";"], get('colors.canvas.default'), get('colors.fg.default'), get('space.2'), get('space.2'), TYPOGRAPHY, COMMON, sx);
+export const DatePickerPanel = () => {
+  const {
+    configuration,
+    saveValue,
+    revertValue,
+    currentViewingDate,
+    goToMonth,
+    nextMonth,
+    previousMonth,
+    onDayFocus,
+    setFocusDate,
+    viewMode
+  } = useDatePicker();
+  const panelRef = useRef(null);
+  const headerRef = useRef(null);
+  const datePanelRef = useRef(null);
+  const footerRef = useRef(null);
+  useFocusZone({
+    containerRef: headerRef,
+    bindKeys: FocusKeys.Tab,
+    focusInStrategy: 'closest'
+  });
+  const getNextFocusable = useCallback((direction, from, event) => {
+    var _datePanelRef$current, _datePanelRef$current2;
+
+    const key = event.key;
+    const {
+      disableWeekends,
+      minDate,
+      maxDate
+    } = configuration;
+    const fromDate = from === null || from === void 0 ? void 0 : from.getAttribute('data-date');
+    const focusDate = fromDate ? new Date(fromDate) : new Date();
+    let newDate = normalizeDate(focusDate);
+
+    switch (key) {
+      case 'ArrowRight':
+        {
+          // Increase selection by 1 day
+          newDate = normalizeDate(addDays(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+
+          if (disableWeekends && isWeekend(newDate)) {
+            const monday = nextMonday(newDate);
+            newDate = maxDate && isAfter(monday, maxDate) ? maxDate : monday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          // Decrease selection by 1 day
+          newDate = normalizeDate(subDays(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+
+          if (disableWeekends && isWeekend(newDate)) {
+            const friday = previousFriday(newDate);
+            newDate = minDate && isBefore(friday, minDate) ? minDate : friday;
+          }
+
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          // Decrease selection by 1 week
+          newDate = normalizeDate(subWeeks(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'ArrowDown':
+        {
+          // Increase selection by 1 week
+          newDate = normalizeDate(addWeeks(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'Home':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = normalizeDate(isMonday(focusDate) ? focusDate : previousMonday(focusDate));
+          } else {
+            newDate = normalizeDate(isSunday(focusDate) ? focusDate : previousSunday(focusDate));
+          }
+
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'End':
+        {
+          newDate = focusDate;
+
+          if (disableWeekends) {
+            newDate = normalizeDate(isFriday(focusDate) ? focusDate : nextFriday(focusDate));
+          } else {
+            newDate = normalizeDate(isSaturday(focusDate) ? focusDate : nextSaturday(focusDate));
+          }
+
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageUp':
+        {
+          newDate = normalizeDate(event.shiftKey ? subYears(focusDate, 1) : subMonths(focusDate, 1));
+          if (minDate && isBefore(newDate, minDate)) newDate = minDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      case 'PageDown':
+        {
+          newDate = normalizeDate(event.shiftKey ? addYears(focusDate, 1) : addMonths(focusDate, 1));
+          if (maxDate && isAfter(newDate, maxDate)) newDate = maxDate;
+          setFocusDate(newDate);
+          onDayFocus(newDate);
+          break;
+        }
+
+      default:
+        {
+          break;
+        }
+    }
+
+    return (_datePanelRef$current = (_datePanelRef$current2 = datePanelRef.current) === null || _datePanelRef$current2 === void 0 ? void 0 : _datePanelRef$current2.querySelector(`[data-date="${format(newDate, 'MM/dd/yyyy')}"]`)) !== null && _datePanelRef$current !== void 0 ? _datePanelRef$current : undefined;
+  }, [configuration, onDayFocus, setFocusDate]);
+  useFocusZone({
+    containerRef: datePanelRef,
+    bindKeys: FocusKeys.ArrowAll | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
+    focusInStrategy: 'previous',
+    getNextFocusable
+  }, [getNextFocusable]);
+  useFocusZone({
+    containerRef: footerRef,
+    bindKeys: FocusKeys.Tab,
+    focusInStrategy: 'closest'
+  });
+  const previousDisabled = useMemo(() => {
+    const {
+      minDate
+    } = configuration;
+    if (!minDate) return false;
+    const previous = subMonths(currentViewingDate, 1);
+
+    if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  const nextDisabled = useMemo(() => {
+    const {
+      maxDate,
+      view
+    } = configuration;
+    if (!maxDate) return false;
+    const next = addMonths(currentViewingDate, view === '2-month' ? 2 : 1);
+
+    if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  const currentMonth = useMemo(() => currentViewingDate.getMonth(), [currentViewingDate]);
+  const currentYear = useMemo(() => currentViewingDate.getFullYear(), [currentViewingDate]);
+  const headerSelectionHandler = useCallback(e => {
+    const selection = parseInt(e.currentTarget.value, 10);
+
+    if (e.currentTarget.id === 'picker-header-year') {
+      goToMonth(new Date(selection, currentMonth));
+    } else {
+      goToMonth(new Date(currentYear, selection));
+    }
+  }, [currentMonth, currentYear, goToMonth]);
+  const getMonthPicker = useMemo(() => {
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const monthElements = [];
+
+    for (let i = 0; i < months.length; i++) {
+      monthElements.push( /*#__PURE__*/React.createElement(Option, {
+        key: i,
+        value: i
+      }, months[i]));
+    }
+
+    return /*#__PURE__*/React.createElement(Select, {
+      id: "picker-header-month",
+      value: currentMonth,
+      sx: {
+        mr: '6px'
+      },
+      onChange: headerSelectionHandler
+    }, monthElements);
+  }, [currentMonth, headerSelectionHandler]);
+  const getYearPicker = useMemo(() => {
+    const years = [];
+    const minYear = currentYear - 200;
+    const maxYear = currentYear + 200;
+
+    for (let i = minYear; i <= maxYear; i++) {
+      years.push( /*#__PURE__*/React.createElement(Option, {
+        key: i,
+        value: i
+      }, i));
+    }
+
+    return /*#__PURE__*/React.createElement(Select, {
+      id: "picker-header-year",
+      value: currentYear,
+      onChange: headerSelectionHandler
+    }, years);
+  }, [currentYear, headerSelectionHandler]);
+  return /*#__PURE__*/React.createElement(DatePickerPanelContainer, {
+    ref: panelRef
+  }, /*#__PURE__*/React.createElement(DatePickerTopNav, {
+    ref: headerRef
+  }, configuration.compressedHeader && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flex: 1
+    }
+  }, getMonthPicker, getYearPicker), /*#__PURE__*/React.createElement(ArrowButton, {
+    variant: "small",
+    sx: {
+      mr: 1
+    },
+    onClick: previousMonth,
+    disabled: previousDisabled,
+    "aria-label": "Previous Month",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ChevronLeftIcon,
+    color: "fg.muted"
+  })), /*#__PURE__*/React.createElement(ArrowButton, {
+    variant: "small",
+    onClick: nextMonth,
+    disabled: nextDisabled,
+    "aria-label": "Next Month",
+    "aria-live": "polite"
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ChevronRightIcon,
+    color: "fg.muted"
+  }))), /*#__PURE__*/React.createElement(DatePickerPanelMonths, {
+    ref: datePanelRef
+  }, /*#__PURE__*/React.createElement(Month, {
+    date: currentViewingDate
+  }), viewMode === '2-month' && /*#__PURE__*/React.createElement(Month, {
+    date: addMonths(currentViewingDate, 1)
+  })), /*#__PURE__*/React.createElement(DatePickerPanelFooter, {
+    ref: footerRef
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "small",
+    sx: {
+      mr: 1
+    },
+    onClick: () => revertValue(),
+    "aria-label": "Reset Selection",
+    "aria-live": "polite"
+  }, "Reset"), /*#__PURE__*/React.createElement(Button, {
+    variant: "small",
+    onClick: () => goToMonth(new Date()),
+    "aria-label": "Go to Today",
+    "aria-live": "polite"
+  }, "Today")), configuration.confirmation && /*#__PURE__*/React.createElement(ButtonPrimary, {
+    variant: "small",
+    onClick: () => saveValue(),
+    "aria-label": "Apply Selection",
+    "aria-live": "polite"
+  }, "Apply")));
+};
+DatePickerPanel.displayName = "DatePickerPanel";

package/lib-esm/DatePicker/Day.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+import { DaySelection } from './useDatePicker';
+export declare type DayProps = {
+    blocked?: boolean;
+    disabled?: boolean;
+    focused?: boolean;
+    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    selected?: DaySelection;
+    date: Date;
+} & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
+export declare const Day: React.FC<DayProps>;
+export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;

package/lib-esm/DatePicker/Day.js

@@ -0,0 +1,182 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import useDatePicker from './useDatePicker';
+import { format } from 'date-fns';
+const DayBaseComponent = styled(Box).withConfig({
+  displayName: "Day__DayBaseComponent",
+  componentId: "sc-1japneh-0"
+})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
+const states = {
+  blocked: {
+    background: get('colors.neutral.subtle'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  disabled: {
+    background: get('colors.canvas.primary'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  selected: {
+    default: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    },
+    start: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '4px 0 0 4px',
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    },
+    middle: {
+      background: get('colors.accent.subtle'),
+      borderRadius: '0',
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    end: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '0 4px 4px 0',
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    }
+  },
+  default: {
+    normal: {
+      background: get('colors.canvas.primary'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    hover: {
+      background: get('colors.neutral.muted'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default'),
+      todayColor: get('colors.accent.fg')
+    },
+    pressed: {
+      background: get('colors.neutral.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis'),
+      todayColor: get('colors.fg.onEmphasis')
+    }
+  }
+};
+
+const getStateStyles = (props, prop, state) => {
+  const {
+    blocked,
+    disabled,
+    selected,
+    today
+  } = props;
+
+  if (selected) {
+    switch (selected) {
+      case 'start':
+        return today && prop === 'color' ? states.selected.start['todayColor'] : states.selected.start[prop];
+
+      case 'middle':
+        return today && prop === 'color' ? states.selected.middle['todayColor'] : states.selected.middle[prop];
+
+      case 'end':
+        return today && prop === 'color' ? states.selected.end['todayColor'] : states.selected.end[prop];
+
+      default:
+        return today && prop === 'color' ? states.selected.default['todayColor'] : states.selected.default[prop];
+    }
+  } else if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else {
+    return today && prop === 'color' ? states.default[state]['todayColor'] : states.default[state][prop];
+  }
+};
+
+const DayComponent = styled(DayBaseComponent).attrs(props => ({
+  background: getStateStyles(props, 'background', 'normal'),
+  borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
+  textColor: getStateStyles(props, 'color', 'normal'),
+  backgroundHover: getStateStyles(props, 'background', 'hover'),
+  textColorHover: getStateStyles(props, 'color', 'hover'),
+  backgroundPressed: getStateStyles(props, 'background', 'pressed'),
+  textColorPressed: getStateStyles(props, 'color', 'pressed')
+})).withConfig({
+  displayName: "Day__DayComponent",
+  componentId: "sc-1japneh-1"
+})(["background-color:", ";border-radius:", ";opacity:", ";transition:0.1s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-content:center;justify-self:center;padding:4px 0;position:relative;transition:0.1s color ease;user-select:none;width:16px;&:after{content:'';display:", ";position:absolute;bottom:0;background:", ";width:100%;height:2px;border-radius:1px;}}&:hover,&:focus{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, props => props.borderRadius, props => props.disabled ? 0.5 : 1, Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.today ? 'block' : 'none', props => props.selected && props.selected !== 'middle' ? get('colors.fg.onEmphasis')(props) : get('colors.accent.emphasis')(props), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
+export const Day = ({
+  date,
+  onAction
+}) => {
+  const {
+    onDayFocus,
+    onSelection,
+    disabled,
+    blocked,
+    focused,
+    selected,
+    today
+  } = useDatePicker(date);
+  const dayRef = useRef(null);
+  useEffect(() => {
+    if (focused) {
+      setTimeout(() => {
+        var _dayRef$current;
+
+        return (_dayRef$current = dayRef.current) === null || _dayRef$current === void 0 ? void 0 : _dayRef$current.focus();
+      }, 0);
+    }
+  }, [focused]);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onSelection(date);
+      onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+    }
+  }, [disabled, onSelection, onAction, date]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onSelection(date);
+    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+  }, [disabled, onSelection, date, onAction]);
+  const todayStyles = useMemo(() => today ? {
+    fontWeight: 'bold'
+  } : {}, [today]);
+  return /*#__PURE__*/React.createElement(DayComponent, {
+    ref: dayRef,
+    role: "gridcell",
+    "aria-disabled": disabled,
+    "aria-selected": selected !== false,
+    blocked: blocked,
+    disabled: disabled,
+    focused: focused,
+    selected: selected,
+    today: today,
+    onClick: clickHandler,
+    onMouseEnter: () => onDayFocus(date),
+    onFocus: () => onDayFocus(date),
+    onKeyPress: keyPressHandler,
+    tabIndex: -1,
+    "data-date": format(date, 'MM/dd/yyyy')
+  }, /*#__PURE__*/React.createElement(Text, {
+    sx: todayStyles
+  }, date.getDate()));
+};
+Day.displayName = "Day";
+export const BlankDay = styled(DayBaseComponent).withConfig({
+  displayName: "Day__BlankDay",
+  componentId: "sc-1japneh-2"
+})(["background-color:", ";"], get('colors.canvas.primary'));

package/lib-esm/DatePicker/Month.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
+    date: Date;
+}
+export declare const Month: React.FC<MonthProps>;

package/lib-esm/DatePicker/Month.js

@@ -0,0 +1,98 @@
+import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import { BlankDay, Day } from './Day';
+import useDatePicker from './useDatePicker';
+const weekdayEnum = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6
+};
+const MonthComponent = styled(Box).withConfig({
+  displayName: "Month__MonthComponent",
+  componentId: "l6j7o0-0"
+})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
+const MonthTitle = styled(Text).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;height:", ";justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'), get('space.4'));
+const WeekdayHeader = styled(Text).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
+export const Month = ({
+  date
+}) => {
+  const {
+    configuration
+  } = useDatePicker();
+  const [selectedDay, setSelectedDay] = useState(null);
+  const getTitle = useMemo(() => `${format(new Date(date), 'MMMM yyyy')}`, [date]);
+  const weekdayHeaders = useMemo(() => {
+    var _configuration$weekSt;
+
+    const now = new Date(date);
+    const weekOptions = {
+      weekStartsOn: weekdayEnum[(_configuration$weekSt = configuration.weekStartsOn) !== null && _configuration$weekSt !== void 0 ? _configuration$weekSt : 'Sunday']
+    };
+    return eachDayOfInterval({
+      start: startOfWeek(now, weekOptions),
+      end: endOfWeek(now, weekOptions)
+    }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, format(d, 'EEEEEE')));
+  }, [configuration.weekStartsOn, date]);
+
+  const dayAction = day => {
+    setSelectedDay(day);
+  };
+
+  const dayComponents = useMemo(() => {
+    var _configuration$weekSt2, _configuration$weekSt3;
+
+    const components = [];
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+    const preBlanks = (firstDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt2 = configuration.weekStartsOn) !== null && _configuration$weekSt2 !== void 0 ? _configuration$weekSt2 : 'Sunday'])) % 7;
+
+    for (let i = 0; i < preBlanks; i++) {
+      components.push( /*#__PURE__*/React.createElement(BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
+      const day = new Date(date.getFullYear(), date.getMonth(), i);
+      components.push( /*#__PURE__*/React.createElement(Day, {
+        key: `day-component-${day.toString()}`,
+        date: day,
+        selected: selectedDay ? isEqual(day, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = lastDayOfMonth(firstDay);
+    const postBlanks = (lastDay.getDay() + (7 - weekdayEnum[(_configuration$weekSt3 = configuration.weekStartsOn) !== null && _configuration$weekSt3 !== void 0 ? _configuration$weekSt3 : 'Sunday'])) % 7;
+
+    for (let i = 6; i > postBlanks; i--) {
+      components.push( /*#__PURE__*/React.createElement(BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [configuration.weekStartsOn, date, selectedDay]);
+  return /*#__PURE__*/React.createElement(MonthComponent, {
+    role: "grid",
+    "aria-labelledby": `${date.getMonth()} ${date.getFullYear()}`
+  }, /*#__PURE__*/React.createElement(MonthTitle, {
+    "aria-live": "polite"
+  }, !configuration.compressedHeader ? getTitle : ''), weekdayHeaders, dayComponents);
+};
+Month.displayName = "Month";

package/lib-esm/DatePicker/dateParser.d.ts

@@ -0,0 +1,12 @@
+import { AnchorVariant, Selection, SelectionVariant } from './useDatePicker';
+export declare const parseDate: (dateString: string, variant?: SelectionVariant) => Selection;
+declare type FormatDateOptions = {
+    selection?: Selection;
+    anchorVariant?: AnchorVariant;
+    dateFormat?: string;
+    placeholder?: string;
+    rawFormat?: boolean;
+    variant?: SelectionVariant;
+};
+export declare const formatDate: ({ selection, dateFormat, placeholder, rawFormat, variant }: FormatDateOptions) => string;
+export {};