@danske/sapphire-react-lab 0.82.2 → 0.83.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n SapphireCalendarStateOptions,\n useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../../src/Calendar/src/Calendar.tsx"],"sourcesContent":["import React from 'react';\nimport { createCalendar, DateValue } from '@internationalized/date';\nimport { AriaCalendarProps, useCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\n\nimport {\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n Button,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport { CalendarMonthsGrid } from './CalendarMonthsGrid';\nimport { CalendarYearsGrid } from './CalendarYearsGrid';\nimport {\n SapphireCalendarStateOptions,\n useSapphireCalendarState,\n} from './useSapphireCalendarState';\nimport clsx from 'clsx';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport intlMessages from '../i18n';\nimport { sentenceCase } from './utils';\n\nexport interface SapphireCalendarProps<T extends DateValue = DateValue>\n extends SapphireStyleProps,\n Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>,\n Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {\n /**\n * Whether week numbers are visible as a first column\n */\n showWeekNumbers?: boolean;\n}\n\n/**\n * Displays a calendar and allows users to select a single date. It displays a grid of days in one\n * month, by default, and the user can navigate to previous and next months. It's also possible\n * to navigate to months and years view, to quickly jump to a date far away from the focused date.\n */\nexport const Calendar = <T extends DateValue = DateValue>({\n showWeekNumbers,\n ...props\n}: Omit<SapphireCalendarProps<T>, 'locale'>): JSX.Element => {\n useThemeCheck();\n const { locale } = useLocale();\n const formatMessage = useMessageFormatter(intlMessages);\n\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const state = useCalendarAnimationState(\n useSapphireCalendarState({\n selectionAlignment: 'start',\n ...props,\n locale,\n createCalendar,\n })\n );\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era:\n state.visibleRange.start.calendar.identifier === 'gregory' &&\n state.visibleRange.start.era === 'BC'\n ? 'short'\n : undefined,\n calendar: state.visibleRange.start.calendar.identifier,\n timeZone: state.timeZone,\n });\n\n const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(\n props,\n state\n );\n\n const renderGrid = () => {\n switch (state.view) {\n case 'years':\n return <CalendarYearsGrid state={state} />;\n case 'months':\n return <CalendarMonthsGrid state={state} />;\n case 'days':\n default:\n return (\n <CalendarDaysGrid state={state} showWeekNumbers={showWeekNumbers} />\n );\n }\n };\n\n const renderTitle = () => {\n switch (state.view) {\n case 'days':\n return sentenceCase(\n monthDateFormatter.format(\n state.visibleRange.start.toDate(state.timeZone)\n )\n );\n case 'months':\n return state.focusedDate.year;\n case 'years':\n return sentenceCase(formatMessage('year'));\n }\n };\n return (\n <div\n className={styles['sapphire-calendar']}\n {...mergeProps(calendarProps, filterDOMProps(props))}\n >\n <div\n className={clsx(\n styles['sapphire-calendar__table-container'],\n styleProps.className\n )}\n style={styleProps.style}\n >\n <CalendarHeader\n prevButtonProps={prevButtonProps}\n nextButtonProps={nextButtonProps}\n >\n {state.canBroadenView ? (\n <Button\n onPress={state.broadenView}\n isDisabled={state.isDisabled}\n variant=\"tertiary\"\n appearance=\"ghost\"\n size=\"large\"\n >\n {renderTitle()}\n </Button>\n ) : (\n renderTitle()\n )}\n </CalendarHeader>\n {state.view === 'days' ? (\n <CalendarPageAnimation state={state.animationState}>\n {renderGrid()}\n </CalendarPageAnimation>\n ) : (\n renderGrid()\n )}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n createCalendar,\n DateValue,\n toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n Button,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n label: string;\n dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps
|
|
1
|
+
{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n createCalendar,\n DateValue,\n toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n Button,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n label: string;\n dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps<\n T extends DateValue = DateValue,\n P extends string = string\n> extends SapphireStyleProps,\n Omit<\n AriaRangeCalendarProps<T>,\n | 'validationState'\n | 'errorMessage'\n | 'allowsNonContiguousRanges'\n | 'onChange'\n > {\n /**\n * This callback also gives you the information if the selected range was a\n * predefined date according to the `predefinedRanges` prop.\n */\n onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];\n /**\n * Whether week numbers are visible as a first column\n */\n showWeekNumbers?: boolean;\n\n /**\n * Whether to show two months at the same time.\n */\n showTwoMonths?: boolean;\n\n /**\n * A set of predefined date ranges the user can more conveniently select.\n */\n predefinedRanges?: Record<P, PredefinedDateRange>;\n\n /**\n * Whether range is allowed to span unavailable dates.\n */\n allowUnavailableDatesWithinRange?: boolean;\n}\n\n/**\n * Displays a calendar and allow users to select a consecutive range of dates.\n * One or two months can be visible at the same time.\n */\nconst _RangeCalendar = function RangeCalendar<\n T extends DateValue = DateValue,\n P extends string = string\n>(\n {\n showWeekNumbers,\n showTwoMonths = false,\n allowUnavailableDatesWithinRange = false,\n predefinedRanges,\n ...props\n }: SapphireRangeCalendarProps<T, P>,\n forwardedRef: React.ForwardedRef<HTMLDivElement>\n): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n\n const ref = useObjectRef(forwardedRef);\n const { locale } = useLocale();\n const state = useCalendarAnimationState(\n useRangeCalendarState({\n ...props,\n locale,\n allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n visibleDuration: useMemo(\n () => ({ months: showTwoMonths ? 2 : 1 }),\n [showTwoMonths]\n ),\n createCalendar,\n })\n );\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(\n props,\n state,\n ref\n );\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era:\n state.visibleRange.start.calendar.identifier === 'gregory' &&\n state.visibleRange.start.era === 'BC'\n ? 'short'\n : undefined,\n calendar: state.visibleRange.start.calendar.identifier,\n timeZone: state.timeZone,\n });\n\n return (\n <div\n ref={ref}\n className={clsx(styles['sapphire-calendar'], styleProps.className)}\n style={styleProps.style}\n {...mergeProps(calendarProps, filterDOMProps(props))}\n >\n <div className={styles['sapphire-calendar__tables-row']}>\n {[state.visibleRange.start]\n .concat(\n showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []\n )\n .map((startOfMonth, index, visibleMonths) => {\n const isLeft = visibleMonths.length > 1 && index === 0;\n const isRight =\n visibleMonths.length > 1 && index === visibleMonths.length - 1;\n const shouldAnimate = visibleMonths.length === 1;\n const daysGrid = (\n <CalendarDaysGrid\n startDate={startOfMonth}\n state={state}\n showWeekNumbers={showWeekNumbers}\n />\n );\n return (\n <div\n key={index}\n className={styles['sapphire-calendar__table-container']}\n >\n <CalendarHeader\n prevButtonProps={prevButtonProps}\n nextButtonProps={nextButtonProps}\n isLeft={isLeft}\n isRight={isRight}\n >\n {sentenceCase(\n monthDateFormatter.format(\n startOfMonth.toDate(state.timeZone)\n )\n )}\n </CalendarHeader>\n {shouldAnimate ? (\n <CalendarPageAnimation state={state.animationState}>\n {daysGrid}\n </CalendarPageAnimation>\n ) : (\n daysGrid\n )}\n </div>\n );\n })}\n </div>\n {predefinedRanges && (\n <div className={styles['sapphire-calendar__custom-ranges']}>\n {(\n Object.entries(predefinedRanges) as Array<[P, PredefinedDateRange]>\n ).map(([key, { label, dateRange }]) => (\n <div key={key}>\n <Button\n variant=\"secondary\"\n appearance=\"ghost\"\n onPress={() => {\n state.setValue(dateRange, key);\n state.setAnchorDate(null);\n state.setFocusedDate(toCalendarDate(dateRange.end));\n }}\n >\n {label}\n </Button>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n\n// eslint-disable-next-line\n// @ts-ignore Union type too complex to represent (TODO: check if this is still\n// an issue when we use TS@5.\nexport const RangeCalendar = React.forwardRef(_RangeCalendar) as <\n T extends DateValue,\n P extends string\n>(\n props: SapphireRangeCalendarProps<T, P> & {\n ref?: React.ForwardedRef<HTMLDivElement>;\n }\n) => ReturnType<typeof _RangeCalendar>;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSapphireCalendarState.js","sources":["../../../../src/Calendar/src/useSapphireCalendarState.tsx"],"sourcesContent":["import { DateDuration } from '@internationalized/date';\nimport {\n CalendarState,\n CalendarStateOptions,\n useCalendarState,\n} from '@react-stately/calendar';\nimport { useControlledState } from '@react-stately/utils';\n\nexport type CalendarView = 'days' | 'months' | 'years';\nconst viewToVisibleDuration: Record<CalendarView, DateDuration> = {\n days: {\n months: 1,\n },\n months: {\n years: 1,\n },\n years: {\n years: 12,\n },\n};\n\nexport interface SapphireCalendarStateOptions {\n /**\n * Controls the calendar's view (day, month, year).\n */\n view?: CalendarView;\n\n /**\n * The view of the calendar when it first mounts (uncontrolled).\n */\n defaultView?: CalendarView;\n /**\n * Handler that is called when the view is changed.\n */\n onViewChange?: (value: CalendarView) => void;\n}\n\nexport type SapphireCalendarState = CalendarState & {\n view: CalendarView;\n narrowView: () => void;\n broadenView: () => void;\n canBroadenView: boolean;\n};\n\nexport function useSapphireCalendarState({\n view: viewProp,\n defaultView = 'days',\n onViewChange,\n ...otherOptions\n}: SapphireCalendarStateOptions
|
|
1
|
+
{"version":3,"file":"useSapphireCalendarState.js","sources":["../../../../src/Calendar/src/useSapphireCalendarState.tsx"],"sourcesContent":["import { DateDuration, DateValue } from '@internationalized/date';\nimport {\n CalendarState,\n CalendarStateOptions,\n useCalendarState,\n} from '@react-stately/calendar';\nimport { useControlledState } from '@react-stately/utils';\n\nexport type CalendarView = 'days' | 'months' | 'years';\nconst viewToVisibleDuration: Record<CalendarView, DateDuration> = {\n days: {\n months: 1,\n },\n months: {\n years: 1,\n },\n years: {\n years: 12,\n },\n};\n\nexport interface SapphireCalendarStateOptions<T extends DateValue>\n extends CalendarStateOptions<T> {\n /**\n * Controls the calendar's view (day, month, year).\n */\n view?: CalendarView;\n\n /**\n * The view of the calendar when it first mounts (uncontrolled).\n */\n defaultView?: CalendarView;\n /**\n * Handler that is called when the view is changed.\n */\n onViewChange?: (value: CalendarView) => void;\n}\n\nexport type SapphireCalendarState = CalendarState & {\n view: CalendarView;\n narrowView: () => void;\n broadenView: () => void;\n canBroadenView: boolean;\n};\n\nexport function useSapphireCalendarState<T extends DateValue>({\n view: viewProp,\n defaultView = 'days',\n onViewChange,\n ...otherOptions\n}: SapphireCalendarStateOptions<T> &\n CalendarStateOptions<T>): SapphireCalendarState {\n const [view, setView] = useControlledState<CalendarView>(\n viewProp,\n defaultView,\n onViewChange\n );\n const state = useCalendarState({\n ...otherOptions,\n visibleDuration: viewToVisibleDuration[view],\n });\n const broadenView = () => {\n switch (view) {\n case 'days':\n return setView('months');\n case 'months':\n return setView('years');\n }\n };\n const narrowView = () => {\n switch (view) {\n case 'months':\n return setView('days');\n case 'years':\n return setView('months');\n }\n };\n const canDrillUp = !state.isReadOnly && ['days', 'months'].includes(view);\n return {\n ...state,\n view: view,\n narrowView,\n broadenView,\n canBroadenView: canDrillUp,\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,qBAA4D,GAAA;AAAA,EAChE,IAAM,EAAA;AAAA,IACJ,MAAQ,EAAA,CAAA;AAAA,GAAA;AAAA,EAEV,MAAQ,EAAA;AAAA,IACN,KAAO,EAAA,CAAA;AAAA,GAAA;AAAA,EAET,KAAO,EAAA;AAAA,IACL,KAAO,EAAA,EAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AA4BJ,SAAA,wBAAA,CAAuD,EAMZ,EAAA;AANY,EAC5D,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAM,IAAA,EAAA,QAAA;AAAA,IACN,WAAc,GAAA,MAAA;AAAA,IACd,YAAA;AAAA,GAH4D,GAAA,EAAA,EAIzD,yBAJyD,EAIzD,EAAA;AAAA,IAHH,MAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GAAA,CAAA,CAAA;AAIA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAW,CAAA,GAAA,kBAAA,CACtB,UACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,KAAA,GAAQ,gBAAiB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAC1B,YAD0B,CAAA,EAAA;AAAA,IAE7B,iBAAiB,qBAAsB,CAAA,IAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEzC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,MAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,MACZ,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,MAAM;AACvB,IAAQ,QAAA,IAAA;AAAA,MACD,KAAA,QAAA;AACH,QAAA,OAAO,OAAQ,CAAA,MAAA,CAAA,CAAA;AAAA,MACZ,KAAA,OAAA;AACH,QAAA,OAAO,OAAQ,CAAA,QAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAGrB,EAAA,MAAM,aAAa,CAAC,KAAA,CAAM,cAAc,CAAC,MAAA,EAAQ,UAAU,QAAS,CAAA,IAAA,CAAA,CAAA;AACpE,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,IAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAgB,EAAA,UAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}
|
package/build/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { AriaToggleButtonProps } from '@react-aria/button';
|
|
|
6
6
|
import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
|
|
7
7
|
import { DateValue } from '@internationalized/date';
|
|
8
8
|
import { AriaCalendarProps, AriaRangeCalendarProps } from '@react-aria/calendar';
|
|
9
|
-
import { RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
|
|
9
|
+
import { CalendarStateOptions, RangeCalendarStateOptions as RangeCalendarStateOptions$1 } from '@react-stately/calendar';
|
|
10
10
|
import { DateValue as DateValue$1, AriaDatePickerProps, AriaDateRangePickerProps } from '@react-aria/datepicker';
|
|
11
11
|
import { DateRangePickerStateOptions as DateRangePickerStateOptions$1 } from '@react-stately/datepicker';
|
|
12
12
|
import { ComboBoxProps } from '@react-types/combobox';
|
|
@@ -47,7 +47,7 @@ interface ButtonWithoutIconProps {
|
|
|
47
47
|
declare const ToggleButton: React__default.ForwardRefExoticComponent<SapphireToggleButtonProps & React__default.RefAttributes<_react_types_shared.FocusableRefValue<HTMLButtonElement, HTMLButtonElement>>>;
|
|
48
48
|
|
|
49
49
|
declare type CalendarView = 'days' | 'months' | 'years';
|
|
50
|
-
interface SapphireCalendarStateOptions {
|
|
50
|
+
interface SapphireCalendarStateOptions<T extends DateValue> extends CalendarStateOptions<T> {
|
|
51
51
|
/**
|
|
52
52
|
* Controls the calendar's view (day, month, year).
|
|
53
53
|
*/
|
|
@@ -62,7 +62,7 @@ interface SapphireCalendarStateOptions {
|
|
|
62
62
|
onViewChange?: (value: CalendarView) => void;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
interface SapphireCalendarProps extends SapphireStyleProps, Omit<AriaCalendarProps<
|
|
65
|
+
interface SapphireCalendarProps<T extends DateValue = DateValue> extends SapphireStyleProps, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>, Omit<SapphireCalendarStateOptions<T>, 'createCalendar'> {
|
|
66
66
|
/**
|
|
67
67
|
* Whether week numbers are visible as a first column
|
|
68
68
|
*/
|
|
@@ -73,7 +73,7 @@ interface SapphireCalendarProps extends SapphireStyleProps, Omit<AriaCalendarPro
|
|
|
73
73
|
* month, by default, and the user can navigate to previous and next months. It's also possible
|
|
74
74
|
* to navigate to months and years view, to quickly jump to a date far away from the focused date.
|
|
75
75
|
*/
|
|
76
|
-
declare const Calendar: ({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps
|
|
76
|
+
declare const Calendar: <T extends DateValue = DateValue>({ showWeekNumbers, ...props }: Omit<SapphireCalendarProps<T>, "locale">) => JSX.Element;
|
|
77
77
|
|
|
78
78
|
declare type OriginalOnChange$1<T extends DateValue> = NonNullable<RangeCalendarStateOptions$1<T>['onChange']>;
|
|
79
79
|
declare type RangeCalendarStateOptions<T extends DateValue, P extends string> = Omit<RangeCalendarStateOptions$1<T>, 'onChange'> & {
|
|
@@ -87,7 +87,7 @@ interface PredefinedDateRange {
|
|
|
87
87
|
end: DateValue;
|
|
88
88
|
};
|
|
89
89
|
}
|
|
90
|
-
interface SapphireRangeCalendarProps<P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<
|
|
90
|
+
interface SapphireRangeCalendarProps<T extends DateValue = DateValue, P extends string = string> extends SapphireStyleProps, Omit<AriaRangeCalendarProps<T>, 'validationState' | 'errorMessage' | 'allowsNonContiguousRanges' | 'onChange'> {
|
|
91
91
|
/**
|
|
92
92
|
* This callback also gives you the information if the selected range was a
|
|
93
93
|
* predefined date according to the `predefinedRanges` prop.
|
|
@@ -114,8 +114,8 @@ interface SapphireRangeCalendarProps<P extends string = string> extends Sapphire
|
|
|
114
114
|
* Displays a calendar and allow users to select a consecutive range of dates.
|
|
115
115
|
* One or two months can be visible at the same time.
|
|
116
116
|
*/
|
|
117
|
-
declare const _RangeCalendar: <T extends string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
|
|
118
|
-
declare const RangeCalendar: <T extends string>(props: SapphireRangeCalendarProps<T> & {
|
|
117
|
+
declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T, P>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
|
|
118
|
+
declare const RangeCalendar: <T extends DateValue, P extends string>(props: SapphireRangeCalendarProps<T, P> & {
|
|
119
119
|
ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
|
|
120
120
|
}) => ReturnType<typeof _RangeCalendar>;
|
|
121
121
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.83.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
|
|
6
6
|
"exports": {
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"clsx": "^1.1.1",
|
|
72
72
|
"react-transition-group": "^4.4.5"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "442856d9937fb96e3a92299a39106fa720f34180"
|
|
75
75
|
}
|