@oslokommune/punkt-react 17.1.3 → 18.1.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 +35 -0
- package/dist/components/accordion/Accordion.d.ts +2 -12
- package/dist/components/accordion/AccordionItem.d.ts +2 -8
- package/dist/components/alert/Alert.d.ts +4 -3
- package/dist/components/backlink/BackLink.d.ts +3 -10
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +7 -13
- package/dist/components/calendar/types.d.ts +14 -12
- package/dist/components/checkbox/Checkbox.d.ts +5 -0
- package/dist/components/combobox/types.d.ts +5 -0
- package/dist/components/consent/strings.d.ts +1 -85
- package/dist/components/datepicker/DateTags.d.ts +2 -2
- package/dist/components/datepicker/types.d.ts +6 -3
- package/dist/components/fileupload/DropZone.d.ts +3 -0
- package/dist/components/fileupload/FileUpload.d.ts +9 -61
- package/dist/components/header/types.d.ts +5 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/components/inputwrapper/InputWrapper.d.ts +6 -0
- package/dist/components/link/Link.d.ts +2 -6
- package/dist/components/radio/RadioButton.d.ts +5 -0
- package/dist/components/searchinput/SearchInput.d.ts +4 -0
- package/dist/components/select/Select.d.ts +3 -0
- package/dist/components/strings/PktStringsProvider.d.ts +21 -0
- package/dist/components/strings/strings-override.test.d.ts +1 -0
- package/dist/components/tag/Tag.d.ts +3 -0
- package/dist/components/textarea/Textarea.d.ts +3 -0
- package/dist/components/textinput/Textinput.d.ts +3 -0
- package/dist/components/timepicker/types.d.ts +3 -2
- package/dist/components/timepicker/useTimepickerState.d.ts +9 -1
- package/dist/punkt-react.cjs +1 -1
- package/dist/punkt-react.js +2982 -2757
- package/dist/shared-strings/consent.d.ts +71 -0
- package/dist/shared-strings/format.d.ts +21 -0
- package/dist/shared-strings/index.d.ts +14 -0
- package/dist/shared-strings/nb.d.ts +121 -0
- package/dist/shared-strings/resolve.d.ts +12 -0
- package/dist/shared-strings/store.d.ts +27 -0
- package/dist/shared-strings/types.d.ts +40 -0
- package/dist/shared-types/accordion.d.ts +58 -0
- package/dist/shared-types/alert.d.ts +20 -0
- package/dist/shared-types/aria.d.ts +2 -1
- package/dist/shared-types/backlink.d.ts +23 -0
- package/dist/shared-types/breadcrumbs.d.ts +33 -0
- package/dist/shared-types/fileupload.d.ts +55 -28
- package/dist/shared-types/footer.d.ts +10 -0
- package/dist/shared-types/form-field.d.ts +45 -0
- package/dist/shared-types/header-footer.d.ts +2 -0
- package/dist/shared-types/index.d.ts +15 -6
- package/dist/shared-types/render-link.d.ts +22 -0
- package/dist/shared-types/skin.d.ts +2 -9
- package/dist/shared-utils/combobox/index.d.ts +1 -0
- package/dist/shared-utils/combobox/input-utils.d.ts +2 -1
- package/dist/shared-utils/combobox/messages.d.ts +7 -0
- package/dist/shared-utils/combobox/option-utils.d.ts +2 -1
- package/dist/shared-utils/combobox/selection-manager.d.ts +3 -2
- package/package.json +4 -4
- package/src/components/accordion/Accordion.tsx +2 -12
- package/src/components/accordion/AccordionItem.tsx +2 -8
- package/src/components/alert/Alert.tsx +12 -5
- package/src/components/backlink/BackLink.tsx +12 -12
- package/src/components/breadcrumbs/Breadcrumbs.tsx +19 -15
- package/src/components/calendar/Calendar.core.test.tsx +7 -5
- package/src/components/calendar/types.ts +14 -34
- package/src/components/calendar/useCalendarState.ts +16 -2
- package/src/components/checkbox/Checkbox.tsx +20 -4
- package/src/components/combobox/Combobox.tsx +1 -0
- package/src/components/combobox/Listbox.tsx +4 -2
- package/src/components/combobox/types.ts +6 -0
- package/src/components/combobox/useComboboxState.ts +15 -8
- package/src/components/consent/strings.ts +1 -125
- package/src/components/datepicker/DateTags.tsx +4 -3
- package/src/components/datepicker/Datepicker.accessibility.test.tsx +2 -2
- package/src/components/datepicker/Datepicker.tsx +1 -0
- package/src/components/datepicker/DatepickerInputs.tsx +6 -6
- package/src/components/datepicker/types.ts +6 -3
- package/src/components/datepicker/useDatepickerState.ts +4 -5
- package/src/components/fileupload/DropZone.tsx +20 -15
- package/src/components/fileupload/FileUpload.test.tsx +37 -0
- package/src/components/fileupload/FileUpload.tsx +63 -73
- package/src/components/header/HeaderGlobal.tsx +5 -2
- package/src/components/header/HeaderService.tsx +12 -7
- package/src/components/header/types.ts +6 -0
- package/src/components/index.ts +10 -0
- package/src/components/inputwrapper/InputWrapper.tsx +28 -6
- package/src/components/link/Link.tsx +2 -6
- package/src/components/radio/RadioButton.tsx +18 -2
- package/src/components/searchinput/SearchInput.tsx +13 -3
- package/src/components/select/Select.tsx +5 -0
- package/src/components/strings/PktStringsProvider.tsx +38 -0
- package/src/components/strings/strings-override.test.tsx +130 -0
- package/src/components/tag/Tag.tsx +13 -2
- package/src/components/textarea/Textarea.tsx +5 -0
- package/src/components/textinput/Textinput.tsx +5 -0
- package/src/components/timepicker/Timepicker.tsx +1 -0
- package/src/components/timepicker/types.ts +3 -2
- package/src/components/timepicker/useTimepickerState.ts +20 -22
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,41 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [18.1.0](https://github.com/oslokommune/punkt/compare/18.0.0...18.1.0) (2026-08-31)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
Ingen
|
|
18
|
+
|
|
19
|
+
### Chores
|
|
20
|
+
Ingen
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [18.0.0](https://github.com/oslokommune/punkt/compare/17.1.3...18.0.0) (2026-08-27)
|
|
26
|
+
|
|
27
|
+
### ⚠ BREAKING CHANGES
|
|
28
|
+
* Ny `shared-strings` og metoder for å overstyre strenger i komponenter (#3610). BREAKING CHANGE: **`strings`-propertyen på Elements** betyr nå "delvis overstyring" i stedet for "hele no.json".
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
Ingen
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
Ingen
|
|
36
|
+
|
|
37
|
+
### Chores
|
|
38
|
+
Ingen
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
|
|
8
43
|
## [17.1.3](https://github.com/oslokommune/punkt/compare/17.1.2...17.1.3) (2026-08-25)
|
|
9
44
|
|
|
10
45
|
### ⚠ BREAKING CHANGES
|
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { TAccordionSkin } from '../../shared-types';
|
|
2
|
+
import { IPktAccordionBase, TAccordionSkin } from '../../shared-types';
|
|
3
3
|
export type TPktAccordionSkin = TAccordionSkin;
|
|
4
|
-
export interface IPktAccordion {
|
|
5
|
-
compact?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* @default skin: "borderless"
|
|
8
|
-
*/
|
|
9
|
-
skin?: TPktAccordionSkin;
|
|
10
|
-
/**
|
|
11
|
-
* @description A unique identifier to connect the accordion with a heading
|
|
12
|
-
*/
|
|
13
|
-
ariaLabelledBy?: string;
|
|
4
|
+
export interface IPktAccordion extends IPktAccordionBase {
|
|
14
5
|
children?: ReactNode;
|
|
15
|
-
name?: string;
|
|
16
6
|
className?: string;
|
|
17
7
|
}
|
|
18
8
|
export declare const useAccordionContext: () => {
|
|
@@ -1,15 +1,9 @@
|
|
|
1
1
|
import { MouseEvent, ReactNode, SyntheticEvent } from 'react';
|
|
2
|
-
import { TAccordionSkin } from '../../shared-types';
|
|
2
|
+
import { IPktAccordionItemBase, TAccordionSkin } from '../../shared-types';
|
|
3
3
|
export type TPktAccordionSkin = TAccordionSkin;
|
|
4
|
-
export interface IPktAccordionItem {
|
|
5
|
-
defaultOpen?: boolean;
|
|
6
|
-
id: string;
|
|
4
|
+
export interface IPktAccordionItem extends Omit<IPktAccordionItemBase, 'title'> {
|
|
7
5
|
title: string | ReactNode;
|
|
8
|
-
skin?: TPktAccordionSkin;
|
|
9
|
-
compact?: boolean;
|
|
10
|
-
isOpen?: boolean;
|
|
11
6
|
children?: ReactNode;
|
|
12
|
-
name?: string;
|
|
13
7
|
className?: string;
|
|
14
8
|
onClick?: (e: MouseEvent<HTMLDetailsElement>) => void;
|
|
15
9
|
onToggle?: (e: SyntheticEvent<HTMLDetailsElement>) => void;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FC, HTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { TAlertRole, TAlertSkin, TAriaLive } from '../../shared-types';
|
|
3
|
-
|
|
2
|
+
import { TAlertRole, TAlertSkin, TAlertSize, TAriaLive } from '../../shared-types';
|
|
3
|
+
import { IPktStringsProps } from '../../shared-strings';
|
|
4
|
+
export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, IPktStringsProps {
|
|
4
5
|
skin?: TAlertSkin;
|
|
5
6
|
closeAlert?: boolean;
|
|
6
7
|
title?: ReactNode;
|
|
@@ -16,7 +17,7 @@ export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
|
|
|
16
17
|
*
|
|
17
18
|
* @default medium
|
|
18
19
|
*/
|
|
19
|
-
size?:
|
|
20
|
+
size?: TAlertSize;
|
|
20
21
|
onClose?: (e: CustomEvent) => void;
|
|
21
22
|
}
|
|
22
23
|
export type { TAlertSkin };
|
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, ReactNode, Ref } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
ariaLabel?: string;
|
|
6
|
-
renderLink?: (args: {
|
|
7
|
-
href: string;
|
|
8
|
-
className: string;
|
|
9
|
-
children: ReactNode;
|
|
10
|
-
props: AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
11
|
-
}) => ReactNode;
|
|
2
|
+
import { IPktBackLinkBase, TRenderLink } from '../../shared-types';
|
|
3
|
+
export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, IPktBackLinkBase {
|
|
4
|
+
renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
12
5
|
ref?: Ref<HTMLElement>;
|
|
13
6
|
}
|
|
14
7
|
export declare const PktBackLink: import('react').ForwardRefExoticComponent<Omit<IPktBackLink, "ref"> & import('react').RefAttributes<HTMLElement>>;
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
renderLink?: (args: {
|
|
10
|
-
href: string;
|
|
11
|
-
className: string;
|
|
12
|
-
children: ReactNode;
|
|
13
|
-
props: AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
14
|
-
}) => ReactNode;
|
|
2
|
+
import { IBreadcrumb, IPktBreadcrumbsBase, TBreadcrumbsNavigationType, TRenderLink } from '../../shared-types';
|
|
3
|
+
export type { IBreadcrumb };
|
|
4
|
+
/** @deprecated Use `IBreadcrumb`. */
|
|
5
|
+
export type IBreadcrumbs = IBreadcrumb;
|
|
6
|
+
export interface IPktBreadcrumbs extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>, IPktBreadcrumbsBase {
|
|
7
|
+
navigationType?: TBreadcrumbsNavigationType;
|
|
8
|
+
renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
15
9
|
}
|
|
16
10
|
export declare const PktBreadcrumbs: import('react').ForwardRefExoticComponent<IPktBreadcrumbs & import('react').RefAttributes<HTMLAnchorElement>>;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { IDateConstraints, TDateRangeMap } from '../../shared-types/calendar';
|
|
2
|
-
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
|
+
/** Datonavn og navigasjonstekster slik kalender-underkomponentene forventer dem. */
|
|
3
4
|
export interface IPktCalendarStrings {
|
|
4
|
-
month
|
|
5
|
-
year
|
|
6
|
-
days
|
|
7
|
-
daysShort
|
|
8
|
-
months
|
|
9
|
-
week
|
|
10
|
-
prevMonth
|
|
11
|
-
nextMonth
|
|
5
|
+
month: string;
|
|
6
|
+
year: string;
|
|
7
|
+
days: string[];
|
|
8
|
+
daysShort: string[];
|
|
9
|
+
months: string[];
|
|
10
|
+
week: string;
|
|
11
|
+
prevMonth: string;
|
|
12
|
+
nextMonth: string;
|
|
12
13
|
}
|
|
13
14
|
export interface PktCalendarHandle {
|
|
14
15
|
handleDateSelect: (selectedDate: Date | null) => void;
|
|
@@ -31,7 +32,8 @@ export interface IPktCalendar {
|
|
|
31
32
|
withcontrols?: boolean;
|
|
32
33
|
currentmonth?: Date | string | null;
|
|
33
34
|
today?: string;
|
|
34
|
-
|
|
35
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
36
|
+
strings?: TPktStringsOverride;
|
|
35
37
|
onDateSelected?: (selected: string[]) => void;
|
|
36
38
|
onClose?: () => void;
|
|
37
39
|
id?: string;
|
|
@@ -48,7 +50,7 @@ export type TDayViewData = {
|
|
|
48
50
|
};
|
|
49
51
|
export interface ICalendarState {
|
|
50
52
|
componentId: string;
|
|
51
|
-
strings:
|
|
53
|
+
strings: IPktCalendarStrings;
|
|
52
54
|
year: number;
|
|
53
55
|
month: number;
|
|
54
56
|
activeSelected: string[];
|
|
@@ -92,7 +94,7 @@ export interface ICalendarState {
|
|
|
92
94
|
}
|
|
93
95
|
export interface ICalendarNavProps {
|
|
94
96
|
componentId: string;
|
|
95
|
-
strings:
|
|
97
|
+
strings: IPktCalendarStrings;
|
|
96
98
|
year: number;
|
|
97
99
|
month: number;
|
|
98
100
|
earliest: string | null;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
2
3
|
export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
4
|
id: string;
|
|
4
5
|
hasTile?: boolean;
|
|
@@ -14,9 +15,13 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
14
15
|
hideLabel?: boolean;
|
|
15
16
|
labelPosition?: 'right' | 'left';
|
|
16
17
|
optionalTag?: boolean;
|
|
18
|
+
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
17
19
|
optionalText?: string;
|
|
18
20
|
requiredTag?: boolean;
|
|
21
|
+
/** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
|
|
19
22
|
requiredText?: string;
|
|
23
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
24
|
+
strings?: TPktStringsOverride;
|
|
20
25
|
tagText?: string | null;
|
|
21
26
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
22
27
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
1
2
|
import { ChangeEvent, ChangeEventHandler, FocusEvent, KeyboardEvent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent, ReactNode, RefObject } from 'react';
|
|
2
3
|
import { IPktComboboxOption, TPktComboboxDisplayValue, TPktComboboxTagPlacement } from '../../shared-types/combobox';
|
|
3
4
|
export interface IPktCombobox {
|
|
@@ -33,6 +34,8 @@ export interface IPktCombobox {
|
|
|
33
34
|
useWrapper?: boolean;
|
|
34
35
|
inline?: boolean;
|
|
35
36
|
counter?: boolean;
|
|
37
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
38
|
+
strings?: TPktStringsOverride;
|
|
36
39
|
hasFieldset?: boolean;
|
|
37
40
|
inputSize?: 'small' | 'medium' | 'xsmall';
|
|
38
41
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
@@ -41,6 +44,8 @@ export interface IPktCombobox {
|
|
|
41
44
|
children?: ReactNode;
|
|
42
45
|
}
|
|
43
46
|
export interface IComboboxState {
|
|
47
|
+
/** Tekstoverstyring sendt inn på komponenten. */
|
|
48
|
+
strings?: TPktStringsOverride;
|
|
44
49
|
id: string;
|
|
45
50
|
inputId: string;
|
|
46
51
|
listboxId: string;
|
|
@@ -1,85 +1 @@
|
|
|
1
|
-
export
|
|
2
|
-
i18n: {
|
|
3
|
-
nb: {
|
|
4
|
-
contentPresentation: {
|
|
5
|
-
title: string;
|
|
6
|
-
description: string[];
|
|
7
|
-
buttons: {
|
|
8
|
-
accept: string;
|
|
9
|
-
reject: string;
|
|
10
|
-
settings: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
contentSettings: {
|
|
14
|
-
title: string;
|
|
15
|
-
description: string[];
|
|
16
|
-
buttons: {
|
|
17
|
-
back: string;
|
|
18
|
-
save: string;
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
en: {
|
|
23
|
-
contentPresentation: {
|
|
24
|
-
title: string;
|
|
25
|
-
description: string[];
|
|
26
|
-
buttons: {
|
|
27
|
-
accept: string;
|
|
28
|
-
reject: string;
|
|
29
|
-
settings: string;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
contentSettings: {
|
|
33
|
-
title: string;
|
|
34
|
-
description: string[];
|
|
35
|
-
buttons: {
|
|
36
|
-
back: string;
|
|
37
|
-
save: string;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
cookies: ({
|
|
43
|
-
name: string;
|
|
44
|
-
defaultValue: null;
|
|
45
|
-
i18n: {
|
|
46
|
-
nb: {
|
|
47
|
-
title: string;
|
|
48
|
-
description: string;
|
|
49
|
-
buttons: {
|
|
50
|
-
yes: string;
|
|
51
|
-
no: string;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
en: {
|
|
55
|
-
title: string;
|
|
56
|
-
description: string;
|
|
57
|
-
buttons: {
|
|
58
|
-
yes: string;
|
|
59
|
-
no: string;
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
};
|
|
63
|
-
} | {
|
|
64
|
-
name: string;
|
|
65
|
-
defaultValue: boolean;
|
|
66
|
-
i18n: {
|
|
67
|
-
nb: {
|
|
68
|
-
title: string;
|
|
69
|
-
description: string;
|
|
70
|
-
buttons: {
|
|
71
|
-
yes: string;
|
|
72
|
-
no: string;
|
|
73
|
-
};
|
|
74
|
-
};
|
|
75
|
-
en: {
|
|
76
|
-
title: string;
|
|
77
|
-
description: string;
|
|
78
|
-
buttons: {
|
|
79
|
-
yes: string;
|
|
80
|
-
no: string;
|
|
81
|
-
};
|
|
82
|
-
};
|
|
83
|
-
};
|
|
84
|
-
})[];
|
|
85
|
-
};
|
|
1
|
+
export { consentStrings } from '../../shared-strings/consent';
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
2
2
|
interface DateTagsProps {
|
|
3
3
|
dates: string[];
|
|
4
4
|
dateformat: string;
|
|
5
5
|
idBase: string;
|
|
6
|
-
strings?:
|
|
6
|
+
strings?: TPktStringsOverride;
|
|
7
7
|
onDateRemoved: (date: string) => void;
|
|
8
8
|
}
|
|
9
9
|
export declare const DateTags: ({ dates, dateformat, idBase, strings, onDateRemoved, }: DateTagsProps) => import("react").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { TPktStrings, TPktStringsOverride } from '../../shared-strings';
|
|
1
2
|
import { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
-
import { IDatepickerStrings } from '../../shared-types/datepicker';
|
|
3
3
|
import { TPktInputSize } from '../../shared-types/size';
|
|
4
4
|
export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
5
5
|
id: string;
|
|
@@ -35,7 +35,8 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
|
|
|
35
35
|
requiredText?: string;
|
|
36
36
|
tagText?: string;
|
|
37
37
|
useWrapper?: boolean;
|
|
38
|
-
|
|
38
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
39
|
+
strings?: TPktStringsOverride;
|
|
39
40
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
40
41
|
onValueChange?: (values: string[]) => void;
|
|
41
42
|
className?: string;
|
|
@@ -82,7 +83,9 @@ export interface IDatepickerState {
|
|
|
82
83
|
today?: string;
|
|
83
84
|
inputType: string;
|
|
84
85
|
isIOSDevice: boolean;
|
|
85
|
-
strings:
|
|
86
|
+
strings: Pick<TPktStrings, 'generic' | 'datepicker' | 'validation'>;
|
|
87
|
+
/** Rå tekstoverstyring, til videresending til underkomponenter. */
|
|
88
|
+
stringsOverride?: TPktStringsOverride;
|
|
86
89
|
inputClasses: string;
|
|
87
90
|
buttonClasses: string;
|
|
88
91
|
rangeLabelClasses: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from 'react';
|
|
2
2
|
import { TFileItemList, TUploadStrategy } from './types';
|
|
3
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
4
|
/**
|
|
4
5
|
* Props for the internal `DropZone` building block.
|
|
5
6
|
*
|
|
@@ -9,6 +10,8 @@ import { TFileItemList, TUploadStrategy } from './types';
|
|
|
9
10
|
* - optionally rendering hidden inputs with file IDs when `uploadStrategy="custom"`
|
|
10
11
|
*/
|
|
11
12
|
interface IDropZoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'> {
|
|
13
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
14
|
+
strings?: TPktStringsOverride;
|
|
12
15
|
/** Called with `FileItem`s created from dropped/selected files. */
|
|
13
16
|
onFilesAdded?: (files: TFileItemList) => void;
|
|
14
17
|
/** Used for the native input `id` and related label/ARIA wiring. */
|
|
@@ -1,83 +1,31 @@
|
|
|
1
1
|
import { FC, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { IPktFileUploadBase } from '../../shared-types';
|
|
2
3
|
import { ItemRenderers } from './QueueDisplay';
|
|
3
|
-
import { FileItem, TFileItemList, TFileTransfer,
|
|
4
|
+
import { FileItem, TFileItemList, TFileTransfer, TItemRenderer, TQueueItemOperation } from './types';
|
|
4
5
|
export { formatFileSize, parseFileSize } from '../../shared-utils/fileupload';
|
|
5
6
|
/**
|
|
6
7
|
* Shared props for `PktFileUpload` (both `form` and `custom` strategies).
|
|
7
8
|
*/
|
|
8
|
-
interface IBaseFileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue'> {
|
|
9
|
+
interface IBaseFileUploadProps extends Omit<IPktFileUploadBase, 'helptext' | 'helptextDropdown' | 'itemRenderer' | 'extraOperations' | 'value' | 'defaultValue' | 'onFilesChanged' | 'onFileUploadRequested'>, Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width' | 'defaultValue' | 'name'> {
|
|
9
10
|
/** Called with the next file list when files are added/removed/updated. */
|
|
10
11
|
onFilesChanged?: (files: TFileItemList) => void;
|
|
11
|
-
/** Allow selecting/dropping multiple files. */
|
|
12
|
-
multiple?: boolean;
|
|
13
|
-
/** Controlled value (recommended). */
|
|
14
|
-
value?: TFileItemList;
|
|
15
|
-
/** Upload mode. Defaults to `"form"`. */
|
|
16
|
-
uploadStrategy?: TUploadStrategy;
|
|
17
|
-
/** Field name. Used for native input (`form`) or hidden ID inputs (`custom`). */
|
|
18
|
-
name: string;
|
|
19
|
-
/** Enable comment operation (disabled automatically in thumbnail view). */
|
|
20
|
-
addCommentsEnabled?: boolean;
|
|
21
|
-
/** Enable rename operation (disabled automatically in thumbnail view). */
|
|
22
|
-
renameFilesEnabled?: boolean;
|
|
23
|
-
/** Renderer for queue items (`filename`, `thumbnail`, or custom function). */
|
|
24
|
-
itemRenderer?: keyof typeof ItemRenderers | TItemRenderer;
|
|
25
|
-
/** Number of trailing characters to keep when truncating long filenames. */
|
|
26
|
-
truncateTail?: number;
|
|
27
12
|
/**
|
|
28
13
|
* Called immediately when a file is added in `uploadStrategy="custom"`.
|
|
29
14
|
* Use it to start uploading the file and update `transfers`.
|
|
30
15
|
*/
|
|
31
16
|
onFileUploadRequested?: (fileItem: FileItem) => void;
|
|
17
|
+
/** Controlled value (recommended). */
|
|
18
|
+
value?: TFileItemList;
|
|
32
19
|
/** Uncontrolled initial value (use either `value` or `defaultValue`, not both). */
|
|
33
20
|
defaultValue?: TFileItemList;
|
|
34
|
-
/**
|
|
35
|
-
|
|
36
|
-
/** Stretch to full container width (drop zone + queue). */
|
|
37
|
-
fullwidth?: boolean;
|
|
38
|
-
/** Allowed formats for built-in validation (extensions like `pdf`, or MIME patterns like `image/*`). */
|
|
39
|
-
allowedFormats?: string[];
|
|
40
|
-
/** Custom message for invalid format. Use `{formats}` placeholder. */
|
|
41
|
-
formatErrorMessage?: string;
|
|
42
|
-
/** Max file size (e.g. `"5MB"` or bytes). */
|
|
43
|
-
maxFileSize?: string | number;
|
|
44
|
-
/** Custom message for size validation. Use `{maxSize}` placeholder. */
|
|
45
|
-
sizeErrorMessage?: string;
|
|
46
|
-
/** Optional additional validation hook (runs after built-in format/size checks). Return string to block. */
|
|
47
|
-
onFileValidation?: (file: File) => string | null;
|
|
48
|
-
/**
|
|
49
|
-
* Low-level validation escape hatch — Lit parity with the `file-validate` CustomEvent.
|
|
50
|
-
* Receives a detail object whose `errorMessage` can be mutated; set it to reject the file.
|
|
51
|
-
*/
|
|
52
|
-
onFileValidate?: (detail: TFileValidateDetail) => void;
|
|
53
|
-
/** External/programmatic error message shown under the component. */
|
|
54
|
-
errorMessage?: string;
|
|
55
|
-
/** External error flag (combined with internal validation errors). */
|
|
56
|
-
hasError?: boolean;
|
|
57
|
-
/** Disable the whole component (no interaction). */
|
|
58
|
-
disabled?: boolean;
|
|
59
|
-
/** Optional label/title (wraps the component in `PktInputWrapper`). */
|
|
60
|
-
label?: string;
|
|
21
|
+
/** Renderer for queue items (`filename`, `thumbnail`, or custom function). */
|
|
22
|
+
itemRenderer?: keyof typeof ItemRenderers | TItemRenderer;
|
|
61
23
|
/** Help text under the label. */
|
|
62
24
|
helptext?: string | ReactNode;
|
|
63
25
|
/** Expandable help text (dropdown). */
|
|
64
26
|
helptextDropdown?: string | ReactNode;
|
|
65
|
-
/**
|
|
66
|
-
|
|
67
|
-
/** Shows an "optional" tag. */
|
|
68
|
-
optionalTag?: boolean;
|
|
69
|
-
/** Label text for the optional tag. */
|
|
70
|
-
optionalText?: string;
|
|
71
|
-
/** Shows a "required" tag. */
|
|
72
|
-
requiredTag?: boolean;
|
|
73
|
-
/** Label text for the required tag. */
|
|
74
|
-
requiredText?: string;
|
|
75
|
-
/** Extra tag next to the label. */
|
|
76
|
-
tagText?: string | null;
|
|
77
|
-
/** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
|
|
78
|
-
required?: boolean;
|
|
79
|
-
/** Enable image preview modal (only applies to thumbnail renderer). */
|
|
80
|
-
enableImagePreview?: boolean;
|
|
27
|
+
/** Extra operations appended after built-ins (rename/comment). */
|
|
28
|
+
extraOperations?: Array<TQueueItemOperation>;
|
|
81
29
|
}
|
|
82
30
|
interface IFileInputFileUploadProps extends IBaseFileUploadProps, Omit<HTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
|
|
83
31
|
uploadStrategy?: 'form';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import { THeaderMenu, THeaderPosition, THeaderScrollBehavior, TLogOutButtonPlacement, TSlotMenuVariant, THeaderFooterApi, THeaderMenuLocale, IPktHeaderGlobal as ISharedPktHeaderGlobal } from '../../shared-types';
|
|
3
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
4
|
export type { THeaderMenu, THeaderPosition, THeaderScrollBehavior, TLogOutButtonPlacement, TSlotMenuVariant, THeaderFooterApi, THeaderMenuLocale, };
|
|
4
5
|
/** Which header variant `<PktHeader>` renders. */
|
|
5
6
|
export type THeaderType = 'service' | 'global';
|
|
@@ -29,6 +30,8 @@ export interface UserMenuFooterItem {
|
|
|
29
30
|
target: string | (() => void);
|
|
30
31
|
}
|
|
31
32
|
export interface IPktHeader {
|
|
33
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
34
|
+
strings?: TPktStringsOverride;
|
|
32
35
|
children?: ReactNode;
|
|
33
36
|
/** Additional CSS class name(s) to apply to the header */
|
|
34
37
|
className?: string;
|
|
@@ -102,6 +105,8 @@ export interface IPktHeader {
|
|
|
102
105
|
* (in shared-types) with React-specific callbacks and DOM props.
|
|
103
106
|
*/
|
|
104
107
|
export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal {
|
|
108
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
109
|
+
strings?: TPktStringsOverride;
|
|
105
110
|
/** Additional CSS class name(s) to apply to the header */
|
|
106
111
|
className?: string;
|
|
107
112
|
/** Set dark mode on the header */
|
|
@@ -52,3 +52,7 @@ export { PktTextinput } from './textinput/Textinput';
|
|
|
52
52
|
export { PktTimepicker } from './timepicker/Timepicker';
|
|
53
53
|
export * from './interfaces';
|
|
54
54
|
export * from './types';
|
|
55
|
+
export { PktStringsProvider } from './strings/PktStringsProvider';
|
|
56
|
+
export type { IPktStringsProvider } from './strings/PktStringsProvider';
|
|
57
|
+
export { getPktStrings, nb as pktStringsNb, resetPktStrings, setPktStrings, subscribePktStrings, } from '../shared-strings';
|
|
58
|
+
export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride, IPktStringsProps } from '../shared-strings';
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
import { ReactNode, RefAttributes } from 'react';
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
2
3
|
export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
|
|
3
4
|
forId: string;
|
|
4
5
|
label: string;
|
|
5
6
|
helptext?: string | ReactNode;
|
|
6
7
|
helptextDropdown?: string | ReactNode;
|
|
8
|
+
/** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
|
|
7
9
|
helptextDropdownButton?: string;
|
|
8
10
|
counter?: boolean;
|
|
9
11
|
counterCurrent?: number;
|
|
10
12
|
counterMaxLength?: number;
|
|
11
13
|
optionalTag?: boolean;
|
|
14
|
+
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
12
15
|
optionalText?: string;
|
|
13
16
|
requiredTag?: boolean;
|
|
17
|
+
/** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
|
|
14
18
|
requiredText?: string;
|
|
15
19
|
tagText?: string | null;
|
|
16
20
|
hasError?: boolean;
|
|
@@ -25,5 +29,7 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
|
|
|
25
29
|
role?: string;
|
|
26
30
|
counterPosition?: 'top' | 'bottom';
|
|
27
31
|
size?: 'small' | 'medium' | 'xsmall';
|
|
32
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
33
|
+
strings?: TPktStringsOverride;
|
|
28
34
|
}
|
|
29
35
|
export declare const PktInputWrapper: import('react').ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AnchorHTMLAttributes, FC, LinkHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { TRenderLink } from '../../shared-types';
|
|
2
3
|
interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
|
|
3
4
|
href?: string;
|
|
4
5
|
iconName?: string | undefined;
|
|
@@ -6,12 +7,7 @@ interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
|
|
|
6
7
|
iconPosition?: string | undefined;
|
|
7
8
|
external?: boolean;
|
|
8
9
|
target?: string | undefined;
|
|
9
|
-
renderLink?:
|
|
10
|
-
href: string;
|
|
11
|
-
className: string;
|
|
12
|
-
children: ReactNode;
|
|
13
|
-
props: AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
14
|
-
}) => ReactNode;
|
|
10
|
+
renderLink?: TRenderLink<ReactNode, AnchorHTMLAttributes<HTMLAnchorElement>>;
|
|
15
11
|
}
|
|
16
12
|
export declare const PktLink: FC<IPktLink>;
|
|
17
13
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
2
3
|
export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
4
|
id: string;
|
|
4
5
|
name: string;
|
|
@@ -11,9 +12,13 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
11
12
|
hasError?: boolean;
|
|
12
13
|
value?: string;
|
|
13
14
|
optionalTag?: boolean;
|
|
15
|
+
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
14
16
|
optionalText?: string;
|
|
15
17
|
requiredTag?: boolean;
|
|
18
|
+
/** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
|
|
16
19
|
requiredText?: string;
|
|
20
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
21
|
+
strings?: TPktStringsOverride;
|
|
17
22
|
tagText?: string | null;
|
|
18
23
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
19
24
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ChangeEvent, HTMLProps, ReactNode } from 'react';
|
|
2
2
|
import { IPktSearchInputSuggestion } from '../../shared-types/searchinput';
|
|
3
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
4
|
/**
|
|
4
5
|
* React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
|
|
5
6
|
* plus optional rich content and per-row handler.
|
|
@@ -10,6 +11,8 @@ export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' |
|
|
|
10
11
|
onClick?: () => void;
|
|
11
12
|
};
|
|
12
13
|
interface ISearch extends HTMLProps<HTMLInputElement> {
|
|
14
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
15
|
+
strings?: TPktStringsOverride;
|
|
13
16
|
appearance?: 'local' | 'local-with-button' | 'global';
|
|
14
17
|
inputSize?: 'small' | 'medium' | 'xsmall';
|
|
15
18
|
disabled?: boolean;
|
|
@@ -17,6 +20,7 @@ interface ISearch extends HTMLProps<HTMLInputElement> {
|
|
|
17
20
|
id: string;
|
|
18
21
|
label?: string;
|
|
19
22
|
name?: string;
|
|
23
|
+
/** @deprecated Bruk `strings={{ searchinput: { placeholder: '…' } }}` eller `setPktStrings()`. */
|
|
20
24
|
placeholder?: string;
|
|
21
25
|
suggestions?: PktSearchInputSuggestion[];
|
|
22
26
|
value?: string | undefined;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { ReactNode, SelectHTMLAttributes } from 'react';
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
2
3
|
export type { IPktSelectOption, TSelectOption } from '../../shared-types/select';
|
|
3
4
|
export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
5
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
6
|
+
strings?: TPktStringsOverride;
|
|
4
7
|
ariaDescribedby?: string;
|
|
5
8
|
ariaLabelledby?: string;
|
|
6
9
|
children?: ReactNode | ReactNode[];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
|
+
export declare const PktStringsContext: import('react').Context<TPktStringsOverride | undefined>;
|
|
4
|
+
export interface IPktStringsProvider {
|
|
5
|
+
/** Tekstene som skal gjelde for dette undertreet. */
|
|
6
|
+
strings: TPktStringsOverride;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Overstyrer Punkt-tekster for et undertre.
|
|
11
|
+
*
|
|
12
|
+
* Providere kan nestes — en indre provider merges oppå den ytre, og en `strings`-prop
|
|
13
|
+
* på en enkelt komponent vinner uansett over begge.
|
|
14
|
+
*
|
|
15
|
+
* ```tsx
|
|
16
|
+
* <PktStringsProvider strings={{ forms: { optional: 'Kan stå tomt' } }}>
|
|
17
|
+
* <PktTextinput id="navn" name="navn" label="Navn" />
|
|
18
|
+
* </PktStringsProvider>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare const PktStringsProvider: ({ strings, children }: IPktStringsProvider) => import("react").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { TTagSkin } from '../../shared-types';
|
|
3
|
+
import { TPktStringsOverride } from '../../shared-strings';
|
|
3
4
|
interface BasePktTagProps {
|
|
5
|
+
/** Overstyrer tekster for denne komponenten. */
|
|
6
|
+
strings?: TPktStringsOverride;
|
|
4
7
|
skin?: TTagSkin;
|
|
5
8
|
textStyle?: 'normal-text' | 'thin-text';
|
|
6
9
|
size?: 'small' | 'medium' | 'large';
|