@primer/components 0.0.0-202192701132 → 0.0.0-2021927175656

package/lib/theme.js

@@ -7,100 +7,5 @@ exports.default = void 0;
 
 var _themePreval = require("./theme-preval");
 
-var _default = _themePreval.theme; // typecheck our theme instance:
-// theme as Theme
-// type ThemeColors = {
-//   fg: {
-//     default: 'XXXXXXXXXXX',
-//     muted: 'XXXXXXXXXXX',
-//     subtle: 'XXXXXXXXXXX',
-//     onEmphasis: 'XXXXXXXXXXX'
-//   },
-//   canvas: {
-//     default: 'XXXXXXXXXXX',
-//     overlay: 'XXXXXXXXXXX',
-//     inset: 'XXXXXXXXXXX',
-//     subtle: 'XXXXXXXXXXX'
-//   },
-//   border: {
-//     default: 'XXXXXXXXXXX',
-//     muted: 'XXXXXXXXXXX',
-//     subtle: 'XXXXXXXXXXX'
-//   },
-//   shadow: {
-//     small: 'XXXXXXXXXXX',
-//     medium: 'XXXXXXXXXXX',
-//     large: 'XXXXXXXXXXX',
-//     extraLarge: 'XXXXXXXXXXX'
-//   },
-//   // Roles
-//   neutral: {
-//     emphasisPlus: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   accent: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   success: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   attention: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   severe: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   danger: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   done: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   sponsors: {
-//     fg: string,
-//     emphasis: string,
-//     muted: string,
-//     subtle: string
-//   },
-//   // Only meant for Primer components
-//   primer: {
-//     fg: {
-//       disabled: string
-//     },
-//     canvas: {
-//       backdrop: string,
-//       sticky: string
-//     },
-//     border: {
-//       active: string,
-//       contrast: string
-//     },
-//     shadow: {
-//       highlight: string,
-//       inset: string,
-//       focus: string
-//     }
-//   }
-// }
-
+var _default = _themePreval.theme;
 exports.default = _default;

package/lib/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/lib-esm/AnchoredOverlay/AnchoredOverlay.d.ts

@@ -26,6 +26,8 @@ interface AnchoredOverlayPropsWithoutAnchor {
      */
     anchorRef: React.RefObject<HTMLElement>;
 }
+export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
+export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
 export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
 interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
     /**
@@ -35,11 +37,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
     /**
      * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
      */
-    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
+    onOpen?: (gesture: OverlayOpenGesture) => unknown;
     /**
      * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
      */
-    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
+    onClose?: (gesture: OverlayCloseGesture) => unknown;
     /**
      * Props to be spread on the internal `Overlay` component.
      */

package/lib-esm/Autocomplete/Autocomplete.d.ts

@@ -12,12 +12,14 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<{
     id?: string | undefined;
 }> & {
-    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & {
+    } & ({} | {
+        children?: React.ReactNode;
+    })) & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -288,7 +290,7 @@ declare const _default: React.FC<{
         onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
         block?: boolean | undefined;
-        sx?: import("../sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         disabled?: boolean | undefined;
         variant?: "large" | "small" | undefined;
         hasIcon?: boolean | undefined;

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -4,12 +4,14 @@ import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;
 };
-declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & {
+} & ({} | {
+    children?: React.ReactNode;
+})) & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {
@@ -280,7 +282,7 @@ declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRef
     onTransitionEnd?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLSpanElement> | undefined;
     block?: boolean | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     disabled?: boolean | undefined;
     variant?: "large" | "small" | undefined;
     hasIcon?: boolean | undefined;

package/lib-esm/Button/ButtonClose.d.ts

@@ -306,7 +306,7 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     py?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     size?: import("styled-system").ResponsiveValue<import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-    sx?: import("../sx").BetterSystemStyleObject | undefined;
+    sx?: import("@styled-system/css").SystemStyleObject | undefined;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/lib-esm/CircleOcticon.d.ts

@@ -384,7 +384,7 @@ declare namespace CircleOcticon {
         paddingY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderX?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         borderY?: import("styled-system").ResponsiveValue<import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        sx?: import("./sx").BetterSystemStyleObject | undefined;
+        sx?: import("@styled-system/css").SystemStyleObject | undefined;
         theme?: any;
     };
 }

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { DatePickerConfiguration, Selection } from './useDatePicker';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps extends DatePickerConfiguration {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    initialValue?: 'today' | Date | string | null;
+    iconOnly?: boolean;
+    placeholder?: string;
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open?: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: OpenGesture) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: CloseGesture) => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    value?: Selection;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};

package/lib-esm/DatePicker/DatePicker.js

