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

package/cjs/DatePicker/DateRangePicker/DateRangePicker.js

@@ -59,10 +59,10 @@ var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, _utils.DE
 });
 
 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,
@@ -98,10 +98,12 @@ var DateRangePicker = function DateRangePicker(_ref2) {
 
 
   var isValid = !((_validate = validate(state)) !== null && _validate !== void 0 && _validate.length);
-  var displayedRange = (0, _dateRangePickerTimeRange.isEmptyTimeRange)(state.candidateRange) ? range !== null && range !== void 0 ? range : {
-    start: null,
-    end: null
-  } : state.candidateRange; // Event handlers
+  var displayedRange = (0, _react.useMemo)(function () {
+    return (0, _dateRangePickerTimeRange.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);
@@ -162,40 +164,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;
-
-      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
-  };
+    });
+    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;
+    });
+  }
+
   var yearProps = (0, _react.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
@@ -212,7 +228,7 @@ var DateRangePicker = function DateRangePicker(_ref2) {
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateRangePickerDisplay["default"], {
         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
         },
@@ -236,9 +252,10 @@ var DateRangePicker = function DateRangePicker(_ref2) {
         className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex"]))),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar["default"], _objectSpread(_objectSpread(_objectSpread({
+            mode: "default",
             numberOfMonths: 2
           }, calendarProps), {}, {
-            selectedDays: selectedDays,
+            selected: selectedDays,
             modifiers: modifiers,
             onDayClick: handleDayClick,
             onDayMouseEnter: handleMouseEnter,

package/cjs/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/cjs/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/cjs/DatePicker/components/Calendar.js

@@ -11,11 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _dateFns = require("date-fns");
+var _reactDayPicker = require("react-day-picker");
 
-var _react = require("react");
-
-var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));
+var _utils = require("../utils");
 
 var _NavBar = _interopRequireDefault(require("./NavBar"));
 
@@ -25,33 +23,9 @@ 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) { (0, _defineProperty2["default"])(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; }
 
-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 = (0, _react.useMemo)(function () {
-    return props.editableYear && props.initialDate ? props.initialDate : new Date();
-  }, [props]);
-
-  var _useState = (0, _react.useState)(initialDate),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      month = _useState2[0],
-      setMonth = _useState2[1];
-
-  var years = (0, _react.useMemo)(function () {
-    if (!props.editableYear) return [];
-    if (props.years) return props.years;
-    return (0, _dateFns.eachYearOfInterval)({
-      start: (0, _dateFns.add)(initialDate, {
-        years: -5
-      }),
-      end: (0, _dateFns.add)(initialDate, {
-        years: 10
-      })
-    }).map(_dateFns.getYear);
-  }, [props, initialDate]);
-  var onYearChange = (0, _react.useCallback)(function (year) {
-    return setMonth((0, _dateFns.setYear)(month, year));
-  }, [month]);
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
         key = _ref2[0];
@@ -60,27 +34,36 @@ var Calendar = function Calendar(props) {
       !excludedDayPickerPropsList.includes(key)
     );
   }));
-  var yearsProps = (0, _react.useMemo)(function () {
-    return props.editableYear ? {
-      editableYear: true,
-      years: years,
-      onYearChange: onYearChange
-    } : {
-      editableYear: false
-    };
-  }, [onYearChange, props, years]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDayPicker["default"], _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 = (0, _utils.getDateFnsLocale)(props.locale.code);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDayPicker.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__*/(0, _jsxRuntime.jsx)(_NavBar["default"], _objectSpread(_objectSpread(_objectSpread({}, navBarProps), yearsProps), {}, {
-        locale: props.locale
-      }));
-    },
-    captionElement: function captionElement() {
-      return null;
+    components: {
+      Caption: function Caption(captionProps) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavBar["default"], _objectSpread(_objectSpread({}, captionProps), props));
+      }
     }
   }));
 };

