@dhis2-ui/calendar 8.14.9 → 8.15.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "8.14.9",
+    "version": "8.15.0-alpha.2",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -32,25 +32,27 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "8.14.9",
-        "@dhis2-ui/card": "8.14.9",
-        "@dhis2-ui/input": "8.14.9",
-        "@dhis2-ui/layer": "8.14.9",
-        "@dhis2-ui/popper": "8.14.9",
+        "@dhis2-ui/button": "8.15.0-alpha.2",
+        "@dhis2-ui/card": "8.15.0-alpha.2",
+        "@dhis2-ui/input": "8.15.0-alpha.2",
+        "@dhis2-ui/layer": "8.15.0-alpha.2",
+        "@dhis2-ui/popper": "8.15.0-alpha.2",
         "@dhis2/multi-calendar-dates": "1.0.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "8.14.9",
-        "@dhis2/ui-icons": "8.14.9",
+        "@dhis2/ui-constants": "8.15.0-alpha.2",
+        "@dhis2/ui-icons": "8.15.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }

package/types/index.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { useDatePicker } from '@dhis2/multi-calendar-dates'
+import { InputFieldProps } from '@dhis2-ui/input'
+
+export type CalendarDir = 'ltr' | 'rtl'
+
+type CalendarPickerParam = Parameters<typeof useDatePicker>[0]
+type CalendarPickerOptions = CalendarPickerParam['options']
+
+export interface CalendarProps {
+    /**
+     * the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts
+     */
+    calendar: CalendarPickerOptions['calendar']
+    /**
+     * Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd`
+     */
+    onDateSelect: CalendarPickerParam['onDateSelect']
+    /**
+     * the size of a single cell in the table forming the calendar
+     */
+    cellSize?: string
+    /**
+     * the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)
+     */
+    date?: string
+    /**
+     * the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control
+     */
+    dir?: CalendarDir
+    /**
+     * any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15)
+     */
+    locale?: string
+    /**
+     * numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts
+     */
+    numberingSystem?: CalendarPickerOptions['numberingSystem']
+    /**
+     * the timeZone to use
+     */
+    timeZone?: CalendarPickerOptions['timeZone']
+    /**
+     * the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow)
+     */
+    weekDayFormat?: CalendarPickerOptions['weekDayFormat']
+    /**
+     * the width of the calendar component
+     */
+    width?: string
+}
+
+export const Calendar: React.FC<CalendarProps>
+
+export type CalendarInputProps = Omit<
+    InputFieldProps,
+    'label' | 'type' | 'value'
+> &
+    CalendarProps
+
+export const CalendarInput: React.FC<CalendarInputProps>