@bitrise/bitkit 10.34.0 → 10.35.0-alpha-datepicker-rewrite.2

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.34.0",
+  "version": "10.35.0-alpha-datepicker-rewrite.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
     "build:icons": "ts-node ./scripts/build-icons.ts",
     "commitlint": "commitlint",
-    "lint": "eslint src/**/*.tsx",
+    "lint": "eslint src --ext ts,tsx",
     "semantic-release": "semantic-release",
     "start": "yarn storybook",
-    "test": "jest ./src",
+    "test": "jest",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -30,9 +30,10 @@
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "framer-motion": "^6.5.1",
-    "luxon": "^2.5.0",
+    "luxon": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-focus-lock": "^2.9.1",
     "react-popper": "^2.3.0"
   },
   "peerDependencies": {
@@ -64,10 +65,10 @@
     "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.3.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/cheerio": "^0.22.31",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^29.0.3",
     "@types/luxon": "^2.4.0",
     "@types/react": "18.0.18",
     "@types/react-dom": "^18.0.6",
@@ -93,14 +94,14 @@
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
+    "jest": "^29.0.3",
     "jest-environment-jsdom": "^28.1.3",
     "jsdom": "^19.0.0",
     "prettier": "^2.7.1",
     "react-hook-form": "^7.33.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
-    "ts-jest": "^28.0.7",
+    "ts-jest": "^29.0.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.2",
@@ -113,18 +114,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "jest": {
-    "moduleNameMapper": {
-      "^.+\\.css$": "identity-obj-proxy"
-    },
-    "setupFilesAfterEnv": [
-      "./spec/jest.setup.ts"
-    ],
-    "transform": {
-      "\\.tsx?$": "ts-jest"
-    },
-    "testEnvironment": "./spec/test-env.js"
-  },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
     "ts-node": "^10.9.1",

package/src/Components/DatePicker/DatePicker.context.ts

@@ -0,0 +1,14 @@
+import { createContext } from '@chakra-ui/react-utils';
+import { DateTime } from 'luxon';
+import { DateRange } from './useDateRange';
+
+interface Context {
+  selectable?: DateRange;
+  selected?: DateRange;
+  today: DateTime;
+  preview: 'from' | 'to' | undefined;
+  onSelect: (d: DateTime) => void;
+  showOutsideMonths: boolean;
+  onPreview: (d: DateTime) => void;
+}
+export const [DatePickerContext, useDatePickerContext] = createContext<Context>();

package/src/Components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,16 @@
+import { ComponentMeta } from '@storybook/react';
+import { DateTime } from 'luxon';
+import DatePicker from './DatePicker';
+import { DateRange } from './useDateRange';
+
+export default {
+  component: DatePicker,
+  args: { visible: true, children: <button type="button">ok</button> },
+} as ComponentMeta<typeof DatePicker>;
+
+export const Default = {};
+export const Selectable = {
+  args: {
+    selectable: new DateRange(DateTime.local(2022, 11, 20), DateTime.local(2022, 11, 30)),
+  },
+};

package/src/Components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { DateTime } from 'luxon';
+import userEventGlobal from '@testing-library/user-event';
+import Provider from '../Provider/Provider';
+import DatePicker, { DatePickerProps } from './DatePicker';
+import { DateRange } from './useDateRange';
+
+jest.mock('../../hooks/useResponsive', () => jest.fn(() => ({ isMobile: false })));
+
+jest.useFakeTimers();
+jest.setSystemTime(DateTime.local(2022, 1, 2).toJSDate());
+const userEvent = userEventGlobal.setup({ advanceTimers: (t) => jest.advanceTimersByTime(t) });
+const Subject = (props: Partial<DatePickerProps>) => (
+  <Provider>
+    <DatePicker onClose={() => {}} visible {...props}>
+      <div />
+    </DatePicker>
+  </Provider>
+);
+describe('DatePicker', () => {
+  it('works', async () => {
+    const handler = jest.fn<void, [DateRange]>();
+    render(<Subject onApply={handler} />);
+    await userEvent.click(await screen.findByRole('button', { name: 'January' }));
+    await userEvent.selectOptions(
+      await screen.findByRole('listbox', { name: 'month' }),
+      await screen.findByRole('option', { name: 'October' }),
+    );
+    const month = await screen.findByRole('listbox', { name: 'October 2022' });
+    await userEvent.selectOptions(month, await within(month).findByRole('option', { name: '23' }));
+    await userEvent.click(await screen.findByRole('button', { name: 'November' }));
+    const year = await screen.findByRole('spinbutton', { name: 'year' });
+    await userEvent.type(year, '{BackSpace}3');
+    await userEvent.selectOptions(
+      await screen.findByRole('listbox', { name: 'month' }),
+      await screen.findByRole('option', { name: 'February' }),
+    );
+    const month2 = await screen.findByRole('listbox', { name: 'February 2023' });
+    await userEvent.selectOptions(month2, await within(month2).findByRole('option', { name: '10' }));
+    await userEvent.click(await screen.findByRole('button', { name: 'Apply' }));
+    expect(handler).toHaveBeenCalledWith(expect.any(DateRange));
+    const [{ from: begin, to: end }] = handler.mock.lastCall!;
+    expect(begin! < end!).toBe(true);
+    expect(begin?.toObject()).toMatchObject({ year: 2022, month: 10, day: 23 });
+    expect(end?.toObject()).toMatchObject({ year: 2023, month: 2, day: 10 });
+  });
+  describe('with range pre-selected', () => {
+    describe('when range start/end is in the same month', () => {
+      it('shows the start month on the left and the next month on the right', async () => {
+        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 2, 7))} />);
+        const left = await screen.findByRole('listbox', { name: 'February 2022' });
+        expect(left).toBeInTheDocument();
+        const right = await screen.findByRole('listbox', { name: 'March 2022' });
+        expect(right).toBeInTheDocument();
+      });
+    });
+    describe('when range start/end is in consequitive months', () => {
+      it('shows the start month on the left and the next month on the right', async () => {
+        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 3, 7))} />);
+        const left = await screen.findByRole('listbox', { name: 'February 2022' });
+        expect(left).toBeInTheDocument();
+        const right = await screen.findByRole('listbox', { name: 'March 2022' });
+        expect(right).toBeInTheDocument();
+      });
+    });
+    describe('when range start/end have more than 1 month between them', () => {
+      it('shows the start month on the left and the next month on the right', async () => {
+        render(<Subject selected={new DateRange(DateTime.local(2022, 2, 1), DateTime.local(2022, 5, 7))} />);
+        const left = await screen.findByRole('listbox', { name: 'February 2022' });
+        expect(left).toBeInTheDocument();
+        const right = await screen.findByRole('listbox', { name: 'March 2022' });
+        expect(right).toBeInTheDocument();
+      });
+    });
+  });
+  describe('month selector', () => {
+    it('shows current month as selected', async () => {
+      render(<Subject />);
+      const left = await screen.findByRole('button', { name: 'January' });
+      await userEvent.click(left);
+      const jan = await screen.findByRole('option', { name: 'January' });
+      const feb = await screen.findByRole('option', { name: 'February' });
+      expect(jan).toHaveAttribute('aria-selected', 'true');
+      expect(feb).not.toHaveAttribute('aria-selected');
+    });
+    it('focuses the year input when clicked', async () => {
+      render(<Subject />);
+      const left = await screen.findByRole('button', { name: 'January' });
+      await userEvent.click(left);
+      const year = await screen.findByRole('spinbutton', { name: 'year' });
+      await waitFor(() => expect(year).toHaveFocus());
+    });
+  });
+});

