@navikt/ds-react 4.6.0 → 4.7.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/_docs.json +1711 -169
- package/cjs/chips/Chips.js +1 -2
- package/cjs/date/DateInput.js +1 -0
- package/cjs/form/Select.js +1 -0
- package/cjs/form/TextField.js +1 -0
- package/cjs/form/Textarea.js +1 -0
- package/cjs/form/checkbox/Checkbox.js +1 -1
- package/cjs/form/combobox/ClearButton.js +27 -0
- package/cjs/form/combobox/Combobox.js +78 -0
- package/cjs/form/combobox/ComboboxProvider.js +99 -0
- package/cjs/form/combobox/ComboboxWrapper.js +51 -0
- package/cjs/form/combobox/FilteredOptions/CheckIcon.js +11 -0
- package/cjs/form/combobox/FilteredOptions/FilteredOptions.js +46 -0
- package/cjs/form/combobox/FilteredOptions/filteredOptionsContext.js +208 -0
- package/cjs/form/combobox/Input/Input.js +143 -0
- package/cjs/form/combobox/Input/inputContext.js +86 -0
- package/cjs/form/combobox/SelectedOptions/SelectedOptions.js +27 -0
- package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js +107 -0
- package/cjs/form/combobox/ToggleListButton.js +36 -0
- package/cjs/form/combobox/customOptionsContext.js +56 -0
- package/cjs/form/combobox/index.js +8 -0
- package/cjs/form/combobox/package.json +6 -0
- package/cjs/form/combobox/types.js +2 -0
- package/cjs/form/index.js +3 -1
- package/cjs/timeline/AxisLabels.js +12 -12
- package/cjs/timeline/Timeline.js +2 -2
- package/cjs/util/usePrevious.js +18 -0
- package/esm/chips/Chips.js +1 -2
- package/esm/chips/Chips.js.map +1 -1
- package/esm/date/DateInput.js +1 -0
- package/esm/date/DateInput.js.map +1 -1
- package/esm/date/datepicker/TableHead.d.ts +1 -0
- package/esm/form/Fieldset/useFieldset.d.ts +1 -1
- package/esm/form/Select.js +1 -0
- package/esm/form/Select.js.map +1 -1
- package/esm/form/TextField.js +1 -0
- package/esm/form/TextField.js.map +1 -1
- package/esm/form/Textarea.js +1 -0
- package/esm/form/Textarea.js.map +1 -1
- package/esm/form/checkbox/Checkbox.js +1 -1
- package/esm/form/checkbox/Checkbox.js.map +1 -1
- package/esm/form/checkbox/useCheckbox.d.ts +4 -4
- package/esm/form/combobox/ClearButton.d.ts +7 -0
- package/esm/form/combobox/ClearButton.js +21 -0
- package/esm/form/combobox/ClearButton.js.map +1 -0
- package/esm/form/combobox/Combobox.d.ts +4 -0
- package/esm/form/combobox/Combobox.js +50 -0
- package/esm/form/combobox/Combobox.js.map +1 -0
- package/esm/form/combobox/ComboboxProvider.d.ts +26 -0
- package/esm/form/combobox/ComboboxProvider.js +72 -0
- package/esm/form/combobox/ComboboxProvider.js.map +1 -0
- package/esm/form/combobox/ComboboxWrapper.d.ts +14 -0
- package/esm/form/combobox/ComboboxWrapper.js +24 -0
- package/esm/form/combobox/ComboboxWrapper.js.map +1 -0
- package/esm/form/combobox/FilteredOptions/CheckIcon.d.ts +3 -0
- package/esm/form/combobox/FilteredOptions/CheckIcon.js +7 -0
- package/esm/form/combobox/FilteredOptions/CheckIcon.js.map +1 -0
- package/esm/form/combobox/FilteredOptions/FilteredOptions.d.ts +3 -0
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js +42 -0
- package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map +1 -0
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.d.ts +27 -0
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js +178 -0
- package/esm/form/combobox/FilteredOptions/filteredOptionsContext.js.map +1 -0
- package/esm/form/combobox/Input/Input.d.ts +10 -0
- package/esm/form/combobox/Input/Input.js +116 -0
- package/esm/form/combobox/Input/Input.js.map +1 -0
- package/esm/form/combobox/Input/inputContext.d.ts +19 -0
- package/esm/form/combobox/Input/inputContext.js +59 -0
- package/esm/form/combobox/Input/inputContext.js.map +1 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.d.ts +8 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js +23 -0
- package/esm/form/combobox/SelectedOptions/SelectedOptions.js.map +1 -0
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.d.ts +17 -0
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js +77 -0
- package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map +1 -0
- package/esm/form/combobox/ToggleListButton.d.ts +6 -0
- package/esm/form/combobox/ToggleListButton.js +11 -0
- package/esm/form/combobox/ToggleListButton.js.map +1 -0
- package/esm/form/combobox/customOptionsContext.d.ts +11 -0
- package/esm/form/combobox/customOptionsContext.js +29 -0
- package/esm/form/combobox/customOptionsContext.js.map +1 -0
- package/esm/form/combobox/index.d.ts +2 -0
- package/esm/form/combobox/index.js +2 -0
- package/esm/form/combobox/index.js.map +1 -0
- package/esm/form/combobox/types.d.ts +119 -0
- package/esm/form/combobox/types.js +2 -0
- package/esm/form/combobox/types.js.map +1 -0
- package/esm/form/index.d.ts +1 -0
- package/esm/form/index.js +1 -0
- package/esm/form/index.js.map +1 -1
- package/esm/form/radio/useRadio.d.ts +4 -4
- package/esm/form/useFormField.d.ts +11 -10
- package/esm/form/useFormField.js.map +1 -1
- package/esm/timeline/AxisLabels.d.ts +7 -5
- package/esm/timeline/AxisLabels.js +12 -12
- package/esm/timeline/AxisLabels.js.map +1 -1
- package/esm/timeline/Timeline.d.ts +6 -0
- package/esm/timeline/Timeline.js +2 -2
- package/esm/timeline/Timeline.js.map +1 -1
- package/esm/timeline/utils/types.external.d.ts +5 -0
- package/esm/util/usePrevious.d.ts +2 -0
- package/esm/util/usePrevious.js +17 -0
- package/esm/util/usePrevious.js.map +1 -0
- package/package.json +2 -2
- package/src/chips/Chips.tsx +1 -1
- package/src/date/DateInput.tsx +1 -0
- package/src/form/Select.tsx +1 -0
- package/src/form/TextField.tsx +2 -0
- package/src/form/Textarea.tsx +1 -0
- package/src/form/checkbox/Checkbox.tsx +5 -1
- package/src/form/combobox/ClearButton.tsx +29 -0
- package/src/form/combobox/Combobox.tsx +136 -0
- package/src/form/combobox/ComboboxProvider.tsx +99 -0
- package/src/form/combobox/ComboboxWrapper.tsx +63 -0
- package/src/form/combobox/FilteredOptions/CheckIcon.tsx +23 -0
- package/src/form/combobox/FilteredOptions/FilteredOptions.tsx +106 -0
- package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx +266 -0
- package/src/form/combobox/Input/Input.tsx +170 -0
- package/src/form/combobox/Input/inputContext.tsx +127 -0
- package/src/form/combobox/SelectedOptions/SelectedOptions.tsx +45 -0
- package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx +147 -0
- package/src/form/combobox/ToggleListButton.tsx +37 -0
- package/src/form/combobox/combobox.stories.tsx +413 -0
- package/src/form/combobox/combobox.test.tsx +123 -0
- package/src/form/combobox/customOptionsContext.tsx +57 -0
- package/src/form/combobox/index.ts +2 -0
- package/src/form/combobox/types.ts +122 -0
- package/src/form/index.ts +1 -0
- package/src/form/useFormField.ts +19 -1
- package/src/timeline/AxisLabels.tsx +23 -13
- package/src/timeline/Timeline.tsx +18 -2
- package/src/timeline/utils/types.external.ts +6 -0
- package/src/util/usePrevious.ts +19 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import React, { ChangeEvent, InputHTMLAttributes } from "react";
|
|
2
|
+
import { FormFieldProps } from "../useFormField";
|
|
3
|
+
export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
|
|
4
|
+
/**
|
|
5
|
+
* Combobox label
|
|
6
|
+
*/
|
|
7
|
+
label: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* List of options to use for autocompletion
|
|
10
|
+
*/
|
|
11
|
+
options: string[];
|
|
12
|
+
/**
|
|
13
|
+
* If enabled, adds an option to add the value of the input as an option whenever there are no options matching the value.
|
|
14
|
+
*/
|
|
15
|
+
allowNewValues?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* If "true" adds a button to clear the value in the input field
|
|
18
|
+
*/
|
|
19
|
+
clearButton?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Custom name for the clear button. Requires "clearButton" to be "true".
|
|
22
|
+
*
|
|
23
|
+
* @default "Tøm"
|
|
24
|
+
*/
|
|
25
|
+
clearButtonLabel?: string;
|
|
26
|
+
/**
|
|
27
|
+
* A list of options to display in the dropdown list.
|
|
28
|
+
* If provided, this overrides the internal search logic in the component.
|
|
29
|
+
* Useful for e.g. searching on a server or when overriding the search algorithm to search for synonyms or similar.
|
|
30
|
+
*/
|
|
31
|
+
filteredOptions?: string[];
|
|
32
|
+
/**
|
|
33
|
+
* Optionally hide the label visually.
|
|
34
|
+
* Not recommended, but can be considered for e.g. search fields in the top menu.
|
|
35
|
+
*/
|
|
36
|
+
hideLabel?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Custom class name for the input field.
|
|
39
|
+
*
|
|
40
|
+
* If used for styling, please consider using tokens instead.
|
|
41
|
+
*/
|
|
42
|
+
inputClassName?: string | undefined;
|
|
43
|
+
/**
|
|
44
|
+
* Controlled open/closed state for the dropdown list
|
|
45
|
+
*/
|
|
46
|
+
isListOpen?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Set to "true" when doing an async search and waiting for new filteredOptions.
|
|
49
|
+
*
|
|
50
|
+
* Will show a spinner in the dropdown and announce to screen readers that it is loading.
|
|
51
|
+
*/
|
|
52
|
+
isLoading?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Set to "true" to allow multiple selections
|
|
55
|
+
*
|
|
56
|
+
* This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
|
|
57
|
+
*
|
|
58
|
+
*/
|
|
59
|
+
isMultiSelect?: boolean;
|
|
60
|
+
/**
|
|
61
|
+
* Callback function triggered whenever the value of the input field is triggered.
|
|
62
|
+
*
|
|
63
|
+
* @param event
|
|
64
|
+
* @returns
|
|
65
|
+
*/
|
|
66
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
67
|
+
/**
|
|
68
|
+
* Callback function triggered whenever the input field is cleared
|
|
69
|
+
*
|
|
70
|
+
* @param event
|
|
71
|
+
* @returns
|
|
72
|
+
*/
|
|
73
|
+
onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
|
|
74
|
+
/**
|
|
75
|
+
* Callback function triggered whenever an option is selected or de-selected
|
|
76
|
+
*
|
|
77
|
+
* @param option
|
|
78
|
+
* @param isSelected
|
|
79
|
+
* @returns
|
|
80
|
+
*/
|
|
81
|
+
onToggleSelected?: (option: string, isSelected: boolean) => void;
|
|
82
|
+
/**
|
|
83
|
+
* List of selected options.
|
|
84
|
+
*
|
|
85
|
+
* Use this prop when controlling the selected state outside for the component,
|
|
86
|
+
* e.g. for a filter, where options can be toggled elsewhere/programmatically.
|
|
87
|
+
*/
|
|
88
|
+
selectedOptions?: string[];
|
|
89
|
+
/**
|
|
90
|
+
* Set to "true" to enable inline autocomplete.
|
|
91
|
+
*
|
|
92
|
+
* @default false
|
|
93
|
+
*/
|
|
94
|
+
shouldAutocomplete?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* When set to "true" displays selected options as Chips before the input field
|
|
97
|
+
*
|
|
98
|
+
* @default true
|
|
99
|
+
*/
|
|
100
|
+
shouldShowSelectedOptions?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* When set to "true" displays the toggle button for opening/closing the dropdown list
|
|
103
|
+
*
|
|
104
|
+
* @default true
|
|
105
|
+
*/
|
|
106
|
+
toggleListButton?: boolean;
|
|
107
|
+
/**
|
|
108
|
+
* Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
|
|
109
|
+
*
|
|
110
|
+
* @default "Alternativer"
|
|
111
|
+
*/
|
|
112
|
+
toggleListButtonLabel?: string;
|
|
113
|
+
/**
|
|
114
|
+
* Set this to override the value of the input field.
|
|
115
|
+
*
|
|
116
|
+
* This converts the input to a controlled input, so you have to use onChange to update the value.
|
|
117
|
+
*/
|
|
118
|
+
value?: string;
|
|
119
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/form/combobox/types.ts"],"names":[],"mappings":""}
|
package/esm/form/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export { ErrorSummary, type ErrorSummaryProps } from "./error-summary";
|
|
|
4
4
|
export { Fieldset, FieldsetContext, type FieldsetProps } from "./Fieldset";
|
|
5
5
|
export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, } from "./radio";
|
|
6
6
|
export { Search, type SearchClearEvent, type SearchProps } from "./search";
|
|
7
|
+
export { Combobox as UNSAFE_Combobox, type ComboboxProps } from "./combobox";
|
|
7
8
|
export { default as Select, type SelectProps } from "./Select";
|
|
8
9
|
export { default as Switch, type SwitchProps } from "./Switch";
|
|
9
10
|
export { Counter, default as Textarea, type TextareaProps } from "./Textarea";
|
package/esm/form/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export { ErrorSummary } from "./error-summary";
|
|
|
4
4
|
export { Fieldset, FieldsetContext } from "./Fieldset";
|
|
5
5
|
export { Radio, RadioGroup, } from "./radio";
|
|
6
6
|
export { Search } from "./search";
|
|
7
|
+
export { Combobox as UNSAFE_Combobox } from "./combobox";
|
|
7
8
|
export { default as Select } from "./Select";
|
|
8
9
|
export { default as Switch } from "./Switch";
|
|
9
10
|
export { Counter, default as Textarea } from "./Textarea";
|
package/esm/form/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,IAAI,iBAAiB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,aAAa,GAGd,MAAM,YAAY,CAAC;AACpB,OAAO,EAEL,OAAO,IAAI,iBAAiB,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAA0B,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC3E,OAAO,EACL,KAAK,EACL,UAAU,GAGX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,MAAM,EAA2C,MAAM,UAAU,CAAC;AAC3E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAsB,MAAM,YAAY,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAuB,MAAM,aAAa,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { RadioProps } from "./Radio";
|
|
|
3
3
|
* Handles props for Radios in context with Fieldset and RadioGroup
|
|
4
4
|
*/
|
|
5
5
|
export declare const useRadio: (props: RadioProps) => {
|
|
6
|
-
readOnly:
|
|
6
|
+
readOnly: boolean | undefined;
|
|
7
7
|
inputProps: {
|
|
8
8
|
name: string | undefined;
|
|
9
9
|
defaultChecked: boolean | undefined;
|
|
@@ -12,10 +12,10 @@ export declare const useRadio: (props: RadioProps) => {
|
|
|
12
12
|
onClick: (e: any) => void;
|
|
13
13
|
required: boolean | undefined;
|
|
14
14
|
type: string;
|
|
15
|
-
"aria-describedby": string | undefined;
|
|
16
|
-
disabled: boolean | undefined;
|
|
17
|
-
"aria-invalid"?: boolean | undefined;
|
|
18
15
|
id: string;
|
|
16
|
+
"aria-invalid"?: boolean | undefined;
|
|
17
|
+
"aria-describedby"?: string | undefined;
|
|
18
|
+
disabled?: boolean | undefined;
|
|
19
19
|
};
|
|
20
20
|
showErrorMsg: boolean;
|
|
21
21
|
hasError: boolean;
|
|
@@ -30,20 +30,21 @@ export interface FormFieldProps {
|
|
|
30
30
|
*/
|
|
31
31
|
readOnly?: boolean;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
* Handles props and their state for various form-fields in context with Fieldset
|
|
35
|
-
*/
|
|
36
|
-
export declare const useFormField: (props: FormFieldProps, prefix: string) => {
|
|
33
|
+
export interface FormFieldType {
|
|
37
34
|
showErrorMsg: boolean;
|
|
38
35
|
hasError: boolean;
|
|
39
36
|
errorId: string;
|
|
40
37
|
inputDescriptionId: string;
|
|
41
|
-
size: "
|
|
42
|
-
readOnly: true | undefined;
|
|
38
|
+
size: "small" | "medium";
|
|
43
39
|
inputProps: {
|
|
44
|
-
"aria-describedby": string | undefined;
|
|
45
|
-
disabled: boolean | undefined;
|
|
46
|
-
"aria-invalid"?: boolean | undefined;
|
|
47
40
|
id: string;
|
|
41
|
+
"aria-invalid"?: boolean;
|
|
42
|
+
"aria-describedby"?: string;
|
|
43
|
+
disabled?: boolean;
|
|
48
44
|
};
|
|
49
|
-
|
|
45
|
+
readOnly?: boolean;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Handles props and their state for various form-fields in context with Fieldset
|
|
49
|
+
*/
|
|
50
|
+
export declare const useFormField: (props: FormFieldProps, prefix: string) => FormFieldType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAiDjC;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAqB,EACrB,MAAc,EACC,EAAE;;IACjB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpD,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,GAAG,MAAM,UAAU,KAAK,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IACtD,MAAM,QAAQ,GACZ,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC;IAErE,MAAM,QAAQ,GACZ,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA,CAAC,CAAC;IACzD,MAAM,YAAY,GAChB,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,SAAS,CAAC;IAElE,MAAM,WAAW,qBAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC;IAEtE,IAAI,CAAC,KAAa,aAAb,KAAK,uBAAL,KAAK,CAAU,QAAQ,KAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;QACrE,OAAO,CAAC,IAAI,CACV,yFAAyF,CAC1F,CAAC;QACF,OAAO,CAAC,IAAI,CACV,gGAAgG,CACjG,CAAC;KACH;IAED,OAAO;QACL,YAAY;QACZ,QAAQ;QACR,OAAO;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,QAAQ;QACR,UAAU,gCACR,EAAE,IACC,WAAW,KACd,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAClB,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,IAAI,OAAO,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA,KAAK,QAAQ;gBAChE,CAAC,OAAO,CAAC,EAAE,YAAY;gBACvB,CAAC,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,mCAAI,EAAE,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAA;aACzD,CAAC,IAAI,SAAS,EAEjB,QAAQ,GACT;KACF,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { AxisLabel } from "./utils/types.external";
|
|
3
|
-
export declare const dayLabels: (start: Date, end: Date, totalDays: number, direction: "left" | "right") => AxisLabel[];
|
|
4
|
-
export declare const monthLabels: (start: Date, end: Date, direction: "left" | "right") => AxisLabel[];
|
|
5
|
-
export declare const yearLabels: (start: Date, end: Date, direction: "left" | "right") => AxisLabel[];
|
|
6
|
-
export declare const AxisLabels: (
|
|
2
|
+
import { AxisLabel, AxisLabelTemplates } from "./utils/types.external";
|
|
3
|
+
export declare const dayLabels: (start: Date, end: Date, totalDays: number, direction: "left" | "right", template?: string) => AxisLabel[];
|
|
4
|
+
export declare const monthLabels: (start: Date, end: Date, direction: "left" | "right", template?: string) => AxisLabel[];
|
|
5
|
+
export declare const yearLabels: (start: Date, end: Date, direction: "left" | "right", template?: string) => AxisLabel[];
|
|
6
|
+
export declare const AxisLabels: ({ templates, }: {
|
|
7
|
+
templates?: AxisLabelTemplates | undefined;
|
|
8
|
+
}) => React.JSX.Element;
|
|
@@ -5,7 +5,7 @@ import React from "react";
|
|
|
5
5
|
import { useTimelineContext } from "./hooks/useTimelineContext";
|
|
6
6
|
import { isVisible } from "./utils";
|
|
7
7
|
import { horizontalPositionAndWidth } from "./utils/calc";
|
|
8
|
-
export const dayLabels = (start, end, totalDays, direction) => {
|
|
8
|
+
export const dayLabels = (start, end, totalDays, direction, template = "dd.MM") => {
|
|
9
9
|
const increment = Math.ceil(totalDays / 10);
|
|
10
10
|
const lastDay = startOfDay(end);
|
|
11
11
|
return new Array(totalDays)
|
|
@@ -18,14 +18,14 @@ export const dayLabels = (start, end, totalDays, direction) => {
|
|
|
18
18
|
return {
|
|
19
19
|
direction: direction,
|
|
20
20
|
horizontalPosition: horizontalPosition,
|
|
21
|
-
label: format(day,
|
|
21
|
+
label: format(day, template, { locale: nbLocale }),
|
|
22
22
|
date: day,
|
|
23
23
|
width: width,
|
|
24
24
|
};
|
|
25
25
|
})
|
|
26
26
|
.filter((label) => label !== null);
|
|
27
27
|
};
|
|
28
|
-
export const monthLabels = (start, end, direction) => {
|
|
28
|
+
export const monthLabels = (start, end, direction, template = "MMM yy") => {
|
|
29
29
|
const startMonth = startOfMonth(start);
|
|
30
30
|
const endMonth = endOfMonth(end);
|
|
31
31
|
const numberOfMonths = differenceInMonths(endMonth, startMonth) + 1;
|
|
@@ -35,13 +35,13 @@ export const monthLabels = (start, end, direction) => {
|
|
|
35
35
|
return {
|
|
36
36
|
direction: direction,
|
|
37
37
|
horizontalPosition: horizontalPosition,
|
|
38
|
-
label: format(month,
|
|
38
|
+
label: format(month, template, { locale: nbLocale }),
|
|
39
39
|
date: month,
|
|
40
40
|
width: width,
|
|
41
41
|
};
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
|
-
export const yearLabels = (start, end, direction) => {
|
|
44
|
+
export const yearLabels = (start, end, direction, template = "yyyy") => {
|
|
45
45
|
const firstYear = startOfYear(start);
|
|
46
46
|
const lastYear = endOfYear(end);
|
|
47
47
|
const yearCount = differenceInYears(lastYear, start) + 1;
|
|
@@ -51,27 +51,27 @@ export const yearLabels = (start, end, direction) => {
|
|
|
51
51
|
return {
|
|
52
52
|
direction: direction,
|
|
53
53
|
horizontalPosition: horizontalPosition,
|
|
54
|
-
label: year
|
|
54
|
+
label: format(year, template, { locale: nbLocale }),
|
|
55
55
|
date: year,
|
|
56
56
|
width: width,
|
|
57
57
|
};
|
|
58
58
|
});
|
|
59
59
|
};
|
|
60
|
-
const axisLabels = (start, end, direction) => {
|
|
60
|
+
const axisLabels = (start, end, direction, templates) => {
|
|
61
61
|
const totalDays = differenceInDays(end, start);
|
|
62
62
|
if (totalDays < 40) {
|
|
63
|
-
return dayLabels(start, end, totalDays, direction);
|
|
63
|
+
return dayLabels(start, end, totalDays, direction, templates === null || templates === void 0 ? void 0 : templates.day);
|
|
64
64
|
}
|
|
65
65
|
else if (totalDays < 370) {
|
|
66
|
-
return monthLabels(start, end, direction);
|
|
66
|
+
return monthLabels(start, end, direction, templates === null || templates === void 0 ? void 0 : templates.month);
|
|
67
67
|
}
|
|
68
68
|
else {
|
|
69
|
-
return yearLabels(start, end, direction);
|
|
69
|
+
return yearLabels(start, end, direction, templates === null || templates === void 0 ? void 0 : templates.year);
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
|
-
export const AxisLabels = () => {
|
|
72
|
+
export const AxisLabels = ({ templates, }) => {
|
|
73
73
|
const { endDate, startDate, direction } = useTimelineContext();
|
|
74
|
-
const labels = axisLabels(startDate, endDate, direction).filter(isVisible);
|
|
74
|
+
const labels = axisLabels(startDate, endDate, direction, templates).filter(isVisible);
|
|
75
75
|
return (React.createElement("div", { className: "navds-timeline__axislabels", "aria-hidden": "true" }, labels.map((etikett) => (React.createElement(Detail, { className: "navds-timeline__axislabels-label", as: "div", key: etikett.label, style: {
|
|
76
76
|
justifyContent: direction === "left" ? "flex-start" : "flex-end",
|
|
77
77
|
[direction]: `${etikett.horizontalPosition}%`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AxisLabels.js","sourceRoot":"","sources":["../../src/timeline/AxisLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EACL,OAAO,EACP,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,MAAM,EACN,UAAU,EACV,YAAY,EACZ,WAAW,EACX,OAAO,GACR,MAAM,UAAU,CAAC;AAClB,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAG1D,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,KAAW,EACX,GAAS,EACT,SAAiB,EACjB,SAA2B,
|
|
1
|
+
{"version":3,"file":"AxisLabels.js","sourceRoot":"","sources":["../../src/timeline/AxisLabels.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { PeriodType } from "./period";
|
|
|
3
3
|
import { PinType } from "./Pin";
|
|
4
4
|
import { TimelineRowType } from "./TimelineRow";
|
|
5
5
|
import { ZoomType } from "./zoom";
|
|
6
|
+
import { AxisLabelTemplates } from "./utils/types.external";
|
|
6
7
|
export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
8
|
children: React.ReactNode;
|
|
8
9
|
/**
|
|
@@ -22,6 +23,11 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
22
23
|
* @default "left"
|
|
23
24
|
*/
|
|
24
25
|
direction?: "left" | "right";
|
|
26
|
+
/**
|
|
27
|
+
* Templates for label texts. The templates are passed to the date-fns `format` function.
|
|
28
|
+
* Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
|
|
29
|
+
*/
|
|
30
|
+
axisLabelTemplates?: AxisLabelTemplates;
|
|
25
31
|
}
|
|
26
32
|
interface TimelineComponent extends React.ForwardRefExoticComponent<TimelineProps> {
|
|
27
33
|
/**
|
package/esm/timeline/Timeline.js
CHANGED
|
@@ -39,7 +39,7 @@ import Zoom from "./zoom";
|
|
|
39
39
|
* ```
|
|
40
40
|
*/
|
|
41
41
|
export const Timeline = forwardRef((_a, ref) => {
|
|
42
|
-
var { children, startDate, endDate, direction = "left" } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction"]);
|
|
42
|
+
var { children, startDate, endDate, direction = "left", axisLabelTemplates } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction", "axisLabelTemplates"]);
|
|
43
43
|
const isMultipleRows = Array.isArray(children);
|
|
44
44
|
const firstFocusabled = useRef([]);
|
|
45
45
|
if (!isMultipleRows) {
|
|
@@ -129,7 +129,7 @@ export const Timeline = forwardRef((_a, ref) => {
|
|
|
129
129
|
} },
|
|
130
130
|
React.createElement("div", Object.assign({}, rest, { ref: ref }),
|
|
131
131
|
React.createElement("div", { className: "navds-timeline" },
|
|
132
|
-
React.createElement(AxisLabels,
|
|
132
|
+
React.createElement(AxisLabels, { templates: axisLabelTemplates }),
|
|
133
133
|
pins.map((pin) => {
|
|
134
134
|
return pin;
|
|
135
135
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../src/timeline/Timeline.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EACL,eAAe,EACf,aAAa,EACb,eAAe,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,WAAgC,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,IAAkB,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Timeline.js","sourceRoot":"","sources":["../../src/timeline/Timeline.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
/*
|
|
3
|
+
* usePrevious hook
|
|
4
|
+
* The ref object's "current" property is mutable and when changed wont re-render the component
|
|
5
|
+
* meaning it can be used to stay "one render behind" the current state
|
|
6
|
+
* https://usehooks.com/usePrevious/
|
|
7
|
+
* https://blog.logrocket.com/accessing-previous-props-state-react-hooks/
|
|
8
|
+
*/
|
|
9
|
+
const usePrevious = (value) => {
|
|
10
|
+
const ref = useRef(value);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
ref.current = value;
|
|
13
|
+
}, [value]);
|
|
14
|
+
return ref.current;
|
|
15
|
+
};
|
|
16
|
+
export default usePrevious;
|
|
17
|
+
//# sourceMappingURL=usePrevious.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"usePrevious.js","sourceRoot":"","sources":["../../src/util/usePrevious.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C;;;;;;GAMG;AAEH,MAAM,WAAW,GAAG,CAAI,KAAQ,EAAiB,EAAE;IACjD,MAAM,GAAG,GAAG,MAAM,CAAI,KAAK,CAAC,CAAC;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,GAAG,CAAC,OAAO,CAAC;AACrB,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "0.24.1",
|
|
41
|
-
"@navikt/aksel-icons": "^4.
|
|
41
|
+
"@navikt/aksel-icons": "^4.7.0",
|
|
42
42
|
"@radix-ui/react-tabs": "1.0.0",
|
|
43
43
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
44
44
|
"clsx": "^1.2.1",
|
package/src/chips/Chips.tsx
CHANGED
|
@@ -70,7 +70,7 @@ export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
|
|
|
70
70
|
})}
|
|
71
71
|
>
|
|
72
72
|
{React.Children.map(children, (chip, index) => {
|
|
73
|
-
return <li key={
|
|
73
|
+
return <li key={chip?.toString() || index}>{chip}</li>;
|
|
74
74
|
})}
|
|
75
75
|
</ul>
|
|
76
76
|
);
|
package/src/date/DateInput.tsx
CHANGED
|
@@ -73,6 +73,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
|
|
|
73
73
|
"navds-date__field--error": hasError,
|
|
74
74
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
75
75
|
"navds-text-field--disabled": !!inputProps.disabled,
|
|
76
|
+
"navds-form-field--readonly": readOnly,
|
|
76
77
|
"navds-text-field--readonly": readOnly,
|
|
77
78
|
"navds-date__field--readonly": readOnly,
|
|
78
79
|
}
|
package/src/form/Select.tsx
CHANGED
|
@@ -99,6 +99,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
|
|
99
99
|
`navds-form-field--${size}`,
|
|
100
100
|
{
|
|
101
101
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
102
|
+
"navds-form-field--readonly": readOnly,
|
|
102
103
|
"navds-select--error": hasError,
|
|
103
104
|
"navds-select--readonly": readOnly,
|
|
104
105
|
}
|
package/src/form/TextField.tsx
CHANGED
|
@@ -73,10 +73,12 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
73
73
|
className,
|
|
74
74
|
"navds-form-field",
|
|
75
75
|
`navds-form-field--${size}`,
|
|
76
|
+
|
|
76
77
|
{
|
|
77
78
|
"navds-text-field--error": hasError,
|
|
78
79
|
"navds-text-field--disabled": !!inputProps.disabled,
|
|
79
80
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
81
|
+
"navds-form-field--readonly": readOnly,
|
|
80
82
|
"navds-text-field--readonly": readOnly,
|
|
81
83
|
}
|
|
82
84
|
)}
|
package/src/form/Textarea.tsx
CHANGED
|
@@ -117,6 +117,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
|
117
117
|
`navds-form-field--${size}`,
|
|
118
118
|
{
|
|
119
119
|
"navds-form-field--disabled": !!inputProps.disabled,
|
|
120
|
+
"navds-form-field--readonly": readOnly,
|
|
120
121
|
"navds-textarea--readonly": readOnly,
|
|
121
122
|
"navds-textarea--error": hasError,
|
|
122
123
|
"navds-textarea--resize": resize,
|
|
@@ -91,7 +91,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
|
91
91
|
"navds-sr-only": props.hideLabel,
|
|
92
92
|
})}
|
|
93
93
|
>
|
|
94
|
-
<BodyShort
|
|
94
|
+
<BodyShort
|
|
95
|
+
as="span"
|
|
96
|
+
size={size}
|
|
97
|
+
className="navds-checkbox__label-text"
|
|
98
|
+
>
|
|
95
99
|
{!nested && (
|
|
96
100
|
<ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
|
|
97
101
|
)}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { XMarkIcon } from "@navikt/aksel-icons";
|
|
3
|
+
|
|
4
|
+
interface ClearButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
handleClear: (event: any) => void;
|
|
6
|
+
clearButtonLabel?: string;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const ClearButton: React.FC<ClearButtonProps> = ({
|
|
10
|
+
handleClear,
|
|
11
|
+
clearButtonLabel,
|
|
12
|
+
...rest
|
|
13
|
+
}) => {
|
|
14
|
+
return (
|
|
15
|
+
<button
|
|
16
|
+
type="button"
|
|
17
|
+
onClick={handleClear}
|
|
18
|
+
className="navds-combobox__button-clear"
|
|
19
|
+
{...rest}
|
|
20
|
+
>
|
|
21
|
+
<span className="navds-sr-only">
|
|
22
|
+
{clearButtonLabel ? clearButtonLabel : "Tøm"}
|
|
23
|
+
</span>
|
|
24
|
+
<XMarkIcon aria-hidden />
|
|
25
|
+
</button>
|
|
26
|
+
);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default ClearButton;
|