@algolia/satellite 1.0.0-beta.146 → 1.0.0-beta.148

package/esm/DatePicker/DateRangePicker/DateRangePicker.js

@@ -2,15 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 var _excluded = ["id", "range", "displayOnlyRanges", "calendarProps", "initialState", "stateReducer", "onAction", "validate", "renderTarget", "renderLeftFooter", "renderRightPanel", "buttonSize", "modalPlacement", "locale"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 { useMemo, useReducer, useState } from "react";
 import { useLocale } from "../../Satellite";
 import stl from "../../styles/helpers/satellitePrefixer";
@@ -26,95 +21,83 @@ import { isCompleteTimeRange, isEmptyTimeRange } from "./dateRangePickerTimeRang
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-
 var defaultValidator = function defaultValidator(_ref) {
   var candidateRange = _ref.candidateRange;
   return isCompleteTimeRange(candidateRange) ? null : [new Error("Invalid time range")];
 };
-
 var DEFAULT_DATE_RANGE_PICKER_LOCALE = _objectSpread(_objectSpread({}, DEFAULT_DATE_PICKER_LOCALE), {}, {
   openButton: "Enter a date period..."
 });
-
 export var DateRangePicker = function DateRangePicker(_ref2) {
   var _validate, _displayedRange$start, _initialRange$start;
-
   var id = _ref2.id,
-      initialRange = _ref2.range,
-      displayOnlyRanges = _ref2.displayOnlyRanges,
-      _ref2$calendarProps = _ref2.calendarProps,
-      calendarProps = _ref2$calendarProps === void 0 ? {} : _ref2$calendarProps,
-      _ref2$initialState = _ref2.initialState,
-      initialState = _ref2$initialState === void 0 ? {} : _ref2$initialState,
-      _ref2$stateReducer = _ref2.stateReducer,
-      stateReducer = _ref2$stateReducer === void 0 ? dateRangePickerReducer : _ref2$stateReducer,
-      onAction = _ref2.onAction,
-      _ref2$validate = _ref2.validate,
-      validate = _ref2$validate === void 0 ? defaultValidator : _ref2$validate,
-      renderTarget = _ref2.renderTarget,
-      renderLeftFooter = _ref2.renderLeftFooter,
-      renderRightPanel = _ref2.renderRightPanel,
-      buttonSize = _ref2.buttonSize,
-      modalPlacement = _ref2.modalPlacement,
-      propsLocale = _ref2.locale,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+    initialRange = _ref2.range,
+    displayOnlyRanges = _ref2.displayOnlyRanges,
+    _ref2$calendarProps = _ref2.calendarProps,
+    calendarProps = _ref2$calendarProps === void 0 ? {} : _ref2$calendarProps,
+    _ref2$initialState = _ref2.initialState,
+    initialState = _ref2$initialState === void 0 ? {} : _ref2$initialState,
+    _ref2$stateReducer = _ref2.stateReducer,
+    stateReducer = _ref2$stateReducer === void 0 ? dateRangePickerReducer : _ref2$stateReducer,
+    onAction = _ref2.onAction,
+    _ref2$validate = _ref2.validate,
+    validate = _ref2$validate === void 0 ? defaultValidator : _ref2$validate,
+    renderTarget = _ref2.renderTarget,
+    renderLeftFooter = _ref2.renderLeftFooter,
+    renderRightPanel = _ref2.renderRightPanel,
+    buttonSize = _ref2.buttonSize,
+    modalPlacement = _ref2.modalPlacement,
+    propsLocale = _ref2.locale,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var contextLocale = useLocale("datePicker");
-
   var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_DATE_RANGE_PICKER_LOCALE), contextLocale), propsLocale);
-
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      targetElement = _useState2[0],
-      setTargetElement = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
   var _useReducer = useReducer(function (state, action) {
-    return stateReducer(state, action, dateRangePickerReducer);
-  }, initialState, initDateRangePickerReducer),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      baseDispatch = _useReducer2[1]; // Computed properties
-
+      return stateReducer(state, action, dateRangePickerReducer);
+    }, initialState, initDateRangePickerReducer),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    baseDispatch = _useReducer2[1];
 
+  // Computed properties
   var isValid = !((_validate = validate(state)) !== null && _validate !== void 0 && _validate.length);
   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
+  }, [initialRange, state.candidateRange]);
 
+  // Event handlers
   var dispatch = function dispatch(action) {
     onAction === null || onAction === void 0 ? void 0 : onAction(action, state);
     baseDispatch(action);
   };
-
   var handleOpen = function handleOpen() {
     dispatch({
       type: DateRangePickerActionTypes.show,
       payload: true
     });
   };
-
   var handleClose = function handleClose() {
     dispatch({
       type: DateRangePickerActionTypes.show,
       payload: false
     });
   };
