@neko-os/ui 0.5.0 → 0.5.2

package/dist/components/inputs/datePicker/WeekPicker.js

@@ -25,7 +25,9 @@ function fromMonthValue(v) {
   startOf('month');
 }
 
-function MonthWeeks(_ref) {var _this = this;var month = _ref.month,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var MonthWeeks = React.memo(function MonthWeeks(_ref) {var _this = this;var monthValue = _ref.monthValue,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+  var month = fromMonthValue(monthValue);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
   var _useCalendarDays = useCalendarDays(month),cells = _useCalendarDays.cells;
   var weeks = splitEvery(7, cells);
 
@@ -67,9 +69,9 @@ function MonthWeeks(_ref) {var _this = this;var month = _ref.month,selectedValue
       )] }
     ));
 
-}
+});
 
-export function WeekPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function WeekPicker(_ref2) {var _value2,_value3,_value4,_value5,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return dayjs(value || undefined).startOf('month');}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentMonth = _React$useState4[0],setCurrentMonth = _React$useState4[1];
   value = value === undefined ? localValue : value;
@@ -79,18 +81,22 @@ export function WeekPicker(_ref2) {var _value2,_value3,_value4,_this2 = this;var
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentMonth(value.startOf('month'));
   }, [(_value2 = value) == null ? void 0 : _value2.day == null ? void 0 : _value2.day(), (_value3 = value) == null ? void 0 : _value3.month == null ? void 0 : _value3.month(), (_value4 = value) == null ? void 0 : _value4.year == null ? void 0 : _value4.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('week');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('week');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var monthValue = toMonthValue(currentMonth);
   var minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined;
   var maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined;
+  var selectedKey = (_value5 = value) == null ? void 0 : _value5.valueOf == null ? void 0 : _value5.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(MonthWeeks, { month: fromMonthValue(v), selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(MonthWeeks, { monthValue: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

package/dist/components/inputs/datePicker/YearPicker.js

@@ -21,15 +21,16 @@ function decadeFromIndex(i) {
   return dayjs().year(i * 10).startOf('year');
 }
 
-function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,selectedValue = _ref.selectedValue,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
+var DecadeGrid = React.memo(function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,selectedKey = _ref.selectedKey,onSelect = _ref.onSelect,min = _ref.min,max = _ref.max,onCheckDisabled = _ref.onCheckDisabled;
   var decadeStart = decadeFromIndex(decadeIndex);
+  var selectedValue = selectedKey ? dayjs(selectedKey) : null;
   var years = range(decadeStart.year(), decadeStart.year() + 10);
 
   return (
     _jsx(Grid, { colSpan: 12, gap: "xs", children:
       years.map(function (year) {
         var dateVal = decadeStart.year(year);
-        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week');
+        var isActive = !!selectedValue && dateVal.isSame(selectedValue, 'year');
         var disabled = isDateDisabled(dateVal, { min: min, max: max, onCheckDisabled: onCheckDisabled });
 
         return (
@@ -51,9 +52,9 @@ function DecadeGrid(_ref) {var _this = this;var decadeIndex = _ref.decadeIndex,s
       }) }
     ));
 
-}
+});
 
-export function YearPicker(_ref2) {var _value2,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
+export function YearPicker(_ref2) {var _value2,_value3,_this2 = this;var value = _ref2.value,onChange = _ref2.onChange,min = _ref2.min,max = _ref2.max,onCheckDisabled = _ref2.onCheckDisabled,allowClear = _ref2.allowClear,props = _objectWithoutProperties(_ref2, _excluded);
   var _React$useState = React.useState(value),_React$useState2 = _slicedToArray(_React$useState, 2),localValue = _React$useState2[0],setLocalValue = _React$useState2[1];
   var _React$useState3 = React.useState(function () {return getDecadeIndex(value);}),_React$useState4 = _slicedToArray(_React$useState3, 2),currentDecade = _React$useState4[0],setCurrentDecade = _React$useState4[1];
 
@@ -64,17 +65,21 @@ export function YearPicker(_ref2) {var _value2,_this2 = this;var value = _ref2.v
     if ((_value = value) != null && _value.isValid != null && _value.isValid()) setCurrentDecade(getDecadeIndex(value));
   }, [(_value2 = value) == null ? void 0 : _value2.year == null ? void 0 : _value2.year()]);
 
-  var handleChange = function handleChange(v) {
-    var newValue = v.startOf('year');
-    setLocalValue(newValue);
-    onChange == null ? void 0 : onChange(newValue);
-  };
+  var handleChange = React.useCallback(
+    function (v) {
+      var newValue = v.startOf('year');
+      setLocalValue(newValue);
+      onChange == null ? void 0 : onChange(newValue);
+    },
+    [onChange]
+  );
 
   var minDecade = min ? getDecadeIndex(min) : undefined;
   var maxDecade = max ? getDecadeIndex(max) : undefined;
+  var selectedKey = (_value3 = value) == null ? void 0 : _value3.valueOf == null ? void 0 : _value3.valueOf();
 
   var renderSlide = function renderSlide(v) {return (
-      _jsx(DecadeGrid, { decadeIndex: v, selectedValue: value, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
+      _jsx(DecadeGrid, { decadeIndex: v, selectedKey: selectedKey, onSelect: handleChange, min: min, max: max, onCheckDisabled: onCheckDisabled }));};
 
 
   return (

package/dist/helpers/index.js

@@ -2,4 +2,6 @@ export * from "./debounce";
 export * from "./string";
 export * from "./random";
 export * from "./storage";
+export * from "./weekStart";
+export * from "./weekStartSetup";
 export * from "./../abstractions/helpers/useSafeAreaInsets";

package/dist/helpers/weekStart.js

@@ -0,0 +1,25 @@
+import dayjs from 'dayjs';
+import updateLocale from 'dayjs/esm/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
+
+var _override = null;
+
+export function getFirstDayOfWeek() {
+  if (_override !== null) return _override;
+  return dayjs().$locale().weekStart || 0;
+}
+
+export function setFirstDayOfWeek(day) {
+  _override = day;
+  dayjs.updateLocale(dayjs().$locale().name || 'en', { weekStart: day });
+}
+
+export function getOrderedWeekdays() {
+  var first = getFirstDayOfWeek();
+  return Array.from({ length: 7 }, function (_, i) {return (first + i) % 7;});
+}
+
+export function getWeekdayOffset(dayIndex) {
+  return (dayIndex - getFirstDayOfWeek() + 7) % 7;
+}

package/dist/helpers/weekStartSetup.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from "./weekStart";
+
+export function initFirstDayOfWeek() {
+  try {var _locale$weekInfo;
+    var locale = new Intl.Locale(navigator.language);
+    var weekInfo = (_locale$weekInfo = locale.weekInfo) != null ? _locale$weekInfo : locale.getWeekInfo == null ? void 0 : locale.getWeekInfo();
+    if ((weekInfo == null ? void 0 : weekInfo.firstDay) != null) {
+      setFirstDayOfWeek(weekInfo.firstDay === 7 ? 0 : weekInfo.firstDay);
+    }
+  } catch (_unused) {}
+}

package/dist/helpers/weekStartSetup.native.js

@@ -0,0 +1,11 @@
+import { setFirstDayOfWeek } from "./weekStart";
+
+export function initFirstDayOfWeek() {
+  try {
+    var Localization = require('expo-localization');
+    var cal = Localization.getCalendars()[0];
+    if ((cal == null ? void 0 : cal.firstWeekday) != null) {
+      setFirstDayOfWeek((cal.firstWeekday - 1) % 7);
+    }
+  } catch (_unused) {}
+}

package/dist/index.js

@@ -4,5 +4,6 @@ export * from "./theme";
 export * from "./responsive";
 export * from "./i18n";
 export * from "./NekoUI";
+export * from "./abstractions";
 
 export var version = 41;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neko-os/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "author": "Christian Storch <ccstorch@gmail.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/NekoUI.js

@@ -1,3 +1,4 @@
+import { initFirstDayOfWeek } from './helpers/weekStartSetup'
 import { DynamicStyleTag } from './DynamicStyleTag'
 import { I18nProvider } from './i18n'
 import { ModalsHandler } from './components/modals/modal/handler/ModalsHandler'
@@ -9,6 +10,8 @@ import { ThemeHandler } from './theme/ThemeHandler'
 import { ThemePickerDrawer } from './components/theme'
 import { useThemeHandler } from './theme'
 
+initFirstDayOfWeek()
+
 export function NekoUI({ children, i18n, ...props }) {
   return (
     <ThemeHandler {...props}>

package/src/abstractions/index.js

@@ -0,0 +1 @@
+export * from './Platform'

package/src/components/actions/Dropdown.js

@@ -37,6 +37,7 @@ export function Dropdown({ items, ...rootProps }) {
     placement,
     gap,
     useBottomDrawer,
+    snapPoints,
     ...props
   } = formattedProps
 
@@ -52,6 +53,7 @@ export function Dropdown({ items, ...rootProps }) {
         // In case its web use the Drawer component
         contentProps={{ padding: 0 }}
         useBottomDrawer={useBottomDrawer}
+        snapPoints={snapPoints}
         {...popoverProps}
         renderContent={({ onClose }) => {
           const handleChange = (...params) => {

package/src/components/calendar/PeriodNavBar.js

@@ -0,0 +1,176 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear'
+
+import { InfiniteCarousel } from '../carousel/InfiniteCarousel'
+import { Link } from '../actions/Link'
+import { Text } from '../text/Text'
+import { View } from '../structure/View'
+import { isDateDisabled } from './_helpers/dateDisabled'
+
+dayjs.extend(quarterOfYear)
+
+function getWeekEpoch() {
+  return dayjs('2000-01-01').startOf('week')
+}
+
+const TYPES = {
+  day: {
+    count: 7,
+    unit: 'day',
+    toPageValue(date) {
+      return date.startOf('week').diff(getWeekEpoch(), 'week')
+    },
+    getItems(pageValue) {
+      const weekStart = getWeekEpoch().add(pageValue, 'week')
+      return Array.from({ length: 7 }, (_, i) => {
+        const d = weekStart.add(i, 'day')
+        return { key: d.valueOf(), date: d, label: d.format('ddd'), sublabel: String(d.date()) }
+      })
+    },
+  },
+  week: {
+    count: 7,
+    unit: 'week',
+    toPageValue(date) {
+      const weekIndex = date.startOf('week').diff(getWeekEpoch(), 'week')
+      return Math.floor(weekIndex / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const weekIndex = pageValue * 7 + i
+        const d = getWeekEpoch().add(weekIndex, 'week')
+        const end = d.add(6, 'day')
+        return { key: d.valueOf(), date: d, label: `${d.date()}-${end.date()}`, sublabel: d.format('MMM') }
+      })
+    },
+  },
+  month: {
+    count: 7,
+    unit: 'month',
+    toPageValue(date) {
+      const absMonth = date.year() * 12 + date.month()
+      return Math.floor(absMonth / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const absMonth = pageValue * 7 + i
+        const year = Math.floor(absMonth / 12)
+        const month = absMonth % 12
+        const d = dayjs().year(year).month(month).startOf('month')
+        return { key: d.valueOf(), date: d, label: d.format('MMM'), sublabel: d.format("'YY") }
+      })
+    },
+  },
+  quarter: {
+    count: 4,
+    unit: 'quarter',
+    toPageValue(date) {
+      return date.year()
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 4 }, (_, i) => {
+        const d = dayjs().year(pageValue).month(i * 3).startOf('month')
+        return { key: d.valueOf(), date: d, label: `Q${i + 1}`, sublabel: String(pageValue) }
+      })
+    },
+  },
+  year: {
+    count: 7,
+    unit: 'year',
+    toPageValue(date) {
+      return Math.floor(date.year() / 7)
+    },
+    getItems(pageValue) {
+      return Array.from({ length: 7 }, (_, i) => {
+        const year = pageValue * 7 + i
+        const d = dayjs().year(year).startOf('year')
+        return { key: d.valueOf(), date: d, label: String(year), sublabel: null }
+      })
+    },
+  },
+}
+
+const PeriodSlide = React.memo(function PeriodSlide({ items, value, unit, onChange, min, max, onCheckDisabled }) {
+  return (
+    <View row center gap="xs">
+      {items.map((item) => {
+        const isActive = !!value && dayjs(value).isSame(item.date, unit)
+        const disabled = isDateDisabled(item.date, { min, max, onCheckDisabled })
+
+        return (
+          <Link
+            key={item.key}
+            flex
+            center
+            br="md"
+            paddingV="xs"
+            onPress={() => onChange(item.date)}
+            bg={isActive && 'primary'}
+            disabled={disabled}
+          >
+            <Text sm center strong={isActive} text2={!isActive}>
+              {item.label}
+            </Text>
+            {item.sublabel && (
+              <Text xxs center text4={!isActive} strong={isActive}>
+                {item.sublabel}
+              </Text>
+            )}
+          </Link>
+        )
+      })}
+    </View>
+  )
+})
+
+export function PeriodNavBar({ type = 'day', value, onChange, min, max, onCheckDisabled, ...props }) {
+  const config = TYPES[type]
+  const [localValue, setLocalValue] = React.useState(value)
+  const resolvedValue = value === undefined ? localValue : value
+
+  const [currentPage, setCurrentPage] = React.useState(() => {
+    const date = resolvedValue ? dayjs(resolvedValue) : dayjs()
+    return config.toPageValue(date)
+  })
+
+  React.useEffect(() => {
+    const date = resolvedValue ? dayjs(resolvedValue) : dayjs()
+    setCurrentPage(TYPES[type].toPageValue(date))
+  }, [resolvedValue, type])
+
+  const handleSelect = React.useCallback(
+    (date) => {
+      setLocalValue(date)
+      onChange?.(date)
+    },
+    [onChange]
+  )
+
+  const minPage = min ? config.toPageValue(dayjs(min)) : undefined
+  const maxPage = max ? config.toPageValue(dayjs(max)) : undefined
+
+  const renderSlide = (pageValue) => (
+    <PeriodSlide
+      items={config.getItems(pageValue)}
+      value={resolvedValue}
+      unit={config.unit}
+      onChange={handleSelect}
+      min={min}
+      max={max}
+      onCheckDisabled={onCheckDisabled}
+    />
+  )
+
+  return (
+    <View className="neko-period-nav-bar" {...props}>
+      <InfiniteCarousel
+        value={currentPage}
+        onChange={setCurrentPage}
+        renderSlide={renderSlide}
+        min={minPage}
+        max={maxPage}
+      />
+    </View>
+  )
+}

package/src/components/calendar/WeekDaysBar.js

@@ -1,12 +1,16 @@
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
+import { getFirstDayOfWeek } from '../../helpers/weekStart'
 
-const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+const ALL_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
 export function WeekDaysBar() {
+  const firstDay = getFirstDayOfWeek()
+  const labels = [...ALL_DAYS.slice(firstDay), ...ALL_DAYS.slice(0, firstDay)]
+
   return (
     <View className="neko-week-days-bar" row center gap="sm">
-      {weekdayLabels.map((w) => (
+      {labels.map((w) => (
         <View key={w} flex height={30} center>
           <Text center sm text4>
             {w}

package/src/components/calendar/_helpers/calendarDays.js

@@ -1,13 +1,17 @@
 import dayjs from 'dayjs'
 import React from 'react'
 
+import { getFirstDayOfWeek } from '../../../helpers/weekStart'
+
 export function useCalendarDays(currentMonth) {
   return React.useMemo(() => {
     if (!currentMonth?.isValid?.()) currentMonth = dayjs()
     const startWeekday = currentMonth.startOf('month').day()
+    const firstDay = getFirstDayOfWeek()
+    const offset = (startWeekday - firstDay + 7) % 7
     const daysInMonth = currentMonth.daysInMonth()
 
-    const blanks = Array.from({ length: startWeekday }, () => null)
+    const blanks = Array.from({ length: offset }, () => null)
     const days = Array.from({ length: daysInMonth }, (_, i) => i + 1)
     const cells = [...blanks, ...days]
 

package/src/components/calendar/index.js

@@ -1 +1 @@
-// export * from './DayPicker'
+export * from './PeriodNavBar'

package/src/components/carousel/CarouselSlider.native.js

@@ -27,12 +27,20 @@ export function CarouselSlider() {
   const translateX = useSharedValue(0)
   const gestureStartX = useSharedValue(0)
   const prevItemsRef = React.useRef(items)
+  const gestureAnimatingRef = React.useRef(false)
+
+  const setGestureAnimating = React.useCallback((v) => {
+    gestureAnimatingRef.current = v
+  }, [])
 
   React.useEffect(() => {
     if (slideWidth > 0) {
       if (prevItemsRef.current !== items) {
         prevItemsRef.current = items
         translateX.value = -activeIndex * slideWidth
+      } else if (gestureAnimatingRef.current) {
+        // Gesture onEnd already animating — skip to avoid double animation
+        gestureAnimatingRef.current = false
       } else {
         translateX.value = withTiming(-activeIndex * slideWidth, { duration: 300 }, (finished) => {
           if (finished && afterChange) runOnJS(afterChange)(items?.[activeIndex]?.key, activeIndex)
@@ -87,7 +95,10 @@ export function CarouselSlider() {
       }
 
       const clamped = clampIndex(targetIndex, itemsCount, loop)
-      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 })
+      translateX.value = withTiming(-clamped * slideWidth, { duration: 300 }, (finished) => {
+        if (finished && afterChange) runOnJS(afterChange)(items?.[clamped]?.key, clamped)
+      })
+      runOnJS(setGestureAnimating)(true)
       runOnJS(goTo)(targetIndex)
       runOnJS(resumeAutoplay)()
     })

package/src/components/filter/DateFilter.js

@@ -33,7 +33,7 @@ function formatValue(value, type) {
     case 'month':
       return [date.startOf('month'), date.endOf('month')]
     case 'week':
-      return [date.startOf('isoWeek'), date.endOf('isoWeek')]
+      return [date.startOf('week'), date.endOf('week')]
     default:
       return [date.startOf('day'), date.endOf('day')]
   }

package/src/components/inputs/Select.js

@@ -2,6 +2,7 @@ import { dissoc } from 'ramda'
 import React from 'react'
 
 import { Icon, IconLabel } from '../presentation'
+import { KeyboardDismissButton } from '../keyboard'
 import { Link } from '../actions'
 import { LinkInput } from './LinkInput'
 import { Picker, getOptionLabel, searchOptions } from './Picker'
@@ -134,6 +135,8 @@ export function Select({
       maxHeight={popoverMaxHeight}
       {...popoverProps}
       renderContent={({ onClose }) => (
+        <>
+        {useBottomDrawer && useSearch && <KeyboardDismissButton />}
         <Picker
           row={false}
           options={searchOptions(options, search, { labelKey })}
@@ -152,21 +155,21 @@ export function Select({
           }}
           {...pickerProps}
           renderHeader={
-            useBottomDrawer && useSearch
-              ? () => (
-                  <>
-                    <View padding="md" paddingB="xs">
-                      <TextInput
-                        prefixIcon="search-line"
-                        prefixIconColor="text4"
-                        value={search}
-                        onChange={handleChangeSearch}
-                      />
-                    </View>
-                    {renderHeader?.()}
-                  </>
-                )
-              : renderHeader
+            useBottomDrawer && useSearch ? (
+              <>
+                <View padding="md" paddingB="xs">
+                  <TextInput
+                    prefixIcon="search-line"
+                    prefixIconColor="text4"
+                    value={search}
+                    onChange={handleChangeSearch}
+                  />
+                </View>
+                {renderHeader?.()}
+              </>
+            ) : (
+              renderHeader
+            )
           }
           renderOption={({ option, selected, onChange }) => (
             <Link
@@ -187,6 +190,7 @@ export function Select({
             </Link>
           )}
         />
+        </>
       )}
     >
       <Input

package/src/components/inputs/datePicker/DayPicker.js

@@ -24,7 +24,9 @@ function fromMonthValue(v) {
     .startOf('month')
 }
 
-function MonthDays({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthDays = React.memo(function MonthDays({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
   const { cells } = useCalendarDays(month)
 
   return (
@@ -57,7 +59,7 @@ function MonthDays({ month, selectedValue, onSelect, min, max, onCheckDisabled }
       </Grid>
     </View>
   )
-}
+})
 
 export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   if (!!value) value = dayjs(value)
@@ -70,19 +72,23 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowCle
     if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
   }, [value?.day?.(), value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      setLocalValue(v)
+      onChange?.(v)
+    },
+    [onChange]
+  )
 
   const monthValue = toMonthValue(currentMonth)
   const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
   const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
     <MonthDays
-      month={fromMonthValue(v)}
-      selectedValue={value}
+      monthValue={v}
+      selectedKey={selectedKey}
       onSelect={handleChange}
       min={min}
       max={max}

package/src/components/inputs/datePicker/MonthPicker.js

@@ -14,14 +14,15 @@ import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
 const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
-function MonthGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+const MonthGrid = React.memo(function MonthGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
   const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
 
   return (
     <Grid colSpan={8} gap="xs">
       {months.map((month) => {
         const dateVal = yearDate.month(month)
-        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'month')
         const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
         return (
@@ -43,7 +44,7 @@ function MonthGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled })
       })}
     </Grid>
   )
-}
+})
 
 export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
@@ -55,18 +56,22 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowC
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.month?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('month')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('month')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
 
   const yearValue = currentYear.year()
   const minYear = min ? dayjs(min).year() : undefined
   const maxYear = max ? dayjs(max).year() : undefined
+  const selectedKey = value?.valueOf?.()
 
   const renderSlide = (v) => (
-    <MonthGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+    <MonthGrid year={v} selectedKey={selectedKey} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
   )
 
   return (