@algolia/satellite 1.0.0-beta.140 → 1.0.0-beta.141

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -37,10 +37,10 @@ var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, DEFAULT_D
 });
 
 var DateRangePicker = function DateRangePicker(_ref2) {
-  var _validate, _displayedRange$start, _displayedRange$start2, _displayedRange$end, _displayOnlyRanges$ma, _state$hovered;
+  var _validate, _displayedRange$start;
 
   var id = _ref2.id,
-      range = _ref2.range,
+      initialRange = _ref2.range,
       displayOnlyRanges = _ref2.displayOnlyRanges,
       _ref2$calendarProps = _ref2.calendarProps,
       calendarProps = _ref2$calendarProps === void 0 ? {} : _ref2$calendarProps,
@@ -77,10 +77,12 @@ var DateRangePicker = function DateRangePicker(_ref2) {
 
 
   var isValid = !((_validate = validate(state)) !== null && _validate !== void 0 && _validate.length);
-  var displayedRange = isEmptyTimeRange(state.candidateRange) ? range !== null && range !== void 0 ? range : {
-    start: null,
-    end: null
-  } : state.candidateRange; // Event handlers
+  var displayedRange = useMemo(function () {
+    return isEmptyTimeRange(state.candidateRange) ? initialRange !== null && initialRange !== void 0 ? initialRange : {
+      start: null,
+      end: null
+    } : state.candidateRange;
+  }, [initialRange, state.candidateRange]); // Event handlers
 
   var dispatch = function dispatch(action) {
     onAction === null || onAction === void 0 ? void 0 : onAction(action, state);
@@ -141,40 +143,54 @@ var DateRangePicker = function DateRangePicker(_ref2) {
     }
   };
 
-  var selectedDays = [displayedRange.start && displayedRange.end ? {
+  var selectedDays = displayedRange.start && displayedRange.end ? {
     from: displayedRange.start,
     to: displayedRange.end
   } : displayedRange.start && state.hovered ? {
     from: displayedRange.start,
     to: state.hovered
-  } : (_displayedRange$start = displayedRange.start) !== null && _displayedRange$start !== void 0 ? _displayedRange$start : undefined];
-  var modifiers = {
-    start: (_displayedRange$start2 = displayedRange.start) !== null && _displayedRange$start2 !== void 0 ? _displayedRange$start2 : undefined,
-    end: (_displayedRange$end = displayedRange.end) !== null && _displayedRange$end !== void 0 ? _displayedRange$end : undefined,
-    displayedRanges: (_displayOnlyRanges$ma = displayOnlyRanges === null || displayOnlyRanges === void 0 ? void 0 : displayOnlyRanges.map(function (range) {
-      return !range.start || !range.end ? undefined : {
+  } : (_displayedRange$start = displayedRange.start) !== null && _displayedRange$start !== void 0 ? _displayedRange$start : undefined;
+  var modifiers = {};
+
+  if (displayedRange.start) {
+    modifiers.start = [displayedRange.start];
+  }
+
+  if (displayedRange.end) {
+    modifiers.end = [displayedRange.end];
+  }
+
+  if (state.hovered) {
+    modifiers.hoveredTo = [state.hovered];
+  }
+
+  if (displayOnlyRanges) {
+    modifiers.displayedRanges = displayOnlyRanges.filter(function (range) {
+      return typeof range !== "undefined" && range.start instanceof Date && range.end instanceof Date;
+    }).map(function (range) {
+      return {
         from: range.start,
         to: range.end
       };
-    })) !== null && _displayOnlyRanges$ma !== void 0 ? _displayOnlyRanges$ma : undefined,
-    displayedRangesStart: displayOnlyRanges === null || displayOnlyRanges === void 0 ? void 0 : displayOnlyRanges.map(function (range) {
-      var _range$start;
-
-      return (_range$start = range.start) !== null && _range$start !== void 0 ? _range$start : undefined;
-    }),
-    displayedRangesEnd: displayOnlyRanges === null || displayOnlyRanges === void 0 ? void 0 : displayOnlyRanges.map(function (range) {
-      var _range$end;
+    });
+    modifiers.displayedRangesStart = displayOnlyRanges.filter(function (range) {
+      return typeof range !== "undefined" && range.start instanceof Date;
+    }).map(function (range) {
+      return range.start;
+    });
+    modifiers.displayedRangesEnd = displayOnlyRanges.filter(function (range) {
+      return typeof range !== "undefined" && range.end instanceof Date;
+    }).map(function (range) {
+      return range.end;
+    });
+  }
 
-      return (_range$end = range.end) !== null && _range$end !== void 0 ? _range$end : undefined;
-    }),
-    hoveredTo: (_state$hovered = state.hovered) !== null && _state$hovered !== void 0 ? _state$hovered : undefined
-  };
   var yearProps = useMemo(function () {
-    var _ref3, _displayedRange$start3;
+    var _ref3, _displayedRange$start2;
 
     return props.editableYear ? {
       editableYear: true,
-      initialDate: (_ref3 = (_displayedRange$start3 = displayedRange.start) !== null && _displayedRange$start3 !== void 0 ? _displayedRange$start3 : displayedRange.end) !== null && _ref3 !== void 0 ? _ref3 : undefined,
+      initialDate: (_ref3 = (_displayedRange$start2 = displayedRange.start) !== null && _displayedRange$start2 !== void 0 ? _displayedRange$start2 : displayedRange.end) !== null && _ref3 !== void 0 ? _ref3 : undefined,
       years: props.years
     } : {
       editableYear: false
@@ -191,7 +207,7 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       }) : /*#__PURE__*/_jsx(DateRangePickerDisplay, {
         id: id,
         onClick: state.show ? handleClose : handleOpen,
-        range: range !== null && range !== void 0 ? range : {
+        range: initialRange !== null && initialRange !== void 0 ? initialRange : {
           start: null,
           end: null
         },
@@ -215,9 +231,10 @@ var DateRangePicker = function DateRangePicker(_ref2) {
         className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["flex"]))),
         children: [/*#__PURE__*/_jsxs("div", {
           children: [/*#__PURE__*/_jsx(Calendar, _objectSpread(_objectSpread(_objectSpread({
+            mode: "default",
             numberOfMonths: 2
           }, calendarProps), {}, {
-            selectedDays: selectedDays,
+            selected: selectedDays,
             modifiers: modifiers,
             onDayClick: handleDayClick,
             onDayMouseEnter: handleMouseEnter,

package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.d.ts

@@ -26,13 +26,13 @@ export interface DateRangePickerMouseEnterAction {
     type: DateRangePickerActionTypes.mouseDayEnter;
     payload: Date;
     meta: {
-        event: MouseEvent<HTMLDivElement>;
+        event: MouseEvent;
     };
 }
 export interface DateRangePickerMouseLeaveAction {
     type: DateRangePickerActionTypes.mouseDayLeave;
     meta: {
-        event: MouseEvent<HTMLDivElement>;
+        event: MouseEvent;
     };
 }
 export interface DateRangePickerApplyAction {

package/esm/DatePicker/components/Calendar.d.ts

@@ -1,8 +1,8 @@
 import type { FunctionComponent } from "react";
-import { DayPickerProps } from "react-day-picker";
+import { DayPickerDefaultProps, DayPickerRangeProps, DayPickerSingleProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
-declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumbers" | "showWeekDays" | "todayButton" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
+declare type ExcludedDayPickerProps = "captionElement" | "showOutsideDays" | "enableOutsideDaysClick" | "fixedWeeks" | "labels" | "navbarElement" | "onTodayButtonClick" | "pagedNavigation" | "renderDay" | "renderWeek" | "reverseMonths" | "showWeekNumber" | "showWeekDays" | "weekdayElement" | "weekdaysLong" | "weekdaysShort";
 export declare type EditableYearProps = {
     editableYear?: false;
 } | {
@@ -10,7 +10,7 @@ export declare type EditableYearProps = {
     years?: number[];
     initialDate?: Date;
 };
-export declare type CalendarProps = Omit<Omit<DayPickerProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
+export declare type CalendarProps = Omit<Omit<DayPickerSingleProps | DayPickerRangeProps | DayPickerDefaultProps, "locale">, ExcludedDayPickerProps> & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const Calendar: FunctionComponent<CalendarProps>;

package/esm/DatePicker/components/Calendar.js

@@ -5,38 +5,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
-import { useCallback, useMemo, useState } from "react";
-import DayPicker from "react-day-picker";
+import { DayPicker } from "react-day-picker";
+import { getDateFnsLocale } from "../utils";
 import NavBar from "./NavBar";
 import { jsx as _jsx } from "react/jsx-runtime";
-var excludedDayPickerPropsList = ["captionElement", "showOutsideDays", "enableOutsideDaysClick", "fixedWeeks", "labels", "navbarElement", "onTodayButtonClick", "pagedNavigation", "renderDay", "renderWeek", "reverseMonths", "showWeekNumbers", "showWeekDays", "todayButton", "weekdayElement", "weekdaysLong", "weekdaysShort"];
+var excludedDayPickerPropsList = ["captionElement", "showOutsideDays", "enableOutsideDaysClick", "fixedWeeks", "labels", "navbarElement", "onTodayButtonClick", "pagedNavigation", "renderDay", "renderWeek", "reverseMonths", "showWeekNumber", "showWeekDays", "weekdayElement", "weekdaysLong", "weekdaysShort"];
 
 var Calendar = function Calendar(props) {
-  var initialDate = useMemo(function () {
-    return props.editableYear && props.initialDate ? props.initialDate : new Date();
-  }, [props]);
-
-  var _useState = useState(initialDate),
-      _useState2 = _slicedToArray(_useState, 2),
-      month = _useState2[0],
-      setMonth = _useState2[1];
-
-  var years = useMemo(function () {
-    if (!props.editableYear) return [];
-    if (props.years) return props.years;
-    return eachYearOfInterval({
-      start: add(initialDate, {
-        years: -5
-      }),
-      end: add(initialDate, {
-        years: 10
-      })
-    }).map(getYear);
-  }, [props, initialDate]);
-  var onYearChange = useCallback(function (year) {
-    return setMonth(setYear(month, year));
-  }, [month]);
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
         key = _ref2[0];
@@ -45,27 +20,36 @@ var Calendar = function Calendar(props) {
       !excludedDayPickerPropsList.includes(key)
     );
   }));
-  var yearsProps = useMemo(function () {
-    return props.editableYear ? {
-      editableYear: true,
-      years: years,
-      onYearChange: onYearChange
-    } : {
-      editableYear: false
-    };
-  }, [onYearChange, props, years]);
-  return /*#__PURE__*/_jsx(DayPicker, _objectSpread(_objectSpread({}, curatedProps), {}, {
-    month: props.editableYear ? month : undefined,
+  /**
+   * modifierClassNames applies the object value (className) to the key (modifier). These classNames are
+   * defined / modified in the DatePicker.tailwind.js file.
+   */
+
+  var modifierClassNames = {
+    start: "rdp-day_range_start",
+    end: "rdp-day_range_end",
+    displayedRanges: "rdp-day_displayedRanges",
+    //stl`bg-grey-200 rounded-none border-0`,
+    displayedRangesStart: "rdp-day_displayedRangesStart",
+    //stl`bg-grey-600 text-white rounded-l border-0`,
+    displayedRangesEnd: "rdp-day_displayedRangesEnd" //stl`bg-grey-600 text-white rounded-r border-0`,
+
+  }; // This could be expanded further to incorporate expanding the number system as well as the text:
+  // https://react-day-picker.js.org/basics/localization#adopting-other-numbering-systems
+
+  var dateFnsLocale = getDateFnsLocale(props.locale.code);
+  return /*#__PURE__*/_jsx(DayPicker, _objectSpread(_objectSpread({
+    mode: props.mode
+  }, curatedProps), {}, {
+    locale: dateFnsLocale,
+    dir: props.locale.rtl ? "rtl" : "ltr",
+    modifiersClassNames: modifierClassNames,
     showOutsideDays: false,
-    enableOutsideDaysClick: false,
     fixedWeeks: false,
-    navbarElement: function navbarElement(navBarProps) {
-      return /*#__PURE__*/_jsx(NavBar, _objectSpread(_objectSpread(_objectSpread({}, navBarProps), yearsProps), {}, {
-        locale: props.locale
-      }));
-    },
-    captionElement: function captionElement() {
-      return null;
+    components: {
+      Caption: function Caption(captionProps) {
+        return /*#__PURE__*/_jsx(NavBar, _objectSpread(_objectSpread({}, captionProps), props));
+      }
     }
   }));
 };

package/esm/DatePicker/components/NavBar.d.ts

@@ -1,15 +1,9 @@
 import type { FunctionComponent } from "react";
-import type { NavbarElementProps } from "react-day-picker";
+import { CaptionProps } from "react-day-picker";
 import type { WithRequiredProperty } from "../../types";
 import type { DatePickerLocale } from "../types";
-export declare type NavBarYearProps = {
-    editableYear?: false;
-} | {
-    editableYear: true;
-    years: number[];
-    onYearChange: (year: number) => void;
-};
-export declare type NavBarProps = Omit<NavbarElementProps, "locale"> & NavBarYearProps & {
+import type { EditableYearProps } from "./Calendar";
+export declare type NavBarProps = CaptionProps & EditableYearProps & {
     locale: WithRequiredProperty<DatePickerLocale, "nextMonth" | "previousMonth">;
 };
 declare const NavBar: FunctionComponent<NavBarProps>;

package/esm/DatePicker/components/NavBar.js

@@ -1,59 +1,101 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "locale", "localeUtils"];
 import cx from "clsx";
+import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
+import isSameMonth from "date-fns/isSameMonth";
 import { useMemo } from "react";
+import { useDayPicker, useNavigation } from "react-day-picker";
 import { ChevronLeft, ChevronRight } from "react-feather";
 import { IconButton } from "../../Button";
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
-var NavBar = function NavBar(_ref) {
-  var onPreviousClick = _ref.onPreviousClick,
-      onNextClick = _ref.onNextClick,
-      showPreviousButton = _ref.showPreviousButton,
-      showNextButton = _ref.showNextButton,
-      month = _ref.month,
-      locale = _ref.locale,
-      localeUtils = _ref.localeUtils,
-      props = _objectWithoutProperties(_ref, _excluded);
+var NavBar = function NavBar(props) {
+  var _useDayPicker = useDayPicker(),
+      numberOfMonths = _useDayPicker.numberOfMonths,
+      onMonthChange = _useDayPicker.onMonthChange,
+      formatMonthCaption = _useDayPicker.formatters.formatMonthCaption,
+      dir = _useDayPicker.dir,
+      locale = _useDayPicker.locale;
+
+  var _useNavigation = useNavigation(),
+      previousMonth = _useNavigation.previousMonth,
+      nextMonth = _useNavigation.nextMonth,
+      goToMonth = _useNavigation.goToMonth,
+      goToDate = _useNavigation.goToDate,
+      displayMonths = _useNavigation.displayMonths;
+
+  var _props$locale = props.locale,
+      nextMonthLabel = _props$locale.nextMonth,
+      previousMonthLabel = _props$locale.previousMonth;
+  var initialDate = useMemo(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+  var displayIndex = displayMonths.findIndex(function (month) {
+    return isSameMonth(props.displayMonth, month);
+  });
+  var isFirst = displayIndex === 0;
+  var isLast = displayIndex === displayMonths.length - 1;
+  var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
+  var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
+
+  var handlePreviousClick = function handlePreviousClick() {
+    if (!previousMonth) return;
+    goToMonth(previousMonth);
+    onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(previousMonth);
+  };
+
+  var handleNextClick = function handleNextClick() {
+    if (!nextMonth) return;
+    goToMonth(nextMonth);
+    onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
+  };
 
   var years = useMemo(function () {
     if (!props.editableYear) return [];
-    var monthYear = month.getFullYear(); // year of the currently shown month
+    if (props.years) return props.years;
+    var interval = eachYearOfInterval({
+      start: add(initialDate, {
+        years: -5
+      }),
+      end: add(initialDate, {
+        years: 10
+      })
+    }).map(getYear);
+    var monthYear = props.displayMonth.getFullYear(); // year of the currently shown month
 
-    if (props.years.includes(monthYear)) return props.years;
-    var minYear = Math.min.apply(Math, _toConsumableArray(props.years).concat([monthYear]));
-    var maxYear = Math.max.apply(Math, _toConsumableArray(props.years).concat([monthYear]));
+    if (interval.includes(monthYear)) return interval;
+    var minYear = Math.min.apply(Math, _toConsumableArray(interval).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, _toConsumableArray(interval).concat([monthYear]));
     return Array.from({
       length: maxYear - minYear + 1
     }, function (_, i) {
       return i + minYear;
     });
-  }, [props, month]);
+  }, [props, initialDate]);
   return /*#__PURE__*/_jsxs("div", {
-    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"]))),
+    className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-1 px-2 pb-2 flex justify-between"]))),
     children: [/*#__PURE__*/_jsx(IconButton, {
-      icon: ChevronLeft,
-      title: locale.previousMonth,
-      onClick: function onClick() {
-        return onPreviousClick();
-      },
-      disabled: !showPreviousButton
+      icon: dir === "rtl" ? ChevronRight : ChevronLeft,
+      title: previousMonthLabel,
+      onClick: handlePreviousClick,
+      showTooltip: hidePrevious ? false : undefined,
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", ""])), hidePrevious && "invisible")
     }), /*#__PURE__*/_jsx("div", {
-      className: cx(stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["flex items-center text-center"])))),
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["flex items-center text-center"]))),
       children: /*#__PURE__*/_jsxs("div", {
-        className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["font-medium text-md"]))),
-        children: [localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/_jsx("select", {
-          className: cx("DayPicker-Year", stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
-          value: month.getFullYear(),
+        className: stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["font-medium text-md"]))),
+        children: [formatMonthCaption(props.displayMonth, {
+          locale: locale
+        }), " ", props.editableYear ? /*#__PURE__*/_jsx("select", {
+          className: cx("rdp-year", stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["pl-0.5 font-medium outline-none border-transparent border-2 rounded focus:border-accent-600 focus:shadow-z100 appearance-none"])))),
+          value: props.displayMonth.getFullYear(),
           onChange: function onChange(e) {
-            return props.onYearChange(parseInt(e.currentTarget.value));
+            return goToDate(setYear(props.displayMonth, parseInt(e.currentTarget.value)));
           },
           children: years.map(function (year) {
             return /*#__PURE__*/_jsx("option", {
@@ -61,15 +103,14 @@ var NavBar = function NavBar(_ref) {
               children: year
             }, year);
           })
-        }) : month.getFullYear()]
+        }) : props.displayMonth.getFullYear()]
       })
     }), /*#__PURE__*/_jsx(IconButton, {
-      icon: ChevronRight,
-      title: locale.nextMonth,
-      onClick: function onClick() {
-        return onNextClick();
-      },
-      disabled: !showNextButton
+      icon: dir === "rtl" ? ChevronLeft : ChevronRight,
+      title: nextMonthLabel,
+      onClick: handleNextClick,
+      showTooltip: hideNext ? false : undefined,
+      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", ""])), hideNext && "invisible")
     })]
   });
 };

package/esm/DatePicker/types.d.ts

@@ -1,5 +1,18 @@
+import type * as Locales from "date-fns/locale";
 import type { ModalProps } from "./components/Modal";
 export declare type DatePickerLocale = {
+    /**
+     * code is the date-fns ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+     * for rendering the actual calendar component in the correct language. This has no effect on the custom translations
+     * listed below. (i.e. `openButton`, `apply`, etc.)
+     */
+    code?: keyof typeof Locales;
+    /** rtl should be used optionally in conjunction with supported language codes, such as `rtl: true` when code is `arSA` */
+    rtl?: boolean;
+    /**
+     * custom translations for the DatePicker component unrelated to the date-fns locale. These are used to translate
+     * the buttons and labels of the DatePicker component outside of the month, day, year, etc.
+     */
     openButton?: string;
     cancel?: string;
     apply?: string;

package/esm/DatePicker/utils.d.ts

@@ -1,3 +1,10 @@
+import type { Locale } from "date-fns";
 import type { DatePickerLocale } from "./types";
 export declare const formatDate: (date: Date | number) => string;
 export declare const DEFAULT_DATE_PICKER_LOCALE: Required<DatePickerLocale>;
+/**
+ * Looks up a date-fns locale. This falls back to `en`
+ * @param locale the ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+ * @returns date-fns locale.
+ */
+export declare function getDateFnsLocale(locale?: string): Locale;

package/esm/DatePicker/utils.js

@@ -1,11 +1,30 @@
 import format from "date-fns/format";
+import * as Locales from "date-fns/locale";
 export var formatDate = function formatDate(date) {
   return format(date, "MMM do, yyyy");
 };
 export var DEFAULT_DATE_PICKER_LOCALE = {
+  code: "enUS",
+  rtl: false,
   apply: "Apply",
   cancel: "Cancel",
   openButton: "Enter a date...",
   previousMonth: "Previous month",
   nextMonth: "Next month"
-};
+};
+/**
+ * Looks up a date-fns locale. This falls back to `en`
+ * @param locale the ISO 639-1 language code to look up @link https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
+ * @returns date-fns locale.
+ */
+
+export function getDateFnsLocale(locale) {
+  var _allLocales$locale;
+
+  if (!locale) {
+    return Locales.enUS;
+  }
+
+  var allLocales = Locales;
+  return (_allLocales$locale = allLocales[locale]) !== null && _allLocales$locale !== void 0 ? _allLocales$locale : Locales.enUS;
+}

package/esm/Dropdown/components/DropdownButtonItem.d.ts

@@ -6,7 +6,7 @@ export declare type DropdownButtonItemProps = DropdownBaseItemProps<HTMLButtonEl
     startIcon?: IconComponentType;
     /**
      * Variant of the item
-     * @default default
+     * @default "default"
      */
     variant?: "default" | "destructive";
 };

package/esm/Dropdown/components/DropdownButtonItem.js

@@ -29,7 +29,7 @@ export var DropdownButtonItem = function DropdownButtonItem(props) {
   return /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
     className: cx(mergedProps.className, stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
       size: "1rem"
     }), /*#__PURE__*/_jsx("span", {
       className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),

package/esm/Input/Input.js

@@ -126,7 +126,7 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, externalRef) {
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     },
     children: [Icon && /*#__PURE__*/_jsx(Icon, {
-      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
+      className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["ml-4 shrink-0 ", ""])), disabled ? "text-grey-200" : focused ? "text-accent-600" : "text-grey-500"),
       size: variant === "small" ? "1rem" : "1.5rem"
     }), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
       className: stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["mx-4 no-search-input-decoration"]))),

