@helsenorge/datepicker 12.3.0 → 12.5.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.
- package/CHANGELOG.md +74 -0
- package/components/DatePicker/DatePicker.d.ts +4 -1
- package/components/DatePicker/index.js +98 -34
- package/components/DatePicker/index.js.map +1 -1
- package/components/DatePicker/resourceHelper.d.ts +3 -0
- package/package.json +1 -1
- package/resources/HN.Designsystem.DatePicker.en-GB.json.d.ts +13 -0
- package/resources/HN.Designsystem.DatePicker.nb-NO.json.d.ts +13 -0
- package/resources/index.d.ts +0 -0
- package/resources/index.js +2 -0
- package/resources/index.js.map +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,77 @@
|
|
|
1
|
+
## [12.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.4.0&targetVersion=GTv12.5.0) (2025-10-08)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- **datepicker:** default språkstøtte fra sot
|
|
6
|
+
([1f2b2ae](https://github.com/helsenorge/designsystem/commit/1f2b2ae2ddd0ab527d976ec2d3dc6ec9293f58a0))
|
|
7
|
+
- **drawer:** default språkstøtte fra sot
|
|
8
|
+
([56517c5](https://github.com/helsenorge/designsystem/commit/56517c50ec9f4d61ecbbd3ce2ebbe509d9af898b))
|
|
9
|
+
- **formgroup:** lagt til legendclassname prop
|
|
10
|
+
([9dbd90c](https://github.com/helsenorge/designsystem/commit/9dbd90c7efbb838fb5204870bcfd90a089d03f4c)), closes
|
|
11
|
+
[#360836](https://github.com/helsenorge/designsystem/issues/360836)
|
|
12
|
+
- **helptriggericon:** lagt til classname prop
|
|
13
|
+
([b9d207e](https://github.com/helsenorge/designsystem/commit/b9d207ec0871ce79259562042f4b321b21b94fd8)), closes
|
|
14
|
+
[#360496](https://github.com/helsenorge/designsystem/issues/360496)
|
|
15
|
+
- **icon:** nytt ikon feedback ([0e3f89c](https://github.com/helsenorge/designsystem/commit/0e3f89c04c897c8667593396cecaceb8d50fd879)),
|
|
16
|
+
closes [#360055](https://github.com/helsenorge/designsystem/issues/360055)
|
|
17
|
+
- **listeditmode:** funksjonalitet for å redigere liste
|
|
18
|
+
([d87e8c5](https://github.com/helsenorge/designsystem/commit/d87e8c59d44ce2278b403df3c3858029db280ad0)), closes
|
|
19
|
+
[#359697](https://github.com/helsenorge/designsystem/issues/359697)
|
|
20
|
+
- **tabs:** default språkstøtte fra sot
|
|
21
|
+
([733fd7e](https://github.com/helsenorge/designsystem/commit/733fd7e559e57cb3dfaf5e2efd52ac8754db8f6d))
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
- **drawer:** legg breakpoint check på outer level for å vise animasjon riktig igjen
|
|
26
|
+
([04f604a](https://github.com/helsenorge/designsystem/commit/04f604aaba66738ac710c28cb5514ec7b0d2967a)), closes
|
|
27
|
+
[#360641](https://github.com/helsenorge/designsystem/issues/360641)
|
|
28
|
+
- **favoritebutton:** kun vis fokusstrek på focus-visible"
|
|
29
|
+
([2dc6b2f](https://github.com/helsenorge/designsystem/commit/2dc6b2f954cdb7a5b5b3e7326a8c0d42723ef972)), closes
|
|
30
|
+
[#357829](https://github.com/helsenorge/designsystem/issues/357829)
|
|
31
|
+
- **helptriggericon:** fiks så komponenten fungerer i liste igjen
|
|
32
|
+
([45f801e](https://github.com/helsenorge/designsystem/commit/45f801edb77306cd7cba614396a7abc1089a610b)), closes
|
|
33
|
+
[#353532](https://github.com/helsenorge/designsystem/issues/353532) [#360885](https://github.com/helsenorge/designsystem/issues/360885)
|
|
34
|
+
- **helptriggericon:** juster ikon ift tekst uten å endre linjehøyde
|
|
35
|
+
([687a0fa](https://github.com/helsenorge/designsystem/commit/687a0fa13798a757408d417bde0d9bdb57cb59e1)), closes
|
|
36
|
+
[#360885](https://github.com/helsenorge/designsystem/issues/360885)
|
|
37
|
+
- **list:** vertikalt align knapper riktig i liste
|
|
38
|
+
([2926423](https://github.com/helsenorge/designsystem/commit/2926423198f6459228ea28b5c68945407756c6e3)), closes
|
|
39
|
+
[#353532](https://github.com/helsenorge/designsystem/issues/353532)
|
|
40
|
+
- **panel:** juster paddings for å ta hensyn til statuslinje
|
|
41
|
+
([1e8f5ff](https://github.com/helsenorge/designsystem/commit/1e8f5ff07c8e796af7269b3f4b92269a50d4fdcb)), closes
|
|
42
|
+
[#360101](https://github.com/helsenorge/designsystem/issues/360101)
|
|
43
|
+
- **popmenu:** ikon sentreres riktig
|
|
44
|
+
([3a8f5ac](https://github.com/helsenorge/designsystem/commit/3a8f5ac3dd9dfcff4fc75f101a4f4a6dbfbd1c88)), closes
|
|
45
|
+
[#361064](https://github.com/helsenorge/designsystem/issues/361064)
|
|
46
|
+
- **radiobutton:** disabled har samme radius som andre states
|
|
47
|
+
([27548a7](https://github.com/helsenorge/designsystem/commit/27548a74a68ac6c2d4c5783b84da056971995a4d)), closes
|
|
48
|
+
[#350142](https://github.com/helsenorge/designsystem/issues/350142)
|
|
49
|
+
- **radiobutton:** hele wrapperen skal ikke se klikkbar ut
|
|
50
|
+
([2c396cd](https://github.com/helsenorge/designsystem/commit/2c396cd1a5c79869ef9d72941c9c93efba47dc47)), closes
|
|
51
|
+
[#350142](https://github.com/helsenorge/designsystem/issues/350142)
|
|
52
|
+
|
|
53
|
+
## [12.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.3.0&targetVersion=GTv12.4.0) (2025-09-23)
|
|
54
|
+
|
|
55
|
+
### Features
|
|
56
|
+
|
|
57
|
+
- **favoritebutton:** default aria-label hentes fra sot
|
|
58
|
+
([53b3596](https://github.com/helsenorge/designsystem/commit/53b359668307ed19279a2a4d87a80a81538698e0)), closes
|
|
59
|
+
[#357829](https://github.com/helsenorge/designsystem/issues/357829)
|
|
60
|
+
- **favoritebutton:** ny komponent ([3971d8c](https://github.com/helsenorge/designsystem/commit/3971d8cea9d0f6e87c622ffcc700d5aecfc5a1ca)),
|
|
61
|
+
closes [#357829](https://github.com/helsenorge/designsystem/issues/357829)
|
|
62
|
+
|
|
63
|
+
### Bug Fixes
|
|
64
|
+
|
|
65
|
+
- når vertikaler brukte aria-describedby på skjemakomponenter så ble errorTextUuid overstyrt
|
|
66
|
+
([7de2697](https://github.com/helsenorge/designsystem/commit/7de26976ff449a10028deb734dbf6c5fe24fc029)), closes
|
|
67
|
+
[#359583](https://github.com/helsenorge/designsystem/issues/359583)
|
|
68
|
+
- statusdot og elementheader spacing fikses
|
|
69
|
+
([d88c71d](https://github.com/helsenorge/designsystem/commit/d88c71d6d73d73039a744cee76939114c06487e9)), closes
|
|
70
|
+
[#356675](https://github.com/helsenorge/designsystem/issues/356675)
|
|
71
|
+
- **elementheader:** ishovered sendes bare til ekte ikoner
|
|
72
|
+
([dcb0779](https://github.com/helsenorge/designsystem/commit/dcb0779a4a89894ad2262f9e88ef4438a41b09dc)), closes
|
|
73
|
+
[#360049](https://github.com/helsenorge/designsystem/issues/360049)
|
|
74
|
+
|
|
1
75
|
## [12.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv12.2.0&targetVersion=GTv12.3.0) (2025-09-18)
|
|
2
76
|
|
|
3
77
|
### Features
|
|
@@ -4,13 +4,14 @@ import { DayPickerProps } from 'react-day-picker';
|
|
|
4
4
|
import { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';
|
|
5
5
|
import { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';
|
|
6
6
|
import { DatePickerAriaLabels } from './DatePickerPopup';
|
|
7
|
+
import { HNDesignsystemDatePicker } from '../../resources/Resources';
|
|
7
8
|
export type DateFormat = 'dd.MM.yyyy';
|
|
8
9
|
export interface DatePickerProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur' | 'autoComplete'>, Pick<DayPickerProps, 'dir' | 'initialFocus'> {
|
|
9
10
|
/** Setter labels for popup på desktop visning */
|
|
10
11
|
ariaLabels?: DatePickerAriaLabels;
|
|
11
12
|
/** Adds custom classes to the element. */
|
|
12
13
|
className?: string;
|
|
13
|
-
/** Sets aria-label on the button that opens the datepicker dialogue */
|
|
14
|
+
/** @deprecated Sets aria-label on the button that opens the datepicker dialogue */
|
|
14
15
|
dateButtonAriaLabel?: string;
|
|
15
16
|
/** Sets the format of the date - only applies for desktop use. Native mobile date fields base their formats on the device */
|
|
16
17
|
dateFormat?: DateFormat;
|
|
@@ -46,6 +47,8 @@ export interface DatePickerProps extends ErrorWrapperClassNameProps, Pick<React.
|
|
|
46
47
|
onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>, date?: Date | string) => void;
|
|
47
48
|
/** Only use this to trigger validation. Callback triggered by change in chosen date via the datepicker popup */
|
|
48
49
|
onDatePopupClosed?: (date: Date | string | undefined) => void;
|
|
50
|
+
/** Resources for component */
|
|
51
|
+
resources?: Partial<HNDesignsystemDatePicker>;
|
|
49
52
|
/** Sets the data-testid attribute. */
|
|
50
53
|
testId?: string;
|
|
51
54
|
/** Determines the placement of the DatePicker popup. Default: automatic positioning. */
|
|
@@ -7,10 +7,11 @@ import Icon from "@helsenorge/designsystem-react/components/Icon";
|
|
|
7
7
|
import Calendar from "@helsenorge/designsystem-react/components/Icons/Calendar";
|
|
8
8
|
import Input from "@helsenorge/designsystem-react/components/Input";
|
|
9
9
|
import { PopOverVariant } from "@helsenorge/designsystem-react/components/PopOver";
|
|
10
|
-
import { ZIndex, KeyboardEventKey } from "@helsenorge/designsystem-react/constants";
|
|
10
|
+
import { ZIndex, LanguageLocales as LanguageLocales$1, KeyboardEventKey } from "@helsenorge/designsystem-react/constants";
|
|
11
11
|
import { useKeyboardEvent } from "@helsenorge/designsystem-react/hooks/useKeyboardEvent";
|
|
12
12
|
import { useOutsideEvent } from "@helsenorge/designsystem-react/hooks/useOutsideEvent";
|
|
13
13
|
import { usePseudoClasses } from "@helsenorge/designsystem-react/hooks/usePseudoClasses";
|
|
14
|
+
import { useLanguage } from "@helsenorge/designsystem-react/utils/language";
|
|
14
15
|
import { isMobileUA } from "@helsenorge/designsystem-react/utils/mobile";
|
|
15
16
|
import { isMutableRefObject, mergeRefs } from "@helsenorge/designsystem-react/utils/refs";
|
|
16
17
|
import classNames from "classnames";
|
|
@@ -22,6 +23,7 @@ import { useSize } from "@helsenorge/designsystem-react/hooks/useSize";
|
|
|
22
23
|
import { getSpacer } from "@helsenorge/designsystem-react/theme/currys/spacing";
|
|
23
24
|
import styles from "./styles.module.scss";
|
|
24
25
|
import { enUS } from "date-fns/locale/en-US";
|
|
26
|
+
import { LanguageLocales } from "@helsenorge/designsystem-react";
|
|
25
27
|
import ErrorWrapper from "@helsenorge/designsystem-react/components/ErrorWrapper";
|
|
26
28
|
import { useUuid } from "@helsenorge/designsystem-react/hooks/useUuid";
|
|
27
29
|
import { isComponent } from "@helsenorge/designsystem-react/utils/component";
|
|
@@ -641,30 +643,30 @@ function MonthsDropdown(props) {
|
|
|
641
643
|
return React.createElement(components2.Dropdown, { ...props });
|
|
642
644
|
}
|
|
643
645
|
function Nav(props) {
|
|
644
|
-
const { onPreviousClick, onNextClick, previousMonth, nextMonth, ...navProps } = props;
|
|
646
|
+
const { onPreviousClick, onNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2, ...navProps } = props;
|
|
645
647
|
const { components: components2, classNames: classNames2, labels: { labelPrevious: labelPrevious2, labelNext: labelNext2 } } = useDayPicker();
|
|
646
648
|
const handleNextClick = useCallback((e) => {
|
|
647
|
-
if (
|
|
649
|
+
if (nextMonth2) {
|
|
648
650
|
onNextClick == null ? void 0 : onNextClick(e);
|
|
649
651
|
}
|
|
650
|
-
}, [
|
|
652
|
+
}, [nextMonth2, onNextClick]);
|
|
651
653
|
const handlePreviousClick = useCallback((e) => {
|
|
652
|
-
if (
|
|
654
|
+
if (previousMonth2) {
|
|
653
655
|
onPreviousClick == null ? void 0 : onPreviousClick(e);
|
|
654
656
|
}
|
|
655
|
-
}, [
|
|
657
|
+
}, [previousMonth2, onPreviousClick]);
|
|
656
658
|
return React.createElement(
|
|
657
659
|
"nav",
|
|
658
660
|
{ ...navProps },
|
|
659
661
|
React.createElement(
|
|
660
662
|
components2.PreviousMonthButton,
|
|
661
|
-
{ type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex:
|
|
662
|
-
React.createElement(components2.Chevron, { disabled:
|
|
663
|
+
{ type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth2 ? void 0 : -1, "aria-disabled": previousMonth2 ? void 0 : true, "aria-label": labelPrevious2(previousMonth2), onClick: handlePreviousClick },
|
|
664
|
+
React.createElement(components2.Chevron, { disabled: previousMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: "left" })
|
|
663
665
|
),
|
|
664
666
|
React.createElement(
|
|
665
667
|
components2.NextMonthButton,
|
|
666
|
-
{ type: "button", className: classNames2[UI.NextMonthButton], tabIndex:
|
|
667
|
-
React.createElement(components2.Chevron, { disabled:
|
|
668
|
+
{ type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth2 ? void 0 : -1, "aria-disabled": nextMonth2 ? void 0 : true, "aria-label": labelNext2(nextMonth2), onClick: handleNextClick },
|
|
669
|
+
React.createElement(components2.Chevron, { disabled: nextMonth2 ? void 0 : true, orientation: "right", className: classNames2[UI.Chevron] })
|
|
668
670
|
)
|
|
669
671
|
);
|
|
670
672
|
}
|
|
@@ -1434,8 +1436,8 @@ function useCalendar(props, dateLib) {
|
|
|
1434
1436
|
const months = getMonths(displayMonths, dates, props, dateLib);
|
|
1435
1437
|
const weeks = getWeeks(months);
|
|
1436
1438
|
const days = getDays(months);
|
|
1437
|
-
const
|
|
1438
|
-
const
|
|
1439
|
+
const previousMonth2 = getPreviousMonth(firstMonth, navStart, props, dateLib);
|
|
1440
|
+
const nextMonth2 = getNextMonth(firstMonth, navEnd, props, dateLib);
|
|
1439
1441
|
const { disableNavigation, onMonthChange } = props;
|
|
1440
1442
|
const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
|
|
1441
1443
|
const goToMonth = (date) => {
|
|
@@ -1464,8 +1466,8 @@ function useCalendar(props, dateLib) {
|
|
|
1464
1466
|
days,
|
|
1465
1467
|
navStart,
|
|
1466
1468
|
navEnd,
|
|
1467
|
-
previousMonth,
|
|
1468
|
-
nextMonth,
|
|
1469
|
+
previousMonth: previousMonth2,
|
|
1470
|
+
nextMonth: nextMonth2,
|
|
1469
1471
|
goToMonth,
|
|
1470
1472
|
goToDay
|
|
1471
1473
|
};
|
|
@@ -1867,7 +1869,7 @@ function DayPicker(initialProps) {
|
|
|
1867
1869
|
const { captionLayout, mode, navLayout, numberOfMonths = 1, onDayBlur, onDayClick, onDayFocus, onDayKeyDown, onDayMouseEnter, onDayMouseLeave, onNextClick, onPrevClick, showWeekNumber, styles: styles2 } = props;
|
|
1868
1870
|
const { formatCaption: formatCaption2, formatDay: formatDay2, formatMonthDropdown: formatMonthDropdown2, formatWeekNumber: formatWeekNumber2, formatWeekNumberHeader: formatWeekNumberHeader2, formatWeekdayName: formatWeekdayName2, formatYearDropdown: formatYearDropdown2 } = formatters;
|
|
1869
1871
|
const calendar = useCalendar(props, dateLib);
|
|
1870
|
-
const { days, months, navStart, navEnd, previousMonth, nextMonth, goToMonth } = calendar;
|
|
1872
|
+
const { days, months, navStart, navEnd, previousMonth: previousMonth2, nextMonth: nextMonth2, goToMonth } = calendar;
|
|
1871
1873
|
const getModifiers = createGetModifiers(days, props, navStart, navEnd, dateLib);
|
|
1872
1874
|
const { isSelected, select, selected: selectedValue } = useSelection(props, dateLib) ?? {};
|
|
1873
1875
|
const { blur, focused, isFocusTarget, moveFocus, setFocused } = useFocus(props, calendar, getModifiers, isSelected ?? (() => false), dateLib);
|
|
@@ -1875,17 +1877,17 @@ function DayPicker(initialProps) {
|
|
|
1875
1877
|
const weekdays = useMemo(() => getWeekdays(dateLib, props.ISOWeek), [dateLib, props.ISOWeek]);
|
|
1876
1878
|
const isInteractive = mode !== void 0 || onDayClick !== void 0;
|
|
1877
1879
|
const handlePreviousClick = useCallback(() => {
|
|
1878
|
-
if (!
|
|
1880
|
+
if (!previousMonth2)
|
|
1879
1881
|
return;
|
|
1880
|
-
goToMonth(
|
|
1881
|
-
onPrevClick == null ? void 0 : onPrevClick(
|
|
1882
|
-
}, [
|
|
1882
|
+
goToMonth(previousMonth2);
|
|
1883
|
+
onPrevClick == null ? void 0 : onPrevClick(previousMonth2);
|
|
1884
|
+
}, [previousMonth2, goToMonth, onPrevClick]);
|
|
1883
1885
|
const handleNextClick = useCallback(() => {
|
|
1884
|
-
if (!
|
|
1886
|
+
if (!nextMonth2)
|
|
1885
1887
|
return;
|
|
1886
|
-
goToMonth(
|
|
1887
|
-
onNextClick == null ? void 0 : onNextClick(
|
|
1888
|
-
}, [goToMonth,
|
|
1888
|
+
goToMonth(nextMonth2);
|
|
1889
|
+
onNextClick == null ? void 0 : onNextClick(nextMonth2);
|
|
1890
|
+
}, [goToMonth, nextMonth2, onNextClick]);
|
|
1889
1891
|
const handleDayClick = useCallback((day, m) => (e) => {
|
|
1890
1892
|
e.preventDefault();
|
|
1891
1893
|
e.stopPropagation();
|
|
@@ -1960,8 +1962,8 @@ function DayPicker(initialProps) {
|
|
|
1960
1962
|
select,
|
|
1961
1963
|
isSelected,
|
|
1962
1964
|
months,
|
|
1963
|
-
nextMonth,
|
|
1964
|
-
previousMonth,
|
|
1965
|
+
nextMonth: nextMonth2,
|
|
1966
|
+
previousMonth: previousMonth2,
|
|
1965
1967
|
goToMonth,
|
|
1966
1968
|
getModifiers,
|
|
1967
1969
|
components: components2,
|
|
@@ -1979,7 +1981,7 @@ function DayPicker(initialProps) {
|
|
|
1979
1981
|
React.createElement(
|
|
1980
1982
|
components2.Months,
|
|
1981
1983
|
{ className: classNames2[UI.Months], style: styles2 == null ? void 0 : styles2[UI.Months] },
|
|
1982
|
-
!props.hideNavigation && !navLayout && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
|
|
1984
|
+
!props.hideNavigation && !navLayout && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2 }),
|
|
1983
1985
|
months.map((calendarMonth, displayIndex) => {
|
|
1984
1986
|
return React.createElement(
|
|
1985
1987
|
components2.Month,
|
|
@@ -1994,8 +1996,8 @@ function DayPicker(initialProps) {
|
|
|
1994
1996
|
},
|
|
1995
1997
|
navLayout === "around" && !props.hideNavigation && displayIndex === 0 && React.createElement(
|
|
1996
1998
|
components2.PreviousMonthButton,
|
|
1997
|
-
{ type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex:
|
|
1998
|
-
React.createElement(components2.Chevron, { disabled:
|
|
1999
|
+
{ type: "button", className: classNames2[UI.PreviousMonthButton], tabIndex: previousMonth2 ? void 0 : -1, "aria-disabled": previousMonth2 ? void 0 : true, "aria-label": labelPrevious2(previousMonth2), onClick: handlePreviousClick, "data-animated-button": props.animate ? "true" : void 0 },
|
|
2000
|
+
React.createElement(components2.Chevron, { disabled: previousMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "right" : "left" })
|
|
1999
2001
|
),
|
|
2000
2002
|
React.createElement(components2.MonthCaption, { "data-animated-caption": props.animate ? "true" : void 0, className: classNames2[UI.MonthCaption], style: styles2 == null ? void 0 : styles2[UI.MonthCaption], calendarMonth, displayIndex }, (captionLayout == null ? void 0 : captionLayout.startsWith("dropdown")) ? React.createElement(
|
|
2001
2003
|
components2.DropdownNav,
|
|
@@ -2020,10 +2022,10 @@ function DayPicker(initialProps) {
|
|
|
2020
2022
|
)),
|
|
2021
2023
|
navLayout === "around" && !props.hideNavigation && displayIndex === numberOfMonths - 1 && React.createElement(
|
|
2022
2024
|
components2.NextMonthButton,
|
|
2023
|
-
{ type: "button", className: classNames2[UI.NextMonthButton], tabIndex:
|
|
2024
|
-
React.createElement(components2.Chevron, { disabled:
|
|
2025
|
+
{ type: "button", className: classNames2[UI.NextMonthButton], tabIndex: nextMonth2 ? void 0 : -1, "aria-disabled": nextMonth2 ? void 0 : true, "aria-label": labelNext2(nextMonth2), onClick: handleNextClick, "data-animated-button": props.animate ? "true" : void 0 },
|
|
2026
|
+
React.createElement(components2.Chevron, { disabled: nextMonth2 ? void 0 : true, className: classNames2[UI.Chevron], orientation: props.dir === "rtl" ? "left" : "right" })
|
|
2025
2027
|
),
|
|
2026
|
-
displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth, nextMonth }),
|
|
2028
|
+
displayIndex === numberOfMonths - 1 && navLayout === "after" && !props.hideNavigation && React.createElement(components2.Nav, { "data-animated-nav": props.animate ? "true" : void 0, className: classNames2[UI.Nav], style: styles2 == null ? void 0 : styles2[UI.Nav], "aria-label": labelNav2(), onPreviousClick: handlePreviousClick, onNextClick: handleNextClick, previousMonth: previousMonth2, nextMonth: nextMonth2 }),
|
|
2027
2029
|
React.createElement(
|
|
2028
2030
|
components2.MonthGrid,
|
|
2029
2031
|
{ role: "grid", "aria-multiselectable": mode === "multiple" || mode === "range", "aria-label": labelGrid2(calendarMonth.date, dateLib.options, dateLib) || void 0, className: classNames2[UI.MonthGrid], style: styles2 == null ? void 0 : styles2[UI.MonthGrid] },
|
|
@@ -2282,10 +2284,55 @@ const DatePickerPopup = (props) => {
|
|
|
2282
2284
|
/* @__PURE__ */ jsx("div", { ref: arrowRef, className: popupArrowClasses, style: { ...arrowStyle, zIndex } })
|
|
2283
2285
|
] });
|
|
2284
2286
|
};
|
|
2287
|
+
const dateButtonAriaLabel$1 = "Open datepicker";
|
|
2288
|
+
const dayButtonBase$1 = "{date}";
|
|
2289
|
+
const dayButtonToday$1 = "Today, {date}";
|
|
2290
|
+
const dayButtonSelected$1 = "{date}, selected";
|
|
2291
|
+
const nextMonth$1 = "Next month";
|
|
2292
|
+
const previousMonth$1 = "Previous month";
|
|
2293
|
+
const monthDropdown$1 = "Select month";
|
|
2294
|
+
const yearDropdown$1 = "Select year";
|
|
2295
|
+
const enGB = {
|
|
2296
|
+
dateButtonAriaLabel: dateButtonAriaLabel$1,
|
|
2297
|
+
dayButtonBase: dayButtonBase$1,
|
|
2298
|
+
dayButtonToday: dayButtonToday$1,
|
|
2299
|
+
dayButtonSelected: dayButtonSelected$1,
|
|
2300
|
+
nextMonth: nextMonth$1,
|
|
2301
|
+
previousMonth: previousMonth$1,
|
|
2302
|
+
monthDropdown: monthDropdown$1,
|
|
2303
|
+
yearDropdown: yearDropdown$1
|
|
2304
|
+
};
|
|
2305
|
+
const dateButtonAriaLabel = "Åpne datovelger";
|
|
2306
|
+
const dayButtonBase = "{date}";
|
|
2307
|
+
const dayButtonToday = "I dag, {date}";
|
|
2308
|
+
const dayButtonSelected = "{date} valgt";
|
|
2309
|
+
const nextMonth = "Neste måned";
|
|
2310
|
+
const previousMonth = "Forrige måned";
|
|
2311
|
+
const monthDropdown = "Velg måned";
|
|
2312
|
+
const yearDropdown = "Velg år";
|
|
2313
|
+
const nbNO = {
|
|
2314
|
+
dateButtonAriaLabel,
|
|
2315
|
+
dayButtonBase,
|
|
2316
|
+
dayButtonToday,
|
|
2317
|
+
dayButtonSelected,
|
|
2318
|
+
nextMonth,
|
|
2319
|
+
previousMonth,
|
|
2320
|
+
monthDropdown,
|
|
2321
|
+
yearDropdown
|
|
2322
|
+
};
|
|
2323
|
+
const getResources = (language) => {
|
|
2324
|
+
switch (language) {
|
|
2325
|
+
case LanguageLocales.ENGLISH:
|
|
2326
|
+
return enGB;
|
|
2327
|
+
case LanguageLocales.NORWEGIAN:
|
|
2328
|
+
default:
|
|
2329
|
+
return nbNO;
|
|
2330
|
+
}
|
|
2331
|
+
};
|
|
2285
2332
|
const DatePicker = React.forwardRef((props, ref) => {
|
|
2286
2333
|
const {
|
|
2287
2334
|
className,
|
|
2288
|
-
dateButtonAriaLabel,
|
|
2335
|
+
dateButtonAriaLabel: dateButtonAriaLabel2,
|
|
2289
2336
|
dateFormat = "dd.MM.yyyy",
|
|
2290
2337
|
dateValue,
|
|
2291
2338
|
defaultMonth,
|
|
@@ -2308,6 +2355,7 @@ const DatePicker = React.forwardRef((props, ref) => {
|
|
|
2308
2355
|
onChange,
|
|
2309
2356
|
onDatePopupClosed,
|
|
2310
2357
|
testId,
|
|
2358
|
+
resources,
|
|
2311
2359
|
autoComplete = "off",
|
|
2312
2360
|
variant = PopOverVariant.positionautomatic,
|
|
2313
2361
|
zIndex = ZIndex.PopOver,
|
|
@@ -2318,6 +2366,22 @@ const DatePicker = React.forwardRef((props, ref) => {
|
|
|
2318
2366
|
const [month, setMonth2] = useState(defaultMonth);
|
|
2319
2367
|
const [datePickerOpen, setDatePickerOpen] = useState(false);
|
|
2320
2368
|
const [returnInputFocus, setReturnInputFocus] = useState(false);
|
|
2369
|
+
const { language } = useLanguage(LanguageLocales$1.NORWEGIAN);
|
|
2370
|
+
const defaultResources = getResources(language);
|
|
2371
|
+
const mergedResources = {
|
|
2372
|
+
...defaultResources,
|
|
2373
|
+
...resources,
|
|
2374
|
+
dateButtonAriaLabel: dateButtonAriaLabel2 || (resources == null ? void 0 : resources.dateButtonAriaLabel) || defaultResources.dateButtonAriaLabel
|
|
2375
|
+
};
|
|
2376
|
+
const popupAriaLabels = {
|
|
2377
|
+
dayButtonBase: (ariaLabels == null ? void 0 : ariaLabels.dayButtonBase) || mergedResources.dayButtonBase,
|
|
2378
|
+
dayButtonToday: (ariaLabels == null ? void 0 : ariaLabels.dayButtonToday) || mergedResources.dayButtonToday,
|
|
2379
|
+
dayButtonSelected: (ariaLabels == null ? void 0 : ariaLabels.dayButtonSelected) || mergedResources.dayButtonSelected,
|
|
2380
|
+
nextMonth: (ariaLabels == null ? void 0 : ariaLabels.nextMonth) || mergedResources.nextMonth,
|
|
2381
|
+
previousMonth: (ariaLabels == null ? void 0 : ariaLabels.previousMonth) || mergedResources.previousMonth,
|
|
2382
|
+
monthDropdown: (ariaLabels == null ? void 0 : ariaLabels.monthDropdown) || mergedResources.monthDropdown,
|
|
2383
|
+
yearDropdown: (ariaLabels == null ? void 0 : ariaLabels.yearDropdown) || mergedResources.yearDropdown
|
|
2384
|
+
};
|
|
2321
2385
|
const weekendMatcher = {
|
|
2322
2386
|
dayOfWeek: [0, 6]
|
|
2323
2387
|
};
|
|
@@ -2493,7 +2557,7 @@ const DatePicker = React.forwardRef((props, ref) => {
|
|
|
2493
2557
|
Button$1,
|
|
2494
2558
|
{
|
|
2495
2559
|
disabled,
|
|
2496
|
-
ariaLabel:
|
|
2560
|
+
ariaLabel: dateButtonAriaLabel2 ?? "Velg dato",
|
|
2497
2561
|
onClick: handleButtonClick,
|
|
2498
2562
|
tabIndex: datePickerOpen ? -1 : 0,
|
|
2499
2563
|
variant: "borderless",
|
|
@@ -2522,7 +2586,7 @@ const DatePicker = React.forwardRef((props, ref) => {
|
|
|
2522
2586
|
onMonthChange: setMonth2,
|
|
2523
2587
|
variant,
|
|
2524
2588
|
zIndex,
|
|
2525
|
-
ariaLabels
|
|
2589
|
+
ariaLabels: popupAriaLabels
|
|
2526
2590
|
}
|
|
2527
2591
|
)
|
|
2528
2592
|
] });
|