@@ -0,0 +1,83 @@
+import React, { useRef, useState } from 'react';
+import { DatePickerAnchor } from './DatePickerAnchor';
+import { DatePickerProvider } from './useDatePicker';
+import { DatePickerOverlay } from './DatePickerOverlay';
+export const DatePicker = ({
+  anchorVariant,
+  anchorRef: externalAnchorRef,
+  confirmation,
+  dateFormat,
+  focusTrapSettings,
+  focusZoneSettings,
+  iconPlacement,
+  maxDate,
+  maxRange,
+  maxSelections,
+  minDate,
+  onOpen: onOpenExternal,
+  onClose: onCloseExternal,
+  open,
+  overlayProps,
+  placeholder,
+  renderAnchor,
+  selection,
+  value,
+  view,
+  weekStartsOn
+}) => {
+  const anchorRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const datePickerConfiguration = {
+    anchorVariant,
+    confirmation,
+    dateFormat,
+    iconPlacement,
+    maxDate,
+    maxRange,
+    maxSelections,
+    minDate,
+    placeholder,
+    selection,
+    view,
+    weekStartsOn
+  };
+
+  const onOpen = gesture => {
+    setIsOpen(true);
+    onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
+  };
+
+  const onClose = gesture => {
+    setIsOpen(false);
+    onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
+  };
+
+  const toggleIsOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    } else {
+      setIsOpen(true);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(DatePickerProvider, {
+    configuration: datePickerConfiguration,
+    value: value,
+    closePicker: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(DatePickerAnchor, {
+    ref: anchorRef,
+    onAction: toggleIsOpen
+  }), /*#__PURE__*/React.createElement(DatePickerOverlay, {
+    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : anchorRef,
+    renderAnchor: renderAnchor,
+    open: open !== null && open !== void 0 ? open : isOpen,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }));
+};
+DatePicker.displayName = "DatePicker";

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface DatePickerAnchorProps {
+    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/lib-esm/DatePicker/DatePickerAnchor.js

@@ -0,0 +1,155 @@
+import { CalendarIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import React, { useCallback, useState } from 'react';
+import Button, { ButtonInvisible } from '../Button';
+import Text from '../Text';
+import { get } from '../constants';
+import StyledOcticon from '../StyledOcticon';
+import useDatePicker from './useDatePicker';
+import TextInput from '../TextInput';
+import Box from '../Box';
+import { isBefore } from 'date-fns';
+const DatePickerAnchorButton = styled(Button).withConfig({
+  displayName: "DatePickerAnchor__DatePickerAnchorButton",
+  componentId: "sc-8gpb9d-0"
+})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], Text, get('space.2'), Text, get('space.2'));
+const INVALID_DATE = 'Invalid Date';
+export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
+  onAction
+}, ref) => {
+  const {
+    configuration: {
+      anchorVariant,
+      iconPlacement,
+      selection
+    },
+    disabled,
+    formattedDate,
+    onDateInput
+  } = useDatePicker();
+  const [inputValue, setInputValue] = useState(formattedDate);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(event);
+    }
+  }, [disabled, onAction]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onAction === null || onAction === void 0 ? void 0 : onAction(event);
+  }, [disabled, onAction]);
+  const onInputChangeHandler = useCallback(e => {
+    const value = e.currentTarget.value;
+    if (!value) return;
+
+    if (selection === 'range') {
+      var _values$, _values$2, _values$3, _values$4, _values$5, _values$6;
+
+      const values = value.split(' - ');
+      const dates = isBefore(new Date((_values$ = values[0]) === null || _values$ === void 0 ? void 0 : _values$.trim()), new Date((_values$2 = values[1]) === null || _values$2 === void 0 ? void 0 : _values$2.trim())) ? {
+        from: new Date((_values$3 = values[0]) === null || _values$3 === void 0 ? void 0 : _values$3.trim()),
+        to: new Date((_values$4 = values[1]) === null || _values$4 === void 0 ? void 0 : _values$4.trim())
+      } : {
+        from: new Date((_values$5 = values[1]) === null || _values$5 === void 0 ? void 0 : _values$5.trim()),
+        to: new Date((_values$6 = values[0]) === null || _values$6 === void 0 ? void 0 : _values$6.trim())
+      };
+      setInputValue(value);
+
+      if (dates.from.toString() !== INVALID_DATE && dates.to.toString() !== INVALID_DATE) {
+        onDateInput(dates);
+      }
+    } else if (selection === 'multi') {
+      const values = value.split(',');
+      const dates = [];
+
+      for (const date of values) {
+        dates.push(new Date(date.trim()));
+      }
+
+      setInputValue(value);
+
+      if (dates.every(d => d.toString() !== INVALID_DATE)) {
+        onDateInput(dates);
+      }
+    } else {
+      const date = new Date(value);
+      setInputValue(value);
+      if (date.toString() !== INVALID_DATE) onDateInput(date);
+    }
+  }, [onDateInput, selection]);
+
+  const onBlurHandler = () => {
+    setInputValue(formattedDate);
+  };
+
+  if (anchorVariant === 'input') {
+    const calendarButton = side => /*#__PURE__*/React.createElement(ButtonInvisible, {
+      onClick: clickHandler,
+      sx: {
+        width: '32px',
+        px: '6px',
+        position: 'absolute',
+        [side]: '1px',
+        top: '1px'
+      }
+    }, /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: CalendarIcon
+    }));
+
+    const inputSx = () => {
+      if (iconPlacement === 'start') {
+        return {
+          pl: 5,
+          pr: 2
+        };
+      } else if (iconPlacement === 'end') {
+        return {
+          pl: 2,
+          pr: 5
+        };
+      } else {
+        return {};
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(Box, {
+      ref: ref,
+      sx: {
+        position: 'relative',
+        display: 'flex',
+        flex: 1
+      }
+    }, iconPlacement === 'start' && calendarButton('left'), /*#__PURE__*/React.createElement(TextInput, {
+      value: inputValue,
+      onChange: onInputChangeHandler,
+      sx: inputSx(),
+      onBlur: onBlurHandler
+    }), iconPlacement === 'end' && calendarButton('right'));
+  }
+
+  const calendarIcon = () => /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: CalendarIcon,
+    color: "fg.muted",
+    sx: {
+      my: '2px'
+    }
+  });
+
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler
+  }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, formattedDate), iconPlacement === 'end' && calendarIcon()));
+});

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnchoredOverlayProps } from '../AnchoredOverlay';
+export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;