package/esm/Link/Link.js

@@ -40,10 +40,10 @@ export var Link = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     className: cx(stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/_jsx(StartIcon, {
-      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-1"]))),
+      className: stl(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["mr-1 shrink-0"]))),
       size: "1em"
     }), children, EndIcon && /*#__PURE__*/_jsx(EndIcon, {
-      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1"]))),
+      className: stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["ml-1 shrink-0"]))),
       size: "1em"
     })]
   }));

package/esm/Modal/Modal.js

@@ -137,9 +137,11 @@ export var Modal = function Modal(_ref) {
       }, modalAccessibilityProps), {}, {
         children: /*#__PURE__*/_jsxs(Card, {
           ref: dialogRef,
+          as: "section",
           elevation: "500",
           className: cx(stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
           fullBleed: true,
+          "aria-label": title || "Modal",
           children: [/*#__PURE__*/_jsxs("header", {
             className: stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                px-8 min-h-14\n                flex items-center justify-between  space-x-2\n                ", "\n                ", "\n              "])), title ? "border-b border-grey-100" : "justify-end", !title && hideCloseIcon && "hidden"),
             children: [title && /*#__PURE__*/_jsx("h2", {

package/esm/Tooltip/TooltipWrapper.js

@@ -125,7 +125,7 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
   }, [cancelTransition, hideDelay, internalShow, scheduleTransition]);
   useEffect(function () {
     if (isControlled || !showTooltip) return;
-    var handleMouseMouve = throttle(function (evt) {
+    var handleMouseMove = throttle(function (evt) {
       var target = evt.target;
       var isWithinBounds = [targetEl, interactive ? popperEl : null].some(function (ref) {
         return Boolean(ref && (ref === target || ref.contains(target)));
@@ -139,10 +139,10 @@ export var TooltipWrapper = function TooltipWrapper(_ref) {
     }, 16, {
       leading: true
     });
-    document.addEventListener("mousemove", handleMouseMouve);
+    document.addEventListener("mousemove", handleMouseMove);
     return function () {
-      handleMouseMouve.cancel();
-      document.removeEventListener("mousemove", handleMouseMouve);
+      handleMouseMove.cancel();
+      document.removeEventListener("mousemove", handleMouseMove);
     };
   }, [isControlled, popperEl, scheduleHideTooltip, scheduleShowTooltip, showTooltip, targetEl, interactive]);
   /**

package/esm/styles/base.tailwind.js

@@ -17,6 +17,12 @@ var basePlugin = plugin(function (_ref) {
       /* Enable kerning and optional ligatures */
       "text-rendering": "optimizeLegibility"
     }
+  }); // Accent color
+
+  addBase({
+    ":root": {
+      "accent-color": theme("colors.accent.600")
+    }
   }); // Text selection
 
   addBase({
@@ -24,8 +30,7 @@ var basePlugin = plugin(function (_ref) {
       background: theme("colors.accent.600"),
       color: theme("colors.white")
     }
-  }); // TODO: Headers base styles ?
-  // Base styles for links
+  }); // Base styles for links
 
   addBase({
     a: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@algolia/satellite",
-  "version": "1.0.0-beta.140",
+  "version": "1.0.0-beta.141",
   "description": "Algolia design system React components",
   "scripts": {
     "clean": "rimraf dist",
@@ -27,7 +27,7 @@
     "version": "yarn changelog && git add CHANGELOG.md",
     "postversion": "git push && git push --tags",
     "release": "./scripts/release.sh",
-    "chromatic": "chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
+    "chromatic": "cross-env NODE_ENV=storybook chromatic --build-script-name build:storybook --exit-zero-on-changes --auto-accept-changes master"
   },
   "publishConfig": {
     "access": "public"
@@ -74,7 +74,7 @@
     "diacritics": "^1.3.0",
     "downshift": "^2.0.10",
     "lodash.throttle": "^4.1.1",
-    "react-day-picker": "7.4.10",
+    "react-day-picker": "^8.0.7",
     "react-dropzone": "^11.5.1",
     "react-popper": "^2.2.5",
     "react-transition-group": "4.4.2",