@startupjs-ui/date-time-picker 0.1.22 → 0.2.0-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.1](https://github.com/startupjs/startupjs-ui/compare/v0.2.0-alpha.0...v0.2.0-alpha.1) (2026-04-10)
+
+**Note:** Version bump only for package @startupjs-ui/date-time-picker
+
+
+
+
+
+# [0.2.0-alpha.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.22...v0.2.0-alpha.0) (2026-03-27)
+
+
+### Features
+
+* fix and improve accessibility of various components. Add storybook with tests. ([#21](https://github.com/startupjs/startupjs-ui/issues/21)) ([83b6576](https://github.com/startupjs/startupjs-ui/commit/83b65767ed61b24209f71b143ba1c2986170ab58))
+
+
+
+
+
 ## [0.1.22](https://github.com/startupjs/startupjs-ui/compare/v0.1.21...v0.1.22) (2026-03-25)
 
 **Note:** Version bump only for package @startupjs-ui/date-time-picker

package/components/Calendar/Days/index.tsx

@@ -37,7 +37,7 @@ function Days ({
       ._weekdaysShort
 
     return data.map((day: string) => day.toUpperCase())
-  }, [uiDate, timezone, exactLocale])
+  }, [uiDate, timezone, exactLocale, moment])
 
   const matrixMonthDays = useMemo(() => {
     const data = []
@@ -70,7 +70,7 @@ function Days ({
     }
 
     return data
-  }, [uiDate, timezone])
+  }, [uiDate, timezone, moment])
 
   function _onChangeDay (item: any) {
     const timestamp = +moment
@@ -91,7 +91,7 @@ function Days ({
       : false
 
     return isDisabledDay || isBeforeMinDate || isAfterMaxDate
-  }, [disabledDays, maxDate, minDate, timezone])
+  }, [disabledDays, maxDate, minDate, timezone, moment])
 
   function getLabelActive (value: number) {
     return range
@@ -107,6 +107,8 @@ function Days ({
           Span.shortName(bold)= shortDayName
 
     for week, weekIndex in matrixMonthDays
+      // noop to prevent eslint error about missing 'week'. TODO: implement eslint disable comments support in pug
+      - (week => {})(week)
       Div.row(key='week-' + weekIndex row)
         for day, dayIndex in matrixMonthDays[weekIndex]
           Div.cell(

package/components/Calendar/Header/index.tsx

@@ -38,7 +38,7 @@ function Header ({
   const onChangeMonth = useCallback((value: number) => {
     const ts = +moment($uiDate.get()).add('month', value)
     $uiDate.set(ts)
-  }, [$uiDate])
+  }, [$uiDate, moment])
 
   const isPrevDisabled = minDate
     ? +moment.tz($uiDate.get(), timezone).endOf('month').add('month', -1) < minDate
@@ -103,7 +103,7 @@ const Years = observer(function YearsComponent ({
     const ts = +moment($uiDate.get()).year(year)
     $uiDate.set(ts)
     $visible.set(false)
-  }, [$uiDate, $visible])
+  }, [$uiDate, $visible, moment])
 
   const years = useMemo(() => {
     return new Array(yearsDiff + 1).fill(minYear).map((year, index) => {

package/components/TimeSelect/index.tsx

@@ -51,10 +51,10 @@ function TimeSelect ({
     if (is24Hour != null) return is24Hour
     const lt = (moment().locale(exactLocale))._locale._longDateFormat.LT
     return !/a/i.test(lt)
-  }, [is24Hour, exactLocale])
+  }, [is24Hour, exactLocale, moment])
 
   const preparedData = useMemo(() => {
-    const res: Array<{ label: string, value: number, disabled: boolean }> = []
+    const res: { label: string, value: number, disabled: boolean }[] = []
 
     let currentTimestamp = +moment.tz(date, timezone).locale(exactLocale).startOf('d')
     const endTimestamp = +moment.tz(date, timezone).locale(exactLocale).endOf('d')
@@ -75,14 +75,14 @@ function TimeSelect ({
     }
 
     return res
-  }, [date, exactLocale, timezone, timeInterval, _is24Hour, maxDate, minDate])
+  }, [date, exactLocale, timezone, timeInterval, _is24Hour, maxDate, minDate, moment])
 
   const scrollToIndex = useCallback((_date: Date = date) => {
     const dateTimestamp = +moment.tz(_date, timezone)
     const index = preparedData.findIndex(item => dateTimestamp === item.value)
     if (index === -1) return
     refScroll.current?.scrollToIndex?.({ index, animated: false })
-  }, [date, timezone, preparedData])
+  }, [date, timezone, preparedData, moment])
 
   useImperativeHandle(ref, () => ({ scrollToIndex }), [scrollToIndex])
   useEffect(() => {

package/helpers/getLocale.ts

@@ -1,4 +1,4 @@
-import { I18nManager, Platform, Settings } from 'react-native'
+import { I18nManager, NativeModules, Platform } from 'react-native'
 
 export default function getLocale (): string {
   if (Platform.OS === 'web') {
@@ -6,8 +6,9 @@ export default function getLocale (): string {
   }
 
   if (Platform.OS === 'ios') {
-    const appleLocale = Settings.get('AppleLocale') as string | undefined
-    const appleLanguages = Settings.get('AppleLanguages') as string[] | undefined
+    const settings = NativeModules.SettingsManager?.settings
+    const appleLocale = settings?.AppleLocale as string | undefined
+    const appleLanguages = settings?.AppleLanguages as string[] | undefined
     return appleLocale ?? appleLanguages?.[0] ?? 'en'
   }
 

package/helpers/useMoment.ts

@@ -2,7 +2,7 @@ import { use } from 'react'
 
 let momentPromise: any
 
-const loadMoment = (): Promise<any> => { // eslint-disable-line @typescript-eslint/promise-function-async
+const loadMoment = (): Promise<any> => {
   if (!momentPromise) momentPromise = import('moment-timezone').then(m => m.default)
   return momentPromise
 }

package/index.tsx

@@ -256,7 +256,7 @@ function DateTimePicker ({
     const locales = moment.locales()
     const _locale = locale ?? getLocale()
     return locales.includes(_locale) ? _locale : 'en'
-  }, [locale])
+  }, [locale, moment])
 
   const _dateFormat = useMemo(() => {
     if (dateFormat) return dateFormat
@@ -267,7 +267,7 @@ function DateTimePicker ({
 
     if (mode === 'date') return (moment().locale(exactLocale))._locale._longDateFormat.L
     if (mode === 'time') return (moment().locale(exactLocale))._locale._longDateFormat.LT
-  }, [mode, dateFormat, exactLocale])
+  }, [mode, dateFormat, exactLocale, moment])
 
   useEffect(() => {
     if (typeof date === 'undefined') {
@@ -278,7 +278,7 @@ function DateTimePicker ({
     const value = +moment.tz(date, timezone).seconds(0).milliseconds(0)
     setTextInput(moment.tz(value, timezone).format(_dateFormat))
     setTempDate(new Date(value))
-  }, [date, timezone, _dateFormat, setTempDate])
+  }, [date, timezone, _dateFormat, setTempDate, moment])
 
   function _onChangeDate (value: any) {
     const timestamp = getTimestampFromValue(value)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/date-time-picker",
-  "version": "0.1.22",
+  "version": "0.2.0-alpha.1",
   "publishConfig": {
     "access": "public"
   },
@@ -10,17 +10,17 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@react-native-community/datetimepicker": "^8.4.4",
-    "@startupjs-ui/abstract-popover": "^0.1.22",
-    "@startupjs-ui/button": "^0.1.22",
-    "@startupjs-ui/core": "^0.1.22",
-    "@startupjs-ui/div": "^0.1.22",
-    "@startupjs-ui/divider": "^0.1.22",
-    "@startupjs-ui/drawer": "^0.1.22",
-    "@startupjs-ui/flat-list": "^0.1.22",
-    "@startupjs-ui/icon": "^0.1.22",
-    "@startupjs-ui/popover": "^0.1.22",
-    "@startupjs-ui/span": "^0.1.22",
-    "@startupjs-ui/text-input": "^0.1.22",
+    "@startupjs-ui/abstract-popover": "^0.2.0-alpha.1",
+    "@startupjs-ui/button": "^0.2.0-alpha.1",
+    "@startupjs-ui/core": "^0.2.0-alpha.1",
+    "@startupjs-ui/div": "^0.2.0-alpha.1",
+    "@startupjs-ui/divider": "^0.2.0-alpha.1",
+    "@startupjs-ui/drawer": "^0.2.0-alpha.1",
+    "@startupjs-ui/flat-list": "^0.2.0-alpha.1",
+    "@startupjs-ui/icon": "^0.2.0-alpha.1",
+    "@startupjs-ui/popover": "^0.2.0-alpha.1",
+    "@startupjs-ui/span": "^0.2.0-alpha.1",
+    "@startupjs-ui/text-input": "^0.2.0-alpha.1",
     "moment-timezone": "^0.5.31",
     "react-native-safe-area-context": "^5.6.0"
   },
@@ -29,5 +29,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "3bd18c16f0f203ee3d940bf2e09381edc0034665"
+  "gitHead": "b48004779559b16c96a2a1995dab13b998eafce9"
 }