-
   var handleCancel = function handleCancel() {
     dispatch({
       type: DateRangePickerActionTypes.cancel
     });
   };
-
   var handleApply = function handleApply() {
     dispatch({
       type: DateRangePickerActionTypes.apply
     });
   };
-
   var handleMouseEnter = function handleMouseEnter(payload, _a, event) {
     dispatch({
       type: DateRangePickerActionTypes.mouseDayEnter,
@@ -124,7 +107,6 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       }
     });
   };
-
   var handleMouseLeave = function handleMouseLeave(_a, _b, event) {
     dispatch({
       type: DateRangePickerActionTypes.mouseDayLeave,
@@ -133,7 +115,6 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       }
     });
   };
-
   var handleDayClick = function handleDayClick(payload, modifiers) {
     if (!modifiers.disabled) {
       dispatch({
@@ -142,7 +123,6 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       });
     }
   };
-
   var selectedDays = displayedRange.start && displayedRange.end ? {
     from: displayedRange.start,
     to: displayedRange.end
@@ -151,19 +131,15 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
     to: state.hovered
   } : (_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;
@@ -184,10 +160,8 @@ export var DateRangePicker = function DateRangePicker(_ref2) {
       return range.end;
     });
   }
-
   var yearProps = useMemo(function () {
     var _ref3, _displayedRange$start2;
-
     return props.editableYear ? {
       editableYear: true,
       initialDate: (_ref3 = (_displayedRange$start2 = displayedRange.start) !== null && _displayedRange$start2 !== void 0 ? _displayedRange$start2 : displayedRange.end) !== null && _ref3 !== void 0 ? _ref3 : undefined,

package/esm/DatePicker/DateRangePicker/DateRangePickerDisplay.js

@@ -1,7 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import stl from "../../styles/helpers/satellitePrefixer";
 import Display from "../components/Display";
 import { formatDate } from "../utils";
@@ -9,13 +7,12 @@ import { isCompleteTimeRange } from "./dateRangePickerTimeRange";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
   var id = _ref.id,
-      onClick = _ref.onClick,
-      range = _ref.range,
-      buttonSize = _ref.buttonSize,
-      locale = _ref.locale;
+    onClick = _ref.onClick,
+    range = _ref.range,
+    buttonSize = _ref.buttonSize,
+    locale = _ref.locale;
   return /*#__PURE__*/_jsx(Display, {
     id: id,
     onClick: onClick,
@@ -33,5 +30,4 @@ var DateRangePickerDisplay = function DateRangePickerDisplay(_ref) {
     }) : locale.openButton
   });
 };
-
 export default DateRangePickerDisplay;

package/esm/DatePicker/DateRangePicker/dateRangePickerReducer.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 endOfDay from "date-fns/endOfDay";
 import isAfter from "date-fns/isAfter";
 import isBefore from "date-fns/isBefore";
@@ -11,7 +8,6 @@ import isSameDay from "date-fns/isSameDay";
 import startOfDay from "date-fns/startOfDay";
 import { isPartialTimeRange } from "./dateRangePickerTimeRange";
 export var DateRangePickerActionTypes;
-
 (function (DateRangePickerActionTypes) {
   DateRangePickerActionTypes["show"] = "show";
   DateRangePickerActionTypes["dateSelect"] = "date select";
@@ -22,7 +18,6 @@ export var DateRangePickerActionTypes;
   DateRangePickerActionTypes["cancel"] = "cancel";
   DateRangePickerActionTypes["reset"] = "reset";
 })(DateRangePickerActionTypes || (DateRangePickerActionTypes = {}));
-
 var initialState = {
   show: false,
   candidateRange: {
@@ -33,11 +28,9 @@ var initialState = {
 };
 export var initDateRangePickerReducer = function initDateRangePickerReducer(state) {
   var _state$candidateRange;
-
   var _ref = (_state$candidateRange = state.candidateRange) !== null && _state$candidateRange !== void 0 ? _state$candidateRange : initialState.candidateRange,
-      start = _ref.start,
-      end = _ref.end;
-
+    start = _ref.start,
+    end = _ref.end;
   return _objectSpread(_objectSpread(_objectSpread({}, initialState), state), {}, {
     candidateRange: {
       start: start && startOfDay(start),
@@ -51,7 +44,6 @@ export var dateRangePickerReducer = function dateRangePickerReducer(state, actio
       return _objectSpread(_objectSpread({}, state), {}, {
         show: action.payload
       });
-
     case DateRangePickerActionTypes.dateSelect:
       {
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -64,25 +56,21 @@ export var dateRangePickerReducer = function dateRangePickerReducer(state, actio
           }
         });
       }
-
     case DateRangePickerActionTypes.rangeSelect:
       {
         return _objectSpread(_objectSpread({}, state), {}, {
           candidateRange: action.payload
         });
       }
-
     case DateRangePickerActionTypes.mouseDayEnter:
       var shouldStoreHover = state.candidateRange.start && isBefore(state.candidateRange.start, action.payload);
       return _objectSpread(_objectSpread({}, state), {}, {
         hovered: shouldStoreHover ? action.payload : null
       });
-
     case DateRangePickerActionTypes.mouseDayLeave:
       return _objectSpread(_objectSpread({}, state), {}, {
         hovered: null
       });
-
     case DateRangePickerActionTypes.apply:
     case DateRangePickerActionTypes.cancel:
       return _objectSpread(_objectSpread({}, state), {}, {
@@ -92,12 +80,10 @@ export var dateRangePickerReducer = function dateRangePickerReducer(state, actio
         },
         show: false
       });
-
     case DateRangePickerActionTypes.reset:
       return _objectSpread(_objectSpread({}, initialState), {}, {
         show: state.show
       });
-
     default:
       return state;
   }

package/esm/DatePicker/components/Calendar.js

@@ -1,29 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 { DayPicker } from "react-day-picker";
 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", "showWeekNumber", "showWeekDays", "weekdayElement", "weekdaysLong", "weekdaysShort"];
-
 var Calendar = function Calendar(props) {
   var curatedProps = Object.fromEntries(Object.entries(props).filter(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 1),
-        key = _ref2[0];
-
-    return (// @ts-expect-error
+      key = _ref2[0];
+    return (
+      // @ts-expect-error
       !excludedDayPickerPropsList.includes(key)
     );
   }));
+
   /**
    * 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",
@@ -32,8 +28,8 @@ var Calendar = function Calendar(props) {
     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`,
-
   };
+
   return /*#__PURE__*/_jsx(DayPicker, _objectSpread(_objectSpread({
     mode: props.mode
   }, curatedProps), {}, {
@@ -49,5 +45,4 @@ var Calendar = function Calendar(props) {
     }
   }));
 };
-
 export default Calendar;

package/esm/DatePicker/components/Display.js

@@ -1,12 +1,11 @@
 import { Calendar } from "react-feather";
 import Button from "../../Button";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var Display = function Display(_ref) {
   var id = _ref.id,
-      size = _ref.size,
-      onClick = _ref.onClick,
-      children = _ref.children;
+    size = _ref.size,
+    onClick = _ref.onClick,
+    children = _ref.children;
   return /*#__PURE__*/_jsx(Button, {
     id: id,
     size: size,
@@ -15,5 +14,4 @@ var Display = function Display(_ref) {
     children: children
   });
 };
-
 export default Display;

package/esm/DatePicker/components/Footer.js

@@ -1,10 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var Footer = function Footer(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_jsx("div", {
@@ -12,5 +9,4 @@ var Footer = function Footer(_ref) {
     children: children
   });
 };
-
 export default Footer;

package/esm/DatePicker/components/FooterActions.js

@@ -1,17 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import { Button } 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 FooterActions = function FooterActions(_ref) {
   var onCancel = _ref.onCancel,
-      onApply = _ref.onApply,
-      disableApply = _ref.disableApply,
-      locale = _ref.locale;
+    onApply = _ref.onApply,
+    disableApply = _ref.disableApply,
+    locale = _ref.locale;
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["ml-auto flex justify-end"]))),
     children: [/*#__PURE__*/_jsx(Button, {
@@ -26,5 +23,4 @@ var FooterActions = function FooterActions(_ref) {
     })]
   });
 };
-
 export default FooterActions;

package/esm/DatePicker/components/Modal.js

@@ -2,13 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 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 cx from "clsx";
 import { useState } from "react";
 import { usePopper } from "react-popper";
@@ -22,36 +18,31 @@ export var DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS = [{
     offset: [0, 16]
   }
 }];
-
 var Modal = function Modal(_ref) {
   var show = _ref.show,
-      targetElement = _ref.targetElement,
-      _onClickAway = _ref.onClickAway,
-      children = _ref.children,
-      _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
-      _ref$modifiers = _ref.modifiers,
-      modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
-      className = _ref.className;
+    targetElement = _ref.targetElement,
+    _onClickAway = _ref.onClickAway,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$modifiers = _ref.modifiers,
+    modifiers = _ref$modifiers === void 0 ? [] : _ref$modifiers,
+    className = _ref.className;
   var createPortal = useCreatePortal();
-
   var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      datePickerElement = _useState2[0],
-      setDatePickerElement = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    datePickerElement = _useState2[0],
+    setDatePickerElement = _useState2[1];
   var _usePopper = usePopper(targetElement, datePickerElement, {
-    modifiers: [].concat(DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS, _toConsumableArray(modifiers)),
-    placement: placement,
-    strategy: "fixed"
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
+      modifiers: [].concat(DEFAULT_DATE_PICKER_MODAL_POPPER_MODIFIERS, _toConsumableArray(modifiers)),
+      placement: placement,
+      strategy: "fixed"
+    }),
+    styles = _usePopper.styles,
+    attributes = _usePopper.attributes;
   if (!show) {
     return null;
   }
-
   return createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
     element: datePickerElement,
     onClickAway: function onClickAway(evt) {
@@ -66,5 +57,4 @@ var Modal = function Modal(_ref) {
     }))
   }));
 };