package/cjs/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/cjs/DatePicker/components/NavBar.js

@@ -11,12 +11,16 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _dateFns = require("date-fns");
+
+var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth"));
+
 var _react = require("react");
 
+var _reactDayPicker = require("react-day-picker");
+
 var _reactFeather = require("react-feather");
 
 var _Button = require("../../Button");
@@ -25,50 +29,90 @@ var _satellitePrefixer = _interopRequireDefault(require("../../styles/helpers/sa
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
-var _excluded = ["onPreviousClick", "onNextClick", "showPreviousButton", "showNextButton", "month", "locale", "localeUtils"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var NavBar = function NavBar(props) {
+  var _useDayPicker = (0, _reactDayPicker.useDayPicker)(),
+      numberOfMonths = _useDayPicker.numberOfMonths,
+      onMonthChange = _useDayPicker.onMonthChange,
+      formatMonthCaption = _useDayPicker.formatters.formatMonthCaption,
+      dir = _useDayPicker.dir,
+      locale = _useDayPicker.locale;
+
+  var _useNavigation = (0, _reactDayPicker.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 = (0, _react.useMemo)(function () {
+    return props.editableYear && props.initialDate ? props.initialDate : new Date();
+  }, [props]);
+  var displayIndex = displayMonths.findIndex(function (month) {
+    return (0, _isSameMonth["default"])(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 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 = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var years = (0, _react.useMemo)(function () {
     if (!props.editableYear) return [];
-    var monthYear = month.getFullYear(); // year of the currently shown month
+    if (props.years) return props.years;
+    var interval = (0, _dateFns.eachYearOfInterval)({
+      start: (0, _dateFns.add)(initialDate, {
+        years: -5
+      }),
+      end: (0, _dateFns.add)(initialDate, {
+        years: 10
+      })
+    }).map(_dateFns.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, (0, _toConsumableArray2["default"])(props.years).concat([monthYear]));
-    var maxYear = Math.max.apply(Math, (0, _toConsumableArray2["default"])(props.years).concat([monthYear]));
+    if (interval.includes(monthYear)) return interval;
+    var minYear = Math.min.apply(Math, (0, _toConsumableArray2["default"])(interval).concat([monthYear]));
+    var maxYear = Math.max.apply(Math, (0, _toConsumableArray2["default"])(interval).concat([monthYear]));
     return Array.from({
       length: maxYear - minYear + 1
     }, function (_, i) {
       return i + minYear;
     });
-  }, [props, month]);
+  }, [props, initialDate]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full top-3 left-0 pt-5 px-5 pb-2 flex justify-between"]))),
+    className: (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full top-3 left-0 pt-1 px-2 pb-2 flex justify-between"]))),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      icon: _reactFeather.ChevronLeft,
-      title: locale.previousMonth,
-      onClick: function onClick() {
-        return onPreviousClick();
-      },
-      disabled: !showPreviousButton
+      icon: dir === "rtl" ? _reactFeather.ChevronRight : _reactFeather.ChevronLeft,
+      title: previousMonthLabel,
+      onClick: handlePreviousClick,
+      showTooltip: hidePrevious ? false : undefined,
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["", ""])), hidePrevious && "invisible")
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"])))),
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex items-center text-center"]))),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["font-medium text-md"]))),
-        children: [localeUtils.getMonths()[month.getMonth()], " ", props.editableYear ? /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
-          className: (0, _clsx["default"])("DayPicker-Year", (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["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: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["font-medium text-md"]))),
+        children: [formatMonthCaption(props.displayMonth, {
+          locale: locale
+        }), " ", props.editableYear ? /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+          className: (0, _clsx["default"])("rdp-year", (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["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((0, _dateFns.setYear)(props.displayMonth, parseInt(e.currentTarget.value)));
           },
           children: years.map(function (year) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
@@ -76,15 +120,14 @@ var NavBar = function NavBar(_ref) {
               children: year
             }, year);
           })
-        }) : month.getFullYear()]
+        }) : props.displayMonth.getFullYear()]
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-      icon: _reactFeather.ChevronRight,
-      title: locale.nextMonth,
-      onClick: function onClick() {
-        return onNextClick();
-      },
-      disabled: !showNextButton
+      icon: dir === "rtl" ? _reactFeather.ChevronLeft : _reactFeather.ChevronRight,
+      title: nextMonthLabel,
+      onClick: handleNextClick,
+      showTooltip: hideNext ? false : undefined,
+      className: (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), hideNext && "invisible")
     })]
   });
 };