package/src/Components/DatePicker/DatePicker.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useState } from 'react';
+import { DateTime } from 'luxon';
+import FocusLock from 'react-focus-lock';
+import { PopoverAnchor } from '@chakra-ui/react';
+import { useObjectMemo } from '../../utils/utils';
+import Popover from '../Popover/Popover';
+import PopoverContent from '../Popover/PopoverContent';
+import Box from '../Box/Box';
+import useResponsive from '../../hooks/useResponsive';
+import DatePickerMonth from './DatePickerMonth';
+import { DatePickerContext } from './DatePicker.context';
+import DatePickerMonthSelector from './DatePickerMonthSelector';
+import useDateRange, { DateRange } from './useDateRange';
+import useViewDate from './useViewDate';
+import DatePickerFooter from './DatePickerFooter';
+
+export { useDateRange, DateRange };
+
+export interface DatePickerProps {
+  children: React.ReactNode;
+  selectable?: DateRange;
+  selected?: DateRange;
+  onApply?: (range: DateRange) => void;
+  onClose: () => void;
+  visible: boolean;
+}
+
+/**
+ * A simple date selection component, that supports a dual month view and
+ * range selection.
+ */
+const DatePicker = (props: DatePickerProps) => {
+  const { children, onApply, onClose, visible, selectable, selected } = props;
+
+  const { isMobile } = useResponsive();
+  const today = DateTime.now().startOf('day');
+
+  const [dateFrom, setDateFrom] = useState(selected?.from);
+  useEffect(() => {
+    if (!selected?.from || !dateFrom?.equals(selected.from)) {
+      setDateFrom(selected?.from);
+    }
+  }, [selected]);
+  const [dateTo, setDateTo] = useState(selected?.to);
+  useEffect(() => {
+    if (!selected?.to || !dateTo?.equals(selected.to)) {
+      setDateTo(selected?.to);
+    }
+  }, [selected]);
+
+  const handleClose = () => {
+    onClose();
+    setDateTo(undefined);
+    setDateFrom(undefined);
+  };
+
+  const handleApply = () => {
+    if (onApply) {
+      onApply(new DateRange(dateFrom, dateTo));
+    }
+
+    handleClose();
+  };
+
+  const { leftViewDate, rightViewDate, updateLeftViewDate, updateRightViewDate } = useViewDate({
+    initalView: dateFrom || selectable?.from,
+  });
+
+  const [preview, setPreview] = useState<'from' | 'to' | undefined>(undefined);
+  const [isMonthSelector, setIsMonthSelector] = useState<'left' | 'right' | undefined>(undefined);
+  const handlePreview = useCallback(
+    (date: DateTime) => {
+      if (!preview) {
+        return;
+      }
+      if (dateFrom) {
+        if (date > dateFrom) {
+          setPreview('to');
+        } else {
+          setPreview('from');
+        }
+      }
+      setDateTo(date);
+    },
+    [preview, dateFrom, dateTo],
+  );
+  const handleSelect = useCallback(
+    (date: DateTime) => {
+      setPreview(undefined);
+      if (dateFrom && dateTo) {
+        if (!preview) {
+          setPreview('from');
+          setDateFrom(date);
+          setDateTo(undefined);
+        }
+      } else if (dateTo && date > dateTo) {
+        setDateFrom(dateTo);
+        setDateTo(date);
+      } else if (dateFrom && date < dateFrom) {
+        setDateFrom(date);
+        setDateTo(dateFrom);
+      } else if (dateFrom) {
+        setDateTo(date);
+      } else {
+        setPreview('from');
+        setDateFrom(date);
+      }
+    },
+    [dateFrom, dateTo, preview],
+  );
+  const currentSelected = useDateRange([dateFrom, dateTo]);
+  const ctx = useObjectMemo({
+    selectable,
+    selected: currentSelected,
+    preview,
+    showOutsideMonths: isMobile,
+    today,
+    onPreview: handlePreview,
+    onSelect: handleSelect,
+  });
+  const onMonthClickLeft = useCallback(() => setIsMonthSelector('left'), []);
+  const onMonthClickRight = useCallback(() => setIsMonthSelector('right'), []);
+  const onMonthSelected = useCallback(
+    (month: number, year: number) => {
+      if (isMonthSelector === 'left') {
+        updateLeftViewDate({ month, year });
+      }
+      if (isMonthSelector === 'right') {
+        updateRightViewDate({ month, year });
+      }
+      setIsMonthSelector(undefined);
+    },
+    [isMonthSelector],
+  );
+
+  return (
+    <Popover modifiers={[]} isOpen={visible} onClose={onClose} isLazy lazyBehavior="unmount">
+      <PopoverAnchor>{children}</PopoverAnchor>
+      <PopoverContent aria-label="select date range">
+        <FocusLock returnFocus>
+          <DatePickerContext value={ctx}>
+            <Box padding="24">
+              {isMonthSelector ? (
+                <DatePickerMonthSelector
+                  onMonthSelected={onMonthSelected}
+                  viewDate={isMonthSelector === 'left' ? leftViewDate : rightViewDate}
+                />
+              ) : (
+                <>
+                  <Box display="flex" gap="32" marginBottom="24">
+                    <DatePickerMonth
+                      onMonthClick={onMonthClickLeft}
+                      onViewDateChange={updateLeftViewDate}
+                      controls={isMobile ? 'both' : 'left'}
+                      viewDate={leftViewDate}
+                    />
+
+                    {!isMobile && (
+                      <DatePickerMonth
+                        onMonthClick={onMonthClickRight}
+                        onViewDateChange={updateRightViewDate}
+                        controls="right"
+                        viewDate={rightViewDate}
+                      />
+                    )}
+                  </Box>
+                  <DatePickerFooter onApply={handleApply} onClose={handleClose} selected={selected} />
+                </>
+              )}
+            </Box>
+          </DatePickerContext>
+        </FocusLock>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default DatePicker;

package/src/Components/DatePicker/DatePickerDay.theme.ts

@@ -0,0 +1,108 @@
+import type { DatePickerDayViewProps } from './DatePickerDay';
+
+const borderRadii: Record<string, string> = {
+  from: '0.5rem 0 0 0.5rem',
+  to: '0 0.5rem 0.5rem 0',
+  incomplete: '0.5rem',
+};
+function selectionBorder({ selection }: DatePickerDayViewProps) {
+  if (!selection || selection === 'between') {
+    return {};
+  }
+  return { borderRadius: borderRadii[selection] };
+}
+function previewStyles({ selection, preview, currentMonth }: DatePickerDayViewProps) {
+  const beingMoved = selection === preview;
+  const endpoint = selection === 'from' || selection === 'to';
+  if (selection === 'incomplete') {
+    return {
+      backgroundColor: 'purple.50',
+      color: 'neutral.100',
+    };
+  }
+  if (selection === 'between') {
+    return {
+      bg: 'purple.95',
+      color: currentMonth ? 'purple.10' : 'neutral.70',
+    };
+  }
+
+  if (endpoint) {
+    if (beingMoved) {
+      return {
+        bg: currentMonth ? 'purple.90' : 'purple.93',
+        color: currentMonth ? 'purple.10' : 'neutral.70',
+      };
+    }
+    return {
+      bg: currentMonth ? 'purple.50' : 'purple.70',
+      color: currentMonth ? 'neutral.100' : 'purple.95',
+    };
+  }
+  return {};
+}
+function selectionStyles({ selection, currentMonth }: DatePickerDayViewProps) {
+  if (!selection) {
+    return {};
+  }
+  if (selection === 'from' || selection === 'to' || selection === 'incomplete') {
+    return {
+      backgroundColor: currentMonth ? 'purple.50' : 'purple.70',
+      color: currentMonth ? 'neutral.100' : 'neutral.90',
+      '&:hover, &:focus-visible': {
+        outline: 'none',
+        boxShadow: 'none',
+        color: 'purple.90',
+        backgroundColor: 'purple.50',
+      },
+    };
+  }
+  if (selection === 'between') {
+    return {
+      color: currentMonth ? 'purple.10' : 'neutral.70',
+      backgroundColor: 'purple.90',
+      '&:hover, &:focus-visible': {
+        outline: 'none',
+        boxShadow: 'none',
+        backgroundColor: 'purple.80',
+      },
+    };
+  }
+  return { backgroundColor: 'purple.90' };
+}
+const DatePickerDay = {
+  parts: ['day', 'selection'],
+  baseStyle(props: DatePickerDayViewProps) {
+    const { today, selectable, currentMonth, showOutsideDays, preview, selection } = props;
+    return {
+      text: {
+        border: today ? '1.5px solid' : undefined,
+        borderColor: today ? 'purple.50' : undefined,
+        width: '40',
+        height: '32',
+        borderRadius: '8',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '&:hover, button:focus-visible > &': selectable
+          ? {
+              outline: 'none',
+              boxShadow: 'none',
+              backgroundColor: selection ? undefined : 'purple.90',
+            }
+          : undefined,
+      },
+      day: {
+        color: !selectable || (!currentMonth && showOutsideDays) ? 'neutral.70' : 'purple.10',
+        _focusVisible: {
+          outline: 'none',
+          boxShadow: 'none',
+        },
+        cursor: !selectable ? 'default' : undefined,
+        ...(preview ? previewStyles(props) : selectionStyles(props)),
+        ...selectionBorder(props),
+      },
+    };
+  },
+};
+export default DatePickerDay;

package/src/Components/DatePicker/DatePickerDay.tsx

@@ -0,0 +1,137 @@
+import { ReactNode, useCallback } from 'react';
+import { DateTime } from 'luxon';
+import { BoxProps, useMultiStyleConfig } from '@chakra-ui/react';
+import { createContext } from '@chakra-ui/react-utils';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import { useDatePickerContext } from './DatePicker.context';
+
+interface Context {
+  onPreviousMonth: () => void;
+  onNextMonth: () => void;
+  viewDate: DateTime;
+}
+export interface DatePickerDayViewProps {
+  onClick: () => void;
+  onMouseEnter: () => void;
+  selectable: boolean;
+  today: boolean;
+  currentMonth: boolean;
+  showOutsideDays: boolean;
+  preview: 'from' | 'to' | undefined;
+  selection?: 'from' | 'to' | 'between' | 'incomplete';
+  children: ReactNode;
+}
+const DatePickerDayView = ({
+  onClick,
+  onMouseEnter,
+  selectable,
+  selection,
+  showOutsideDays,
+  currentMonth,
+  today,
+  preview,
+  children,
+}: DatePickerDayViewProps) => {
+  const { day, text } = useMultiStyleConfig('DatePickerDay', {
+    today,
+    selectable,
+    selection,
+    preview,
+    showOutsideDays,
+    currentMonth,
+  });
+  const ariaProps: BoxProps = {};
+  if (currentMonth) {
+    ariaProps.as = 'button';
+    ariaProps.role = 'option';
+  }
+  return (
+    <Box {...ariaProps} sx={day} onMouseEnter={onMouseEnter} onFocus={onMouseEnter} onClick={onClick}>
+      <Text sx={text}>{children}</Text>
+    </Box>
+  );
+};
+const [DatePickerDayContext, useDatePickerDayContext] = createContext<Context>();
+export { DatePickerDayContext };
+
+const DatePickerDay = ({ n }: { n: number }): JSX.Element => {
+  const {
+    preview,
+    selectable,
+    selected,
+    onPreview,
+    showOutsideMonths: showOutsideDays,
+    onSelect,
+    today,
+  } = useDatePickerContext();
+  const { viewDate, onPreviousMonth, onNextMonth } = useDatePickerDayContext();
+  const { from: dateSelectableFrom, to: dateSelectableTo } = selectable || {};
+  const { from: dateSelectedFrom, to: dateSelectedTo } = selected || {};
+
+  const date = viewDate.plus({ days: n - viewDate.weekday });
+  const daysInPreviousMonth = viewDate.minus({ month: 1 }).daysInMonth;
+
+  const dayOfWeek = viewDate.weekday;
+  const { daysInMonth } = viewDate;
+
+  const isPreviousMonth = n < dayOfWeek;
+  const isNextMonth = n - dayOfWeek >= daysInMonth;
+  const isCurrentMonth = !isPreviousMonth && !isNextMonth;
+  const isAfterSelectableFromDate = !dateSelectableFrom || date >= dateSelectableFrom;
+  const isBeforeSelectableToDate = !dateSelectableTo || date <= dateSelectableTo;
+  const isSelectable = isAfterSelectableFromDate && isBeforeSelectableToDate;
+
+  const hasSelectionRange = dateSelectedFrom && dateSelectedTo && !dateSelectedFrom.equals(dateSelectedTo);
+
+  let selection: 'from' | 'to' | 'between' | 'incomplete' | undefined;
+  const interactive = isCurrentMonth || showOutsideDays;
+  if (hasSelectionRange && interactive && date > dateSelectedFrom && date < dateSelectedTo) {
+    selection = 'between';
+  }
+  if (interactive && dateSelectedFrom && date.equals(dateSelectedFrom)) {
+    selection = hasSelectionRange ? 'from' : 'incomplete';
+  }
+  if (interactive && dateSelectedTo && date.equals(dateSelectedTo)) {
+    selection = hasSelectionRange ? 'to' : 'incomplete';
+  }
+
+  const onClick = useCallback(() => {
+    if (!isSelectable) {
+      return;
+    }
+    onSelect(date);
+    if (isPreviousMonth) {
+      onPreviousMonth();
+    } else if (isNextMonth) {
+      onNextMonth();
+    }
+  }, [isPreviousMonth, isSelectable, onSelect, date, onPreviousMonth, onNextMonth]);
+  const onMouseEnter = useCallback(() => {
+    if (isSelectable) {
+      onPreview(date);
+    }
+  }, [onSelect, isSelectable, date]);
+
+  if (!isCurrentMonth && !showOutsideDays) {
+    return <div />;
+  }
+  return (
+    <DatePickerDayView
+      today={today.equals(viewDate.set({ day: n - dayOfWeek + 1 }).startOf('day'))}
+      preview={preview}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      selectable={isSelectable}
+      currentMonth={isCurrentMonth}
+      showOutsideDays={showOutsideDays}
+      selection={selection}
+    >
+      {isPreviousMonth && daysInPreviousMonth - (dayOfWeek - n - 1)}
+      {isCurrentMonth && n - dayOfWeek + 1}
+      {isNextMonth && n - dayOfWeek - daysInMonth + 1}
+    </DatePickerDayView>
+  );
+};
+
+export default DatePickerDay;

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -0,0 +1,41 @@
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+import Button from '../Button/Button';
+import ButtonGroup from '../ButtonGroup/ButtonGroup';
+import { DateRange } from './useDateRange';
+
+const DatePickerFooter = ({
+  selected,
+  onClose,
+  onApply,
+}: {
+  selected?: DateRange;
+  onClose: () => void;
+  onApply: () => void;
+}) => {
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={['unset', '1fr auto 1fr']}
+      gridTemplateRows={['1.25rem 2rem', 'unset']}
+      gap="24"
+    >
+      <Text alignSelf="center" justifySelf="center" size="2" color="text.secondary" gridColumn={['1', '2']}>
+        {selected?.from?.toFormat('DD', { locale: 'en-US' })}
+        {selected?.from || selected?.to ? ' - ' : undefined}
+        {selected?.to?.toFormat('DD', { locale: 'en-US' })}
+      </Text>
+      <ButtonGroup gridColumn={['1', '3']} justifyContent="end">
+        <Button variant="secondary" onClick={onClose} size="small">
+          Cancel
+        </Button>
+
+        <Button onClick={onApply} size="small">
+          Apply
+        </Button>
+      </ButtonGroup>
+    </Box>
+  );
+};
+
+export default DatePickerFooter;

package/src/Components/DatePicker/DatePickerGrid.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Box, { BoxProps } from '../Box/Box';
+
+type Props = BoxProps;
+
+const DatePickerGrid: React.FunctionComponent<Props> = (props: Props) => {
+  return <Box display="grid" {...props} gridTemplateColumns="repeat(7, 2.5rem)" gridAutoRows="2rem" gridRowGap="4" />;
+};
+
+export default DatePickerGrid;