-
 export default Modal;

package/esm/DatePicker/components/NavBar.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import cx from "clsx";
 import { add, eachYearOfInterval, getYear, setYear } from "date-fns";
 import isSameMonth from "date-fns/isSameMonth";
@@ -11,27 +9,25 @@ import { useDayPicker, useNavigation } from "react-day-picker";
 import { ChevronLeft, ChevronRight } from "react-feather";
 import { IconButton } from "../../Button";
 import stl from "../../styles/helpers/satellitePrefixer";
+import { uniqueId } from "../../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var NavBar = function NavBar(props) {
   var _useDayPicker = useDayPicker(),
-      numberOfMonths = _useDayPicker.numberOfMonths,
-      onMonthChange = _useDayPicker.onMonthChange,
-      formatMonthCaption = _useDayPicker.formatters.formatMonthCaption,
-      dir = _useDayPicker.dir,
-      locale = _useDayPicker.locale;
-
+    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;
-
+    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;
+    nextMonthLabel = _props$locale.nextMonth,
+    previousMonthLabel = _props$locale.previousMonth;
   var initialDate = useMemo(function () {
     return props.editableYear && props.initialDate ? props.initialDate : new Date();
   }, [props]);
@@ -40,19 +36,16 @@ var NavBar = function NavBar(props) {
   });
   var showNext = numberOfMonths === 1 || displayIndex === displayMonths.length - 1;
   var showPrevious = numberOfMonths === 1 || displayIndex === 0;