package/cjs/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/cjs/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/cjs/DatePicker/utils.js

@@ -2,23 +2,51 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatDate = exports.DEFAULT_DATE_PICKER_LOCALE = void 0;
+exports.getDateFnsLocale = getDateFnsLocale;
 
 var _format = _interopRequireDefault(require("date-fns/format"));
 
+var Locales = _interopRequireWildcard(require("date-fns/locale"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var formatDate = function formatDate(date) {
   return (0, _format["default"])(date, "MMM do, yyyy");
 };
 
 exports.formatDate = formatDate;
 var DEFAULT_DATE_PICKER_LOCALE = {
+  code: "enUS",
+  rtl: false,
   apply: "Apply",
   cancel: "Cancel",
   openButton: "Enter a date...",
   previousMonth: "Previous month",
   nextMonth: "Next month"
 };
-exports.DEFAULT_DATE_PICKER_LOCALE = DEFAULT_DATE_PICKER_LOCALE;
+/**
+ * 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.
+ */
+
+exports.DEFAULT_DATE_PICKER_LOCALE = DEFAULT_DATE_PICKER_LOCALE;
+
+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/cjs/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/cjs/Dropdown/components/DropdownButtonItem.js

@@ -43,7 +43,7 @@ var DropdownButtonItem = function DropdownButtonItem(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", _objectSpread(_objectSpread({}, mergedProps), {}, {
     className: (0, _clsx["default"])(mergedProps.className, (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["w-full"])))),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-2 shrink-0 ", ""])), showDestructiveVariant ? "text-red-700" : "text-grey-500"),
       size: "1rem"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["w-full truncate ", ""])), showDestructiveVariant && "text-red-700"),

package/cjs/Input/Input.js

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

package/cjs/Link/Link.js

@@ -55,10 +55,10 @@ var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref,
     className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["typo-link inline-flex items-center"]))), className),
     children: [StartIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(StartIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["mr-1 shrink-0"]))),
       size: "1em"
     }), children, EndIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndIcon, {
-      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1"]))),
+      className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["ml-1 shrink-0"]))),
       size: "1em"
     })]
   }));

package/cjs/Modal/Modal.js

@@ -160,9 +160,11 @@ var Modal = function Modal(_ref) {
       }, modalAccessibilityProps), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card["default"], {
           ref: dialogRef,
+          as: "section",
           elevation: "500",
           className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["my-6 mx-auto"]))), SIZE_CLASSNAMES[size], className),
           fullBleed: true,
+          "aria-label": title || "Modal",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("header", {
             className: (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\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__*/(0, _jsxRuntime.jsx)("h2", {

package/cjs/Tooltip/TooltipWrapper.js

@@ -145,7 +145,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, [cancelTransition, hideDelay, internalShow, scheduleTransition]);
   (0, _react.useEffect)(function () {
     if (isControlled || !showTooltip) return;
-    var handleMouseMouve = (0, _lodash["default"])(function (evt) {
+    var handleMouseMove = (0, _lodash["default"])(function (evt) {
       var target = evt.target;
       var isWithinBounds = [targetEl, interactive ? popperEl : null].some(function (ref) {
         return Boolean(ref && (ref === target || ref.contains(target)));
@@ -159,10 +159,10 @@ 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]);
   /**