@oslokommune/punkt-react 12.43.2 → 13.0.1
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 +48 -0
- package/dist/index.d.ts +60 -60
- package/dist/punkt-react.es.js +12913 -12557
- package/dist/punkt-react.umd.js +376 -374
- package/package.json +5 -5
- package/src/components/checkbox/Checkbox.test.tsx +1 -10
- package/src/components/checkbox/Checkbox.tsx +50 -36
- package/src/components/inputwrapper/InputWrapper.tsx +177 -27
- package/src/components/radio/RadioButton.test.tsx +4 -8
- package/src/components/radio/RadioButton.tsx +52 -35
- package/src/components/select/Select.test.tsx +27 -35
- package/src/components/select/Select.tsx +72 -53
- package/src/components/textarea/Textarea.test.tsx +4 -4
- package/src/components/textarea/Textarea.tsx +122 -43
- package/src/components/textinput/Textinput.test.tsx +12 -11
- package/src/components/textinput/Textinput.tsx +167 -43
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,54 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [13.0.1](https://github.com/oslokommune/punkt/compare/13.0.0...13.0.1) (2025-07-04)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* InputWrapper skjule helptext, radio/check eksplisitt onChange (#2678). - Når InputWrapper har useWrapper={false} må også helptext skjules
|
|
18
|
+
- Av en eller annen grunn måtte jeg sette onChange eksplisitt, ikke med ...props, på radio og checkbox
|
|
19
|
+
- Trenger å sette defaultChecked både når checked sendes inn og når defaultChecked sendes inn
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Chores
|
|
23
|
+
Ingen
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [13.0.0](https://github.com/oslokommune/punkt/compare/12.43.2...13.0.0) (2025-07-04)
|
|
29
|
+
|
|
30
|
+
### ⚠ BREAKING CHANGES
|
|
31
|
+
* Skjemaelementer tilbake til ren React. BREAKING CHANGE: select vil ikke lenger ta i mot et options-array, await window.customElements.whenDefined('pkt-xxx) må fjernes fra React-tester (ellers vil testene feile), mulig behov for justeringer i tester, ta gjerne en visuell og funksjonell avsjekk ved oppdatering
|
|
32
|
+
|
|
33
|
+
Skjemaelementer i React-pakken:
|
|
34
|
+
- Inputwrapper: Skriv tilbake til React, oppdater tester, oppdatere JSON med nye props tatt fra inputwrapper-elements
|
|
35
|
+
- TextInput: Skriv tilbake til React, oppdater tester
|
|
36
|
+
- Select: Skriv tilbake til React, oppdater tester (vil ikke lenger ta i mot et options-array)
|
|
37
|
+
- Checkbox: Skriv tilbake til React, oppdater tester
|
|
38
|
+
- TextArea: Skriv tilbake til React, oppdater tester
|
|
39
|
+
- RadioButton: Skriv tilbake til React, oppdater tester
|
|
40
|
+
- Switch: Skriv tilbake til React, oppdater tester
|
|
41
|
+
- Oppdatere test-utils for nevnte komponenter
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### Features
|
|
45
|
+
Ingen
|
|
46
|
+
|
|
47
|
+
### Bug Fixes
|
|
48
|
+
Ingen
|
|
49
|
+
|
|
50
|
+
### Chores
|
|
51
|
+
Ingen
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
|
|
8
56
|
## [12.42.12](https://github.com/oslokommune/punkt/compare/12.42.11...12.42.12) (2025-06-23)
|
|
9
57
|
|
|
10
58
|
### ⚠ BREAKING CHANGES
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
3
|
import { AnchorHTMLAttributes } from 'react';
|
|
4
|
+
import { ChangeEvent } from 'react';
|
|
4
5
|
import { ChangeEventHandler } from 'react';
|
|
5
6
|
import { default as default_2 } from 'react';
|
|
6
7
|
import { FC } from 'react';
|
|
7
8
|
import { FocusEventHandler } from 'react';
|
|
8
|
-
import { ForwardedRef } from 'react';
|
|
9
9
|
import { ForwardRefExoticComponent } from 'react';
|
|
10
10
|
import { HTMLAttributes } from 'react';
|
|
11
11
|
import { HTMLProps } from 'react';
|
|
@@ -20,14 +20,13 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
|
20
20
|
import { LegacyRef } from 'react';
|
|
21
21
|
import { LinkHTMLAttributes } from 'react';
|
|
22
22
|
import { MouseEventHandler } from 'react';
|
|
23
|
-
import { PktInputWrapper as PktInputWrapper_2 } from '@oslokommune/punkt-elements';
|
|
24
23
|
import * as React_2 from 'react';
|
|
25
24
|
import { ReactElement } from 'react';
|
|
26
25
|
import { ReactNode } from 'react';
|
|
26
|
+
import { RefAttributes } from 'react';
|
|
27
27
|
import { SelectHTMLAttributes } from 'react';
|
|
28
28
|
import { TextareaHTMLAttributes } from 'react';
|
|
29
29
|
import { TPktAccordionSkin } from '@oslokommune/punkt-elements';
|
|
30
|
-
import { TSelectOption } from '@oslokommune/punkt-elements';
|
|
31
30
|
|
|
32
31
|
declare type Booleanish = boolean | 'true' | 'false';
|
|
33
32
|
|
|
@@ -145,26 +144,20 @@ export declare interface IPktCard extends PktElType {
|
|
|
145
144
|
})[];
|
|
146
145
|
}
|
|
147
146
|
|
|
148
|
-
export declare interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
|
|
147
|
+
export declare interface IPktCheckbox extends default_2.InputHTMLAttributes<HTMLInputElement> {
|
|
149
148
|
id: string;
|
|
150
|
-
name?: string;
|
|
151
|
-
label: string;
|
|
152
149
|
hasTile?: boolean;
|
|
150
|
+
disabled?: boolean;
|
|
151
|
+
label?: string;
|
|
152
|
+
checkHelptext?: string;
|
|
153
153
|
hasError?: boolean;
|
|
154
154
|
defaultChecked?: boolean;
|
|
155
|
-
|
|
155
|
+
checked?: boolean;
|
|
156
156
|
value?: string;
|
|
157
|
-
checkHelptext?: string | ReactNode | ReactNode[];
|
|
158
157
|
isSwitch?: boolean;
|
|
159
158
|
hideLabel?: boolean;
|
|
160
159
|
labelPosition?: 'right' | 'left';
|
|
161
|
-
checked?: boolean;
|
|
162
|
-
ref?: ForwardedRef<HTMLInputElement>;
|
|
163
160
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
164
|
-
onInput?: ChangeEventHandler<HTMLInputElement>;
|
|
165
|
-
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
166
|
-
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
167
|
-
onValueChange?: (e: CustomEvent) => void;
|
|
168
161
|
}
|
|
169
162
|
|
|
170
163
|
export declare interface IPktCombobox extends ExtendedCombobox {
|
|
@@ -291,11 +284,11 @@ declare interface IPktIcon extends PktElType {
|
|
|
291
284
|
'aria-hidden'?: Booleanish | undefined;
|
|
292
285
|
}
|
|
293
286
|
|
|
294
|
-
export declare interface IPktInputWrapper extends
|
|
287
|
+
export declare interface IPktInputWrapper extends RefAttributes<HTMLElement> {
|
|
295
288
|
forId: string;
|
|
296
289
|
label: string;
|
|
297
|
-
helptext?: string | ReactNode
|
|
298
|
-
helptextDropdown?: string | ReactNode
|
|
290
|
+
helptext?: string | ReactNode;
|
|
291
|
+
helptextDropdown?: string | ReactNode;
|
|
299
292
|
helptextDropdownButton?: string;
|
|
300
293
|
counter?: boolean;
|
|
301
294
|
counterCurrent?: number;
|
|
@@ -305,14 +298,16 @@ export declare interface IPktInputWrapper extends Omit<PktElType, 'ref'> {
|
|
|
305
298
|
requiredTag?: boolean;
|
|
306
299
|
requiredText?: string;
|
|
307
300
|
hasError?: boolean;
|
|
308
|
-
errorMessage?: string | ReactNode
|
|
301
|
+
errorMessage?: string | ReactNode;
|
|
309
302
|
disabled?: boolean;
|
|
310
303
|
inline?: boolean;
|
|
311
304
|
ariaDescribedby?: string;
|
|
312
305
|
useWrapper?: boolean;
|
|
306
|
+
children?: ReactNode;
|
|
307
|
+
className?: string;
|
|
313
308
|
hasFieldset?: boolean;
|
|
314
|
-
|
|
315
|
-
|
|
309
|
+
role?: string;
|
|
310
|
+
counterPosition?: 'top' | 'bottom';
|
|
316
311
|
}
|
|
317
312
|
|
|
318
313
|
declare interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
|
|
@@ -359,22 +354,18 @@ export declare interface IPktModal extends PktElType {
|
|
|
359
354
|
export declare interface IPktProgressbar extends ExtendedProgressbar {
|
|
360
355
|
}
|
|
361
356
|
|
|
362
|
-
export declare interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
|
|
357
|
+
export declare interface IPktRadioButton extends default_2.InputHTMLAttributes<HTMLInputElement> {
|
|
363
358
|
id: string;
|
|
364
359
|
name: string;
|
|
365
360
|
label: string;
|
|
366
361
|
hasTile?: boolean;
|
|
367
|
-
hasError?: boolean;
|
|
368
|
-
defaultChecked?: boolean;
|
|
369
362
|
disabled?: boolean;
|
|
363
|
+
checkHelptext?: string | default_2.ReactNode | default_2.ReactNode[];
|
|
364
|
+
defaultChecked?: boolean;
|
|
365
|
+
checked?: boolean;
|
|
366
|
+
hasError?: boolean;
|
|
370
367
|
value?: string;
|
|
371
|
-
checkHelptext?: string | ReactNode | ReactNode[];
|
|
372
|
-
ref?: ForwardedRef<HTMLInputElement>;
|
|
373
368
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
374
|
-
onInput?: ChangeEventHandler<HTMLInputElement>;
|
|
375
|
-
onBlur?: FocusEventHandler<HTMLInputElement>;
|
|
376
|
-
onFocus?: FocusEventHandler<HTMLInputElement>;
|
|
377
|
-
onValueChange?: (e: CustomEvent) => void;
|
|
378
369
|
}
|
|
379
370
|
|
|
380
371
|
declare interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
@@ -392,18 +383,15 @@ declare interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement
|
|
|
392
383
|
fullwidth?: boolean;
|
|
393
384
|
label: string;
|
|
394
385
|
name?: string;
|
|
395
|
-
options?: TSelectOption[];
|
|
396
386
|
optionalTag?: boolean;
|
|
397
387
|
optionalText?: string;
|
|
398
388
|
requiredTag?: boolean;
|
|
399
389
|
requiredText?: string;
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
onValueChange?: (e: CustomEvent) => void;
|
|
406
|
-
onToggleHelpText?: (e: CustomEvent) => void;
|
|
390
|
+
options?: Array<{
|
|
391
|
+
value: string;
|
|
392
|
+
label: string;
|
|
393
|
+
disabled?: boolean;
|
|
394
|
+
}>;
|
|
407
395
|
}
|
|
408
396
|
|
|
409
397
|
export declare interface IPktStep {
|
|
@@ -485,10 +473,12 @@ export declare interface IPktTag extends PktElType {
|
|
|
485
473
|
}
|
|
486
474
|
|
|
487
475
|
export declare interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
476
|
+
id: string;
|
|
488
477
|
ariaDescribedby?: string;
|
|
489
478
|
ariaLabelledby?: string;
|
|
490
479
|
counter?: boolean;
|
|
491
480
|
counterMaxLength?: number;
|
|
481
|
+
disabled?: boolean;
|
|
492
482
|
errorMessage?: string | ReactNode | ReactNode[];
|
|
493
483
|
hasError?: boolean;
|
|
494
484
|
helptext?: string | ReactNode | ReactNode[];
|
|
@@ -496,28 +486,33 @@ export declare interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAre
|
|
|
496
486
|
helptextDropdownButton?: string;
|
|
497
487
|
inline?: boolean;
|
|
498
488
|
fullwidth?: boolean;
|
|
499
|
-
label
|
|
489
|
+
label: string;
|
|
490
|
+
name?: string;
|
|
500
491
|
optionalTag?: boolean;
|
|
501
492
|
optionalText?: string;
|
|
502
493
|
requiredTag?: boolean;
|
|
503
494
|
requiredText?: string;
|
|
495
|
+
placeholder?: string;
|
|
496
|
+
rows?: number;
|
|
504
497
|
useWrapper?: boolean;
|
|
505
498
|
value?: string;
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
onValueChange?: (e: CustomEvent) => void;
|
|
512
|
-
onToggleHelpText?: (e: CustomEvent) => void;
|
|
513
|
-
dataTestid?: string;
|
|
499
|
+
autocomplete?: string;
|
|
500
|
+
minLength?: number;
|
|
501
|
+
maxLength?: number;
|
|
502
|
+
readOnly?: boolean;
|
|
503
|
+
required?: boolean;
|
|
514
504
|
skipForwardTestid?: boolean;
|
|
505
|
+
onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
|
|
515
506
|
}
|
|
516
507
|
|
|
517
508
|
export declare interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
|
|
509
|
+
id: string;
|
|
510
|
+
ariaDescribedby?: string;
|
|
518
511
|
ariaLabelledby?: string;
|
|
512
|
+
autocomplete?: string;
|
|
519
513
|
counter?: boolean;
|
|
520
514
|
counterMaxLength?: number;
|
|
515
|
+
disabled?: boolean;
|
|
521
516
|
errorMessage?: string | ReactNode | ReactNode[];
|
|
522
517
|
hasError?: boolean;
|
|
523
518
|
helptext?: string | ReactNode | ReactNode[];
|
|
@@ -526,24 +521,29 @@ export declare interface IPktTextinput extends InputHTMLAttributes<HTMLInputElem
|
|
|
526
521
|
iconNameRight?: string;
|
|
527
522
|
inline?: boolean;
|
|
528
523
|
fullwidth?: boolean;
|
|
529
|
-
label
|
|
524
|
+
label: string;
|
|
525
|
+
name?: string;
|
|
530
526
|
optionalTag?: boolean;
|
|
531
527
|
optionalText?: string;
|
|
532
528
|
requiredTag?: boolean;
|
|
533
529
|
requiredText?: string;
|
|
530
|
+
placeholder?: string;
|
|
534
531
|
prefix?: string;
|
|
535
532
|
suffix?: string;
|
|
533
|
+
type?: string;
|
|
536
534
|
useWrapper?: boolean;
|
|
537
535
|
value?: string;
|
|
538
536
|
omitSearchIcon?: boolean;
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
537
|
+
min?: number | string;
|
|
538
|
+
max?: number | string;
|
|
539
|
+
minLength?: number;
|
|
540
|
+
maxLength?: number;
|
|
541
|
+
step?: string;
|
|
542
|
+
size?: number;
|
|
543
|
+
readonly?: boolean;
|
|
544
|
+
required?: boolean;
|
|
546
545
|
dataTestid?: string;
|
|
546
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
547
547
|
skipForwardTestid?: boolean;
|
|
548
548
|
}
|
|
549
549
|
|
|
@@ -639,7 +639,7 @@ export declare const PktButton: default_2.ForwardRefExoticComponent<IPktButton &
|
|
|
639
639
|
|
|
640
640
|
export declare const PktCard: FC<IPktCard>;
|
|
641
641
|
|
|
642
|
-
export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox
|
|
642
|
+
export declare const PktCheckbox: default_2.ForwardRefExoticComponent<IPktCheckbox & default_2.RefAttributes<HTMLInputElement>>;
|
|
643
643
|
|
|
644
644
|
export declare const PktCombobox: FC<IPktCombobox>;
|
|
645
645
|
|
|
@@ -683,7 +683,7 @@ export declare const PktIcon: FC<IPktIcon>;
|
|
|
683
683
|
*/
|
|
684
684
|
export declare const PktInput: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
685
685
|
|
|
686
|
-
export declare const PktInputWrapper:
|
|
686
|
+
export declare const PktInputWrapper: ForwardRefExoticComponent<Omit<IPktInputWrapper, "ref"> & RefAttributes<HTMLDivElement>>;
|
|
687
687
|
|
|
688
688
|
export declare const PktLink: FC<IPktLink>;
|
|
689
689
|
|
|
@@ -699,11 +699,11 @@ export declare const PktPreview: default_2.FC<PreviewProps>;
|
|
|
699
699
|
|
|
700
700
|
export declare const PktProgressbar: default_2.ForwardRefExoticComponent<Omit<IPktProgressbar, "ref"> & default_2.RefAttributes<HTMLElement>>;
|
|
701
701
|
|
|
702
|
-
export declare const PktRadioButton: default_2.ForwardRefExoticComponent<IPktRadioButton
|
|
702
|
+
export declare const PktRadioButton: default_2.ForwardRefExoticComponent<IPktRadioButton & default_2.RefAttributes<HTMLInputElement>>;
|
|
703
703
|
|
|
704
704
|
export declare const PktSearchInput: default_2.ForwardRefExoticComponent<(Omit<ISearchForm, "ref"> | Omit<ISearchInput, "ref">) & default_2.RefAttributes<HTMLInputElement>>;
|
|
705
705
|
|
|
706
|
-
export declare const PktSelect:
|
|
706
|
+
export declare const PktSelect: ForwardRefExoticComponent<IPktSelectProps & RefAttributes<HTMLSelectElement>>;
|
|
707
707
|
|
|
708
708
|
export declare const PktStep: ({ children, className, status, title }: IPktStep) => JSX_2.Element;
|
|
709
709
|
|
|
@@ -725,9 +725,9 @@ export declare const PktTabs: default_2.ForwardRefExoticComponent<IPktTabs & def
|
|
|
725
725
|
|
|
726
726
|
export declare const PktTag: FC<IPktTag>;
|
|
727
727
|
|
|
728
|
-
export declare const PktTextarea:
|
|
728
|
+
export declare const PktTextarea: ForwardRefExoticComponent<IPktTextarea & RefAttributes<HTMLTextAreaElement>>;
|
|
729
729
|
|
|
730
|
-
export declare const PktTextinput: default_2.ForwardRefExoticComponent<
|
|
730
|
+
export declare const PktTextinput: default_2.ForwardRefExoticComponent<IPktTextinput & default_2.RefAttributes<HTMLInputElement>>;
|
|
731
731
|
|
|
732
732
|
declare interface PreviewProps {
|
|
733
733
|
children?: ReactNode;
|