package/lib-esm/DatePicker/DatePickerOverlay.js

@@ -0,0 +1,24 @@
+function _extends() { _extends = Object.assign || 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); }
+
+import React from 'react';
+import useDatePicker from './useDatePicker';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { DatePickerPanel } from './DatePickerPanel';
+export const DatePickerOverlay = ({
+  onClose,
+  ...rest
+}) => {
+  const {
+    revertValue
+  } = useDatePicker();
+
+  const onOverlayClose = gesture => {
+    revertValue();
+    onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
+  };
+
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
+    onClose: onOverlayClose
+  }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
+};
+DatePickerOverlay.displayName = "DatePickerOverlay";

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DatePickerPanel: () => JSX.Element;

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -0,0 +1,100 @@
+import { addMonths, subMonths } from 'date-fns';
+import React, { useMemo } from 'react';
+import Box from '../Box';
+import { Month } from './Month';
+import styled from 'styled-components';
+import { get } from '../constants';
+import useDatePicker from './useDatePicker';
+import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
+import StyledOcticon from '../StyledOcticon';
+import Button, { ButtonPrimary } from '../Button';
+const DatePickerPanelContainer = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelContainer",
+  componentId: "sc-19upxpo-0"
+})(["align-items:stretch;display:flex;flex-direction:column;"]);
+const DatePickerPanelMonths = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelMonths",
+  componentId: "sc-19upxpo-1"
+})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], get('space.6'), get('space.3'));
+const DatePickerPanelFooter = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelFooter",
+  componentId: "sc-19upxpo-2"
+})(["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-3"
+})(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${get('space.3')(props)}`);
+export const DatePickerPanel = () => {
+  const {
+    configuration,
+    saveValue,
+    revertValue,
+    currentViewingDate,
+    goToMonth,
+    nextMonth,
+    previousMonth
+  } = useDatePicker();
+  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]);
+  return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(DatePickerPanelMonths, null, /*#__PURE__*/React.createElement(ArrowButton, {
+    variant: "small",
+    side: "left",
+    onClick: previousMonth,
+    disabled: previousDisabled
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ChevronLeftIcon,
+    color: "fg.muted"
+  })), /*#__PURE__*/React.createElement(Month, {
+    month: currentViewingDate.getMonth(),
+    year: currentViewingDate.getFullYear()
+  }), configuration.view === '2-month' && /*#__PURE__*/React.createElement(Month, {
+    month: addMonths(currentViewingDate, 1).getMonth(),
+    year: addMonths(currentViewingDate, 1).getFullYear()
+  }), /*#__PURE__*/React.createElement(ArrowButton, {
+    variant: "small",
+    side: "right",
+    onClick: nextMonth,
+    disabled: nextDisabled
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: ChevronRightIcon,
+    color: "fg.muted"
+  }))), /*#__PURE__*/React.createElement(DatePickerPanelFooter, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "small",
+    sx: {
+      mr: 1
+    },
+    onClick: () => revertValue()
+  }, "Reset"), /*#__PURE__*/React.createElement(Button, {
+    variant: "small",
+    onClick: () => goToMonth(new Date())
+  }, "Today")), configuration.confirmation && /*#__PURE__*/React.createElement(ButtonPrimary, {
+    variant: "small",
+    onClick: () => saveValue()
+  }, "Apply")));
+};
+DatePickerPanel.displayName = "DatePickerPanel";

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

@@ -0,0 +1,14 @@
+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;
+    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>;