-
   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 [];
     if (props.years) return props.years;
@@ -65,7 +58,6 @@ var NavBar = function NavBar(props) {
       })
     }).map(getYear);
     var monthYear = props.displayMonth.getFullYear(); // year of the currently shown month
-
     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]));
@@ -75,6 +67,9 @@ var NavBar = function NavBar(props) {
       return i + minYear;
     });
   }, [props, initialDate]);
+  var yearSelectId = useMemo(function () {
+    return uniqueId("year-select");
+  }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: stl(_templateObject || (_templateObject = _taggedTemplateLiteral(["w-full top-3 left-0 pt-1 px-2 pb-2 flex justify-between"]))),
     children: [showPrevious ? /*#__PURE__*/_jsx(IconButton, {
@@ -89,18 +84,25 @@ var NavBar = function NavBar(props) {
         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 goToDate(setYear(props.displayMonth, parseInt(e.currentTarget.value)));
-          },
-          children: years.map(function (year) {
-            return /*#__PURE__*/_jsx("option", {
-              value: year,
-              children: year
-            }, year);
-          })
+        }), " ", props.editableYear ? /*#__PURE__*/_jsxs("label", {
+          htmlFor: yearSelectId,
+          children: [/*#__PURE__*/_jsx("span", {
+            className: stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["sr-only"]))),
+            children: "Select a year"
+          }), /*#__PURE__*/_jsx("select", {
+            id: yearSelectId,
+            className: cx("rdp-year", stl(_templateObject6 || (_templateObject6 = _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 goToDate(setYear(props.displayMonth, parseInt(e.currentTarget.value)));
+            },
+            children: years.map(function (year) {
+              return /*#__PURE__*/_jsx("option", {
+                value: year,
+                children: year
+              }, year);
+            })
+          })]
         }) : props.displayMonth.getFullYear()]
       })
     }), showNext ? /*#__PURE__*/_jsx(IconButton, {
@@ -108,9 +110,8 @@ var NavBar = function NavBar(props) {
       title: nextMonthLabel,
       onClick: handleNextClick
     }) : /*#__PURE__*/_jsx("span", {
-      className: stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["w-8"])))
+      className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["w-8"])))
     })]
   });
 };
-
 export default NavBar;

package/esm/DatePicker/components/SidePanel.js

@@ -1,10 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 import stl from "../../styles/helpers/satellitePrefixer";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var SidePanel = function SidePanel(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_jsx("div", {
@@ -15,5 +12,4 @@ var SidePanel = function SidePanel(_ref) {
     })
   });
 };
-
 export default SidePanel;