@shoplflow/base 0.31.16 → 0.31.18

package/dist/index.cjs

@@ -5068,7 +5068,7 @@ var getEachDateStyle = (props) => {
 };
 var getEachMonthAreaStyle = (props) => {
   const { inRange, isStart, isEnd, isReady, disabled } = props;
-  if (isStart && isReady) {
+  if (isStart && isReady && !isEnd) {
     return react$1.css`
       &::after {
         content: '';
@@ -5154,10 +5154,10 @@ var MonthDatepicker = ({
 }) => {
   const [currentDate, setCurrentDate] = React3.useState(initStartDate || /* @__PURE__ */ new Date());
   const [selectedStartMonthAndYear, setSelectedStartMonthAndYear] = React3.useState(
-    initStartDate ? [initStartDate.getMonth(), initStartDate.getFullYear()] : null
+    initStartDate ? [initStartDate.getMonth() + 1, initStartDate.getFullYear()] : null
   );
   const [selectedEndMonthAndYear, setSelectedEndMonthAndYear] = React3.useState(
-    initEndDate ? [initEndDate.getMonth(), initEndDate.getFullYear()] : null
+    initEndDate ? [initEndDate.getMonth() + 1, initEndDate.getFullYear()] : null
   );
   const Months = React3.useMemo(() => {
     return Array.from({ length: 12 }).map((_, index) => index + 1);
@@ -5357,6 +5357,7 @@ var EachYearArea = styled6__default.default.div`
   justify-content: center;
   align-items: center;
   position: relative;
+  user-select: none;
 
   ${(props) => getEachYearAreaStyle(props)}
 `;
@@ -5372,13 +5373,16 @@ var EachYearDate = styled6__default.default.div`
   position: absolute;
   z-index: 10;
 
+  user-select: none;
+
   ${(props) => getEachDateStyle2(props)}
 `;
 var AnnualDatepicker = ({
   startYear = 2e3,
   endYear = 2100,
   currentYear,
-  handleYearClick
+  handleYearClick,
+  disabledYears
 }) => {
   const [selectedYear, setSelectedYear] = React3.useState(currentYear || (/* @__PURE__ */ new Date()).getFullYear());
   const Years = Array.from({ length: endYear - startYear + 1 }).map((_, index) => startYear + index);
@@ -5387,14 +5391,20 @@ var AnnualDatepicker = ({
     handleYearClick(year);
   };
   return /* @__PURE__ */ jsxRuntime.jsx(YearContainer, { "data-shoplflow": "AnnualDatepicker", children: /* @__PURE__ */ jsxRuntime.jsx(YearArea, { children: Years.map((year) => {
+    const disabled = disabledYears == null ? void 0 : disabledYears.includes(year);
     return /* @__PURE__ */ jsxRuntime.jsx(
       EachYearArea,
       {
+        disabled,
         isSelected: selectedYear === year,
+        "aria-disabled": disabled,
         onClick: () => {
+          if (disabled) {
+            return;
+          }
           clickYear(year);
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx(EachYearDate, { isSelected: selectedYear === year, children: year })
+        children: /* @__PURE__ */ jsxRuntime.jsx(EachYearDate, { "aria-disabled": disabled, disabled, isSelected: selectedYear === year, children: year })
       },
       year
     );
@@ -5429,7 +5439,7 @@ var getEachDateStyle3 = (props) => {
 };
 var getEachWeekAreaStyle = (props) => {
   const { inRange, isStart, isEnd, isReady, disabled } = props;
-  if (isStart && isReady) {
+  if (isStart && isReady && !isEnd) {
     return react$1.css`
       &::after {
         content: '';