@entur/menu 5.2.1 → 5.2.2
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/dist/BreadcrumbItem.d.ts +18 -0
- package/dist/BreadcrumbNavigation.d.ts +10 -0
- package/dist/CollapsibleSideNavigation.d.ts +27 -0
- package/dist/OverflowMenu.d.ts +54 -0
- package/dist/Pagination.d.ts +68 -0
- package/dist/PaginationInput.d.ts +8 -0
- package/dist/PaginationPage.d.ts +17 -0
- package/dist/SideNavigation.d.ts +15 -0
- package/dist/SideNavigationGroup.d.ts +20 -0
- package/dist/SideNavigationItem.d.ts +33 -0
- package/dist/Stepper.d.ts +38 -0
- package/dist/TopNavigationItem.d.ts +20 -0
- package/dist/index.d.ts +10 -352
- package/dist/useControllableProp.d.ts +6 -0
- package/dist/useShowDelayedLabel.d.ts +1 -0
- package/package.json +11 -11
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '../../utils';
|
|
3
|
+
export type BreadcrumbItemOwnProps = {
|
|
4
|
+
/** Komponenten som rendres
|
|
5
|
+
* @default "a"
|
|
6
|
+
*/
|
|
7
|
+
as?: 'a' | React.ElementType;
|
|
8
|
+
/** Teksten som vises */
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/** Ekstra klassenavn */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** True om sist i listen. Settes automatisk av BreadcrumbNavigation-komponenten */
|
|
13
|
+
isCurrent?: boolean;
|
|
14
|
+
};
|
|
15
|
+
export type BreadcrumbItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BreadcrumbItemOwnProps>;
|
|
16
|
+
declare const defaultElement = "a";
|
|
17
|
+
export declare const BreadcrumbItem: <E extends React.ElementType = "a">({ className, isCurrent, as, ...rest }: BreadcrumbItemProps<E>) => JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type BreadcrumbNavigationProps = {
|
|
3
|
+
/** Label for brødsmulestien.
|
|
4
|
+
* @default 'Brødsmulesti'
|
|
5
|
+
*/
|
|
6
|
+
'aria-label'?: string;
|
|
7
|
+
/** En liste med BreadcrumbItem-er */
|
|
8
|
+
children: React.ReactElement[];
|
|
9
|
+
};
|
|
10
|
+
export declare const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { SideNavigationProps } from './SideNavigation';
|
|
3
|
+
type CollapsibleSideNavigationProps = SideNavigationProps & {
|
|
4
|
+
/**Tilstand til menyen
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
collapsed?: boolean;
|
|
8
|
+
/** Kalles når menyen åpnes eller lukkes */
|
|
9
|
+
onCollapseToggle?: (e: any) => void;
|
|
10
|
+
/** Posisjonen til Collapsible-knappen, målt fra toppen (som CSS-enhet)
|
|
11
|
+
* @default 50%
|
|
12
|
+
*/
|
|
13
|
+
collapsibleButtonPosition?: string;
|
|
14
|
+
/** Aria-label for knappen som åpner menyen
|
|
15
|
+
* @default "Åpne sidemeny"
|
|
16
|
+
*/
|
|
17
|
+
openSideMenuAriaLabel?: string;
|
|
18
|
+
/** Aria-label for knappen som lukker menyen
|
|
19
|
+
* @default "Lukk sidemeny"
|
|
20
|
+
*/
|
|
21
|
+
closeSideMenuAriaLabel?: string;
|
|
22
|
+
};
|
|
23
|
+
export declare const CollapsibleSideNavigation: React.FC<CollapsibleSideNavigationProps>;
|
|
24
|
+
export declare const useSideNavigationContext: () => {
|
|
25
|
+
isCollapsed: boolean;
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Placement } from '../../tooltip';
|
|
3
|
+
import { PolymorphicComponentProps } from '../../utils';
|
|
4
|
+
export type OverflowMenuProps = {
|
|
5
|
+
/** Menypunkter (OverflowMenuItem eller OverflowMenuLink) */
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
buttonIcon?: React.ReactNode;
|
|
8
|
+
/** Knapp som skal åpne OverflowMenu
|
|
9
|
+
* @default IconButton med VerticalDotsIcon
|
|
10
|
+
*/
|
|
11
|
+
button?: React.ReactElement;
|
|
12
|
+
/** Ekstra klassenavn */
|
|
13
|
+
className?: string;
|
|
14
|
+
/** Posisjoneringen av OverflowMenu-lista
|
|
15
|
+
* @default 'bottom-start'
|
|
16
|
+
*/
|
|
17
|
+
placement?: Placement;
|
|
18
|
+
/**
|
|
19
|
+
* @deprecated Use placement insted.
|
|
20
|
+
* This is done to standardise the name of
|
|
21
|
+
* the relative position prop used in Entur
|
|
22
|
+
* designs sytstem components
|
|
23
|
+
*/
|
|
24
|
+
position?: 'right' | 'left';
|
|
25
|
+
/** Tekst som beskriver knappen som åpner Overflow-menyen
|
|
26
|
+
* @default "åpne valgmeny"
|
|
27
|
+
*/
|
|
28
|
+
'aria-label'?: string;
|
|
29
|
+
};
|
|
30
|
+
export declare const OverflowMenu: ({ children, className, button, buttonIcon, placement, "aria-label": ariaLabel, ...rest }: OverflowMenuProps) => React.JSX.Element;
|
|
31
|
+
type OverflowMenuItemBaseProps = {
|
|
32
|
+
/** Innholdet til OverflowMenuItem */
|
|
33
|
+
children: React.ReactNode;
|
|
34
|
+
/** Ekstra klassenavn */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** Det som skjer når elementet er valgt, enten ved museklikk eller Enter-klikk */
|
|
37
|
+
onSelect?: () => void;
|
|
38
|
+
/** Lenke til siden brukeren skal sendes til.
|
|
39
|
+
* Obs: kun én av onSelect og href skal brukes på ett element
|
|
40
|
+
*/
|
|
41
|
+
href?: string;
|
|
42
|
+
/** Om dette valget skal være deaktivert */
|
|
43
|
+
disabled?: boolean;
|
|
44
|
+
};
|
|
45
|
+
export type OverflowMenuItemProps<C extends React.ElementType> = PolymorphicComponentProps<C, OverflowMenuItemBaseProps>;
|
|
46
|
+
export declare const OverflowMenuItem: <C extends React.ElementType = "button">({ children, className, onSelect, href, disabled, as, ...rest }: OverflowMenuItemProps<C>) => React.JSX.Element;
|
|
47
|
+
type OverflowMenuLinkExtendedBaseProps = {
|
|
48
|
+
/**
|
|
49
|
+
* @deprecated onSelect is no longer used
|
|
50
|
+
* in OverflowMenuLink, use 'href' instead */
|
|
51
|
+
onSelect?: () => void;
|
|
52
|
+
};
|
|
53
|
+
export declare const OverflowMenuLink: <C extends React.ElementType = "a">(props: OverflowMenuItemProps<C> & OverflowMenuLinkExtendedBaseProps) => React.JSX.Element;
|
|
54
|
+
export {};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type PaginationProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Sidenummeret som er aktivt nå (1-indeksert) */
|
|
6
|
+
currentPage: number;
|
|
7
|
+
/** Callback for når man ønsker å gå til en ny side */
|
|
8
|
+
onPageChange: (requestedPage: number) => void;
|
|
9
|
+
/** Antall sider totalt */
|
|
10
|
+
pageCount: number;
|
|
11
|
+
/**
|
|
12
|
+
* Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
|
|
13
|
+
* @default "Gå til forrige side"
|
|
14
|
+
*/
|
|
15
|
+
previousPageLabel?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Hva som blir lest opp når brukere av skjermlesere navigerer til "neste side knappen"
|
|
18
|
+
* @default "Gå til neste side"
|
|
19
|
+
*/
|
|
20
|
+
nextPageLabel?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
|
|
23
|
+
* @default pageNumber => `Gå til side ${pageNumber}`,
|
|
24
|
+
*/
|
|
25
|
+
pageLabel?: (pageNumber: number) => string;
|
|
26
|
+
/**
|
|
27
|
+
* @default "Nåværende side:"
|
|
28
|
+
*/
|
|
29
|
+
currentPageLabelForScreenreader?: string;
|
|
30
|
+
/** Vis et felt til høyre for pagineringen hvor man kan angi siden man
|
|
31
|
+
* ønsker å vise i et tekstfelt.
|
|
32
|
+
*
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
showInput?: boolean;
|
|
36
|
+
/** Label som vises til venstre for input-feltet som vises om `showInput` er true
|
|
37
|
+
* @default "Gå til side"
|
|
38
|
+
*/
|
|
39
|
+
inputLabel?: string;
|
|
40
|
+
/** Hvor mange resultater man har totalt */
|
|
41
|
+
numberOfResults?: number;
|
|
42
|
+
/** Hvor mange resultater som vises per side */
|
|
43
|
+
resultsPerPage?: number;
|
|
44
|
+
/**
|
|
45
|
+
* @default [10,25,50]
|
|
46
|
+
*/
|
|
47
|
+
resultsPerPageOptions?: number[];
|
|
48
|
+
/** Callback for når resultater per side oppdateres */
|
|
49
|
+
onResultsPerPageChange?: (e: number) => void;
|
|
50
|
+
/** Brukes for å skjule "neste side"-knappen
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
hideNextButton?: boolean;
|
|
54
|
+
/** Brukes for å skjule "forrige side"-knappen
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
hidePrevButton?: boolean;
|
|
58
|
+
/** Teksten som vises for hvilke resultater av sideantallet man viser.
|
|
59
|
+
* @default `Viser resultat ${minPage} - ${maxPage} av ${pageCount}`
|
|
60
|
+
*/
|
|
61
|
+
showingResultsLabel?: (minPage: number, maxPage: number, pageCount: number) => string;
|
|
62
|
+
/** Teksten som vises før "resultsPerPage"-velgeren
|
|
63
|
+
* @default "Vis"
|
|
64
|
+
*/
|
|
65
|
+
showNumberOfResultsLabel?: string;
|
|
66
|
+
[key: string]: any;
|
|
67
|
+
};
|
|
68
|
+
export declare const Pagination: React.FC<PaginationProps>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type PaginationPageProps = {
|
|
3
|
+
/** Sidenummeret som er aktivt nå */
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
/** Ekstra klassenavn */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** Viser siden som aktiv */
|
|
8
|
+
selected?: boolean;
|
|
9
|
+
/** Viser knappen som inaktiv */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Callback for når man trykker på siden */
|
|
12
|
+
onClick: () => void;
|
|
13
|
+
/** Tekst for skjermlesere */
|
|
14
|
+
'aria-label': string;
|
|
15
|
+
'aria-describedby'?: string;
|
|
16
|
+
};
|
|
17
|
+
export declare const PaginationPage: React.FC<PaginationPageProps>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SideNavigationProps = {
|
|
3
|
+
/** Ekstra klassenavn */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Størrelse på menyen
|
|
6
|
+
* @default 'medium'
|
|
7
|
+
*/
|
|
8
|
+
size?: 'small' | 'medium';
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
};
|
|
11
|
+
type InternalMarker = {
|
|
12
|
+
__IS_ENTUR_MENU__: boolean;
|
|
13
|
+
};
|
|
14
|
+
export declare const SideNavigation: React.FC<SideNavigationProps> & InternalMarker;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SideNavigationGroupProps = {
|
|
3
|
+
/** Skal menygruppen være ekspandert by default? Kun relevant om komponenten ikke er kontrollert
|
|
4
|
+
* @default false
|
|
5
|
+
*/
|
|
6
|
+
defaultOpen?: boolean;
|
|
7
|
+
/** Er menyen åpen? */
|
|
8
|
+
open?: boolean;
|
|
9
|
+
/** Kalles når menygruppen åpnes eller lukkes */
|
|
10
|
+
onToggle?: (e?: boolean) => void;
|
|
11
|
+
/** Ekstra klassenavn */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Menyen som skal grupperes */
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
/** Overskriften til menyen */
|
|
16
|
+
title: React.ReactNode;
|
|
17
|
+
icon?: React.ReactNode;
|
|
18
|
+
[key: string]: any;
|
|
19
|
+
};
|
|
20
|
+
export declare const SideNavigationGroup: React.FC<SideNavigationGroupProps>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '../../utils';
|
|
3
|
+
type BaseSideNavigationItemOwnProps = {
|
|
4
|
+
active?: boolean;
|
|
5
|
+
as?: 'a' | 'button' | React.ElementType;
|
|
6
|
+
className?: string;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
subMenu?: React.ReactNode;
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
};
|
|
12
|
+
export type BaseSideNavigationItemProps<T extends React.ElementType = typeof defaultElementBaseItem> = PolymorphicComponentProps<T, BaseSideNavigationItemOwnProps>;
|
|
13
|
+
declare const defaultElementBaseItem = "a";
|
|
14
|
+
export type SideNavigationItemOwnProps = {
|
|
15
|
+
/** Om meny-elementet er det som er aktivt */
|
|
16
|
+
active?: boolean;
|
|
17
|
+
/** HTML-elementet eller React-komponenten som rendres */
|
|
18
|
+
as?: 'a' | 'button' | React.ElementType;
|
|
19
|
+
/** Ekstra klassenavn */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** Om meny-elementet er deaktivert */
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
/** Callback for når man klikker på meny-elementet */
|
|
24
|
+
onClick?: (e: React.MouseEvent) => any;
|
|
25
|
+
/** Sett til true om du vil tvinge alle sub-menus til å rendre barna sine. Typisk for å vise søkeresultater */
|
|
26
|
+
forceExpandSubMenus?: boolean;
|
|
27
|
+
icon?: React.ReactNode;
|
|
28
|
+
[key: string]: any;
|
|
29
|
+
};
|
|
30
|
+
export type SideNavigationItemProps<T extends React.ElementType = typeof defaultElementItem> = PolymorphicComponentProps<T, SideNavigationItemOwnProps>;
|
|
31
|
+
declare const defaultElementItem = "a";
|
|
32
|
+
export declare const SideNavigationItem: <E extends React.ElementType = typeof defaultElementItem>(props: SideNavigationItemProps<E>) => React.ReactElement | null;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type StepperProps = {
|
|
3
|
+
/** Liste med steg-navn i rekkefølge. */
|
|
4
|
+
steps: string[];
|
|
5
|
+
/** Det nåværende steget. 0-indeksert */
|
|
6
|
+
activeIndex: number;
|
|
7
|
+
/** Om stepperen skal være et interaktivt-navigasjonselement eller ikke
|
|
8
|
+
* @default false
|
|
9
|
+
*/
|
|
10
|
+
interactive?: boolean;
|
|
11
|
+
/** Kalles med indeksen til det klikkede steget.
|
|
12
|
+
* Fungerer kun hvis Stepper-en er interaktiv */
|
|
13
|
+
onStepClick?: (index: number) => void;
|
|
14
|
+
/** Om stepper skal vise indeksering av hvilket trinn man er på
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
showStepperIndex?: boolean;
|
|
18
|
+
/** Ekstra klassenavn. */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** Skjermlesertekst for ordet 'steg' som i '_steg_ 1 av 3'
|
|
21
|
+
* @default 'Steg'
|
|
22
|
+
*/
|
|
23
|
+
ariaLabelStep?: string;
|
|
24
|
+
/** Skjermlesertekst for ordet 'av' som i 'steg 1 _av_ 3'
|
|
25
|
+
* @defaul 'av'
|
|
26
|
+
*/
|
|
27
|
+
ariaLabelOf?: string;
|
|
28
|
+
/** Skjermlesertekst for ordet fullført
|
|
29
|
+
* @default 'fullført'
|
|
30
|
+
*/
|
|
31
|
+
ariaLabelCompleted?: string;
|
|
32
|
+
/** Skjermlesertekst for oppsummering av hele stepper-en
|
|
33
|
+
* @default `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`
|
|
34
|
+
*/
|
|
35
|
+
ariaLabelSummary?: string;
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
};
|
|
38
|
+
export declare const Stepper: React.FC<StepperProps>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { PolymorphicComponentProps } from '../../utils';
|
|
3
|
+
export type TopNavigationItemOwnProps = {
|
|
4
|
+
/** Om komponenten vises som valgt eller ikke
|
|
5
|
+
* @default false
|
|
6
|
+
*/
|
|
7
|
+
active?: boolean;
|
|
8
|
+
/** Tekste som vises */
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/** HTML-elementet eller React-komponenten som lager komponenten
|
|
11
|
+
* @default 'a'
|
|
12
|
+
*/
|
|
13
|
+
as?: 'a' | React.ElementType;
|
|
14
|
+
/** Ekstra klassenavn */
|
|
15
|
+
className?: string;
|
|
16
|
+
};
|
|
17
|
+
export type TopNavigationItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, TopNavigationItemOwnProps>;
|
|
18
|
+
declare const defaultElement = "a";
|
|
19
|
+
export declare const TopNavigationItem: <E extends React.ElementType = "a">({ active, className, as, ...rest }: TopNavigationItemProps<E>) => JSX.Element;
|
|
20
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,352 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
declare type BaseSideNavigationItemOwnProps = {
|
|
12
|
-
active?: boolean;
|
|
13
|
-
as?: 'a' | 'button' | default_2.ElementType;
|
|
14
|
-
className?: string;
|
|
15
|
-
icon?: default_2.ReactNode;
|
|
16
|
-
children: default_2.ReactNode;
|
|
17
|
-
subMenu?: default_2.ReactNode;
|
|
18
|
-
[key: string]: any;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export declare type BaseSideNavigationItemProps<T extends default_2.ElementType = typeof defaultElementBaseItem> = PolymorphicComponentProps<T, BaseSideNavigationItemOwnProps>;
|
|
22
|
-
|
|
23
|
-
export declare const BreadcrumbItem: <E extends default_2.ElementType = "a">({ className, isCurrent, as, ...rest }: BreadcrumbItemProps<E>) => JSX.Element;
|
|
24
|
-
|
|
25
|
-
export declare type BreadcrumbItemOwnProps = {
|
|
26
|
-
/** Komponenten som rendres
|
|
27
|
-
* @default "a"
|
|
28
|
-
*/
|
|
29
|
-
as?: 'a' | default_2.ElementType;
|
|
30
|
-
/** Teksten som vises */
|
|
31
|
-
children: default_2.ReactNode;
|
|
32
|
-
/** Ekstra klassenavn */
|
|
33
|
-
className?: string;
|
|
34
|
-
/** True om sist i listen. Settes automatisk av BreadcrumbNavigation-komponenten */
|
|
35
|
-
isCurrent?: boolean;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
export declare type BreadcrumbItemProps<T extends default_2.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BreadcrumbItemOwnProps>;
|
|
39
|
-
|
|
40
|
-
export declare const BreadcrumbNavigation: default_2.FC<BreadcrumbNavigationProps>;
|
|
41
|
-
|
|
42
|
-
export declare type BreadcrumbNavigationProps = {
|
|
43
|
-
/** Label for brødsmulestien.
|
|
44
|
-
* @default 'Brødsmulesti'
|
|
45
|
-
*/
|
|
46
|
-
'aria-label'?: string;
|
|
47
|
-
/** En liste med BreadcrumbItem-er */
|
|
48
|
-
children: default_2.ReactElement[];
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export declare const CollapsibleSideNavigation: default_2.FC<CollapsibleSideNavigationProps>;
|
|
52
|
-
|
|
53
|
-
declare type CollapsibleSideNavigationProps = SideNavigationProps & {
|
|
54
|
-
/**Tilstand til menyen
|
|
55
|
-
* @default false
|
|
56
|
-
*/
|
|
57
|
-
collapsed?: boolean;
|
|
58
|
-
/** Kalles når menyen åpnes eller lukkes */
|
|
59
|
-
onCollapseToggle?: (e: any) => void;
|
|
60
|
-
/** Posisjonen til Collapsible-knappen, målt fra toppen (som CSS-enhet)
|
|
61
|
-
* @default 50%
|
|
62
|
-
*/
|
|
63
|
-
collapsibleButtonPosition?: string;
|
|
64
|
-
/** Aria-label for knappen som åpner menyen
|
|
65
|
-
* @default "Åpne sidemeny"
|
|
66
|
-
*/
|
|
67
|
-
openSideMenuAriaLabel?: string;
|
|
68
|
-
/** Aria-label for knappen som lukker menyen
|
|
69
|
-
* @default "Lukk sidemeny"
|
|
70
|
-
*/
|
|
71
|
-
closeSideMenuAriaLabel?: string;
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
declare const defaultElement = "a";
|
|
75
|
-
|
|
76
|
-
declare const defaultElement_2 = "a";
|
|
77
|
-
|
|
78
|
-
declare const defaultElementBaseItem = "a";
|
|
79
|
-
|
|
80
|
-
declare const defaultElementItem = "a";
|
|
81
|
-
|
|
82
|
-
/**
|
|
83
|
-
* Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
|
|
84
|
-
* (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
|
|
85
|
-
* set of props.
|
|
86
|
-
*/
|
|
87
|
-
declare type ExtendableProps<ExtendedProps = Record<string, unknown>, OverrideProps = Record<string, unknown>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* Allows for inheriting the props from the specified element type so that
|
|
91
|
-
* props like children, className & style work, as well as element-specific
|
|
92
|
-
* attributes like aria roles. The component (`C`) must be passed in.
|
|
93
|
-
*/
|
|
94
|
-
declare type InheritableElementProps<C extends default_2.ElementType, Props = Record<string, unknown>> = ExtendableProps<PropsOf<C>, Props>;
|
|
95
|
-
|
|
96
|
-
declare type InternalMarker = {
|
|
97
|
-
__IS_ENTUR_MENU__: boolean;
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
export declare const OverflowMenu: ({ children, className, button, buttonIcon, placement, "aria-label": ariaLabel, ...rest }: OverflowMenuProps) => default_2.JSX.Element;
|
|
101
|
-
|
|
102
|
-
export declare const OverflowMenuItem: <C extends default_2.ElementType = "button">({ children, className, onSelect, href, disabled, as, ...rest }: OverflowMenuItemProps<C>) => default_2.JSX.Element;
|
|
103
|
-
|
|
104
|
-
declare type OverflowMenuItemBaseProps = {
|
|
105
|
-
/** Innholdet til OverflowMenuItem */
|
|
106
|
-
children: default_2.ReactNode;
|
|
107
|
-
/** Ekstra klassenavn */
|
|
108
|
-
className?: string;
|
|
109
|
-
/** Det som skjer når elementet er valgt, enten ved museklikk eller Enter-klikk */
|
|
110
|
-
onSelect?: () => void;
|
|
111
|
-
/** Lenke til siden brukeren skal sendes til.
|
|
112
|
-
* Obs: kun én av onSelect og href skal brukes på ett element
|
|
113
|
-
*/
|
|
114
|
-
href?: string;
|
|
115
|
-
/** Om dette valget skal være deaktivert */
|
|
116
|
-
disabled?: boolean;
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export declare type OverflowMenuItemProps<C extends default_2.ElementType> = PolymorphicComponentProps<C, OverflowMenuItemBaseProps>;
|
|
120
|
-
|
|
121
|
-
export declare const OverflowMenuLink: <C extends default_2.ElementType = "a">(props: OverflowMenuItemProps<C> & OverflowMenuLinkExtendedBaseProps) => default_2.JSX.Element;
|
|
122
|
-
|
|
123
|
-
declare type OverflowMenuLinkExtendedBaseProps = {
|
|
124
|
-
/**
|
|
125
|
-
* @deprecated onSelect is no longer used
|
|
126
|
-
* in OverflowMenuLink, use 'href' instead */
|
|
127
|
-
onSelect?: () => void;
|
|
128
|
-
};
|
|
129
|
-
|
|
130
|
-
export declare type OverflowMenuProps = {
|
|
131
|
-
/** Menypunkter (OverflowMenuItem eller OverflowMenuLink) */
|
|
132
|
-
children: default_2.ReactNode;
|
|
133
|
-
buttonIcon?: default_2.ReactNode;
|
|
134
|
-
/** Knapp som skal åpne OverflowMenu
|
|
135
|
-
* @default IconButton med VerticalDotsIcon
|
|
136
|
-
*/
|
|
137
|
-
button?: default_2.ReactElement;
|
|
138
|
-
/** Ekstra klassenavn */
|
|
139
|
-
className?: string;
|
|
140
|
-
/** Posisjoneringen av OverflowMenu-lista
|
|
141
|
-
* @default 'bottom-start'
|
|
142
|
-
*/
|
|
143
|
-
placement?: Placement;
|
|
144
|
-
/**
|
|
145
|
-
* @deprecated Use placement insted.
|
|
146
|
-
* This is done to standardise the name of
|
|
147
|
-
* the relative position prop used in Entur
|
|
148
|
-
* designs sytstem components
|
|
149
|
-
*/
|
|
150
|
-
position?: 'right' | 'left';
|
|
151
|
-
/** Tekst som beskriver knappen som åpner Overflow-menyen
|
|
152
|
-
* @default "åpne valgmeny"
|
|
153
|
-
*/
|
|
154
|
-
'aria-label'?: string;
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export declare const Pagination: default_2.FC<PaginationProps>;
|
|
158
|
-
|
|
159
|
-
export declare type PaginationProps = {
|
|
160
|
-
/** Ekstra klassenavn */
|
|
161
|
-
className?: string;
|
|
162
|
-
/** Sidenummeret som er aktivt nå (1-indeksert) */
|
|
163
|
-
currentPage: number;
|
|
164
|
-
/** Callback for når man ønsker å gå til en ny side */
|
|
165
|
-
onPageChange: (requestedPage: number) => void;
|
|
166
|
-
/** Antall sider totalt */
|
|
167
|
-
pageCount: number;
|
|
168
|
-
/**
|
|
169
|
-
* Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
|
|
170
|
-
* @default "Gå til forrige side"
|
|
171
|
-
*/
|
|
172
|
-
previousPageLabel?: string;
|
|
173
|
-
/**
|
|
174
|
-
* Hva som blir lest opp når brukere av skjermlesere navigerer til "neste side knappen"
|
|
175
|
-
* @default "Gå til neste side"
|
|
176
|
-
*/
|
|
177
|
-
nextPageLabel?: string;
|
|
178
|
-
/**
|
|
179
|
-
* Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
|
|
180
|
-
* @default pageNumber => `Gå til side ${pageNumber}`,
|
|
181
|
-
*/
|
|
182
|
-
pageLabel?: (pageNumber: number) => string;
|
|
183
|
-
/**
|
|
184
|
-
* @default "Nåværende side:"
|
|
185
|
-
*/
|
|
186
|
-
currentPageLabelForScreenreader?: string;
|
|
187
|
-
/** Vis et felt til høyre for pagineringen hvor man kan angi siden man
|
|
188
|
-
* ønsker å vise i et tekstfelt.
|
|
189
|
-
*
|
|
190
|
-
* @default false
|
|
191
|
-
*/
|
|
192
|
-
showInput?: boolean;
|
|
193
|
-
/** Label som vises til venstre for input-feltet som vises om `showInput` er true
|
|
194
|
-
* @default "Gå til side"
|
|
195
|
-
*/
|
|
196
|
-
inputLabel?: string;
|
|
197
|
-
/** Hvor mange resultater man har totalt */
|
|
198
|
-
numberOfResults?: number;
|
|
199
|
-
/** Hvor mange resultater som vises per side */
|
|
200
|
-
resultsPerPage?: number;
|
|
201
|
-
/**
|
|
202
|
-
* @default [10,25,50]
|
|
203
|
-
*/
|
|
204
|
-
resultsPerPageOptions?: number[];
|
|
205
|
-
/** Callback for når resultater per side oppdateres */
|
|
206
|
-
onResultsPerPageChange?: (e: number) => void;
|
|
207
|
-
/** Brukes for å skjule "neste side"-knappen
|
|
208
|
-
* @default false
|
|
209
|
-
*/
|
|
210
|
-
hideNextButton?: boolean;
|
|
211
|
-
/** Brukes for å skjule "forrige side"-knappen
|
|
212
|
-
* @default false
|
|
213
|
-
*/
|
|
214
|
-
hidePrevButton?: boolean;
|
|
215
|
-
/** Teksten som vises for hvilke resultater av sideantallet man viser.
|
|
216
|
-
* @default `Viser resultat ${minPage} - ${maxPage} av ${pageCount}`
|
|
217
|
-
*/
|
|
218
|
-
showingResultsLabel?: (minPage: number, maxPage: number, pageCount: number) => string;
|
|
219
|
-
/** Teksten som vises før "resultsPerPage"-velgeren
|
|
220
|
-
* @default "Vis"
|
|
221
|
-
*/
|
|
222
|
-
showNumberOfResultsLabel?: string;
|
|
223
|
-
[key: string]: any;
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
declare type Placement = 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'left' | 'right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-right' | 'bottom-end';
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* A more sophisticated version of `InheritableElementProps` where
|
|
230
|
-
* the passed in `as` prop will determine which props can be included
|
|
231
|
-
*/
|
|
232
|
-
declare type PolymorphicComponentProps<C extends default_2.ElementType, Props = Record<string, unknown>> = InheritableElementProps<C, Props & AsProp<C>>;
|
|
233
|
-
|
|
234
|
-
declare type PropsOf<C extends keyof JSX.IntrinsicElements | default_2.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, default_2.ComponentPropsWithoutRef<C>>;
|
|
235
|
-
|
|
236
|
-
export declare const SideNavigation: default_2.FC<SideNavigationProps> & InternalMarker;
|
|
237
|
-
|
|
238
|
-
export declare const SideNavigationGroup: default_2.FC<SideNavigationGroupProps>;
|
|
239
|
-
|
|
240
|
-
export declare type SideNavigationGroupProps = {
|
|
241
|
-
/** Skal menygruppen være ekspandert by default? Kun relevant om komponenten ikke er kontrollert
|
|
242
|
-
* @default false
|
|
243
|
-
*/
|
|
244
|
-
defaultOpen?: boolean;
|
|
245
|
-
/** Er menyen åpen? */
|
|
246
|
-
open?: boolean;
|
|
247
|
-
/** Kalles når menygruppen åpnes eller lukkes */
|
|
248
|
-
onToggle?: (e?: boolean) => void;
|
|
249
|
-
/** Ekstra klassenavn */
|
|
250
|
-
className?: string;
|
|
251
|
-
/** Menyen som skal grupperes */
|
|
252
|
-
children: default_2.ReactNode;
|
|
253
|
-
/** Overskriften til menyen */
|
|
254
|
-
title: default_2.ReactNode;
|
|
255
|
-
icon?: default_2.ReactNode;
|
|
256
|
-
[key: string]: any;
|
|
257
|
-
};
|
|
258
|
-
|
|
259
|
-
export declare const SideNavigationItem: <E extends default_2.ElementType = typeof defaultElementItem>(props: SideNavigationItemProps<E>) => default_2.ReactElement | null;
|
|
260
|
-
|
|
261
|
-
export declare type SideNavigationItemOwnProps = {
|
|
262
|
-
/** Om meny-elementet er det som er aktivt */
|
|
263
|
-
active?: boolean;
|
|
264
|
-
/** HTML-elementet eller React-komponenten som rendres */
|
|
265
|
-
as?: 'a' | 'button' | default_2.ElementType;
|
|
266
|
-
/** Ekstra klassenavn */
|
|
267
|
-
className?: string;
|
|
268
|
-
/** Om meny-elementet er deaktivert */
|
|
269
|
-
disabled?: boolean;
|
|
270
|
-
/** Callback for når man klikker på meny-elementet */
|
|
271
|
-
onClick?: (e: default_2.MouseEvent) => any;
|
|
272
|
-
/** Sett til true om du vil tvinge alle sub-menus til å rendre barna sine. Typisk for å vise søkeresultater */
|
|
273
|
-
forceExpandSubMenus?: boolean;
|
|
274
|
-
icon?: default_2.ReactNode;
|
|
275
|
-
[key: string]: any;
|
|
276
|
-
};
|
|
277
|
-
|
|
278
|
-
export declare type SideNavigationItemProps<T extends default_2.ElementType = typeof defaultElementItem> = PolymorphicComponentProps<T, SideNavigationItemOwnProps>;
|
|
279
|
-
|
|
280
|
-
export declare type SideNavigationProps = {
|
|
281
|
-
/** Ekstra klassenavn */
|
|
282
|
-
className?: string;
|
|
283
|
-
/** Størrelse på menyen
|
|
284
|
-
* @default 'medium'
|
|
285
|
-
*/
|
|
286
|
-
size?: 'small' | 'medium';
|
|
287
|
-
[key: string]: any;
|
|
288
|
-
};
|
|
289
|
-
|
|
290
|
-
export declare const Stepper: default_2.FC<StepperProps>;
|
|
291
|
-
|
|
292
|
-
export declare type StepperProps = {
|
|
293
|
-
/** Liste med steg-navn i rekkefølge. */
|
|
294
|
-
steps: string[];
|
|
295
|
-
/** Det nåværende steget. 0-indeksert */
|
|
296
|
-
activeIndex: number;
|
|
297
|
-
/** Om stepperen skal være et interaktivt-navigasjonselement eller ikke
|
|
298
|
-
* @default false
|
|
299
|
-
*/
|
|
300
|
-
interactive?: boolean;
|
|
301
|
-
/** Kalles med indeksen til det klikkede steget.
|
|
302
|
-
* Fungerer kun hvis Stepper-en er interaktiv */
|
|
303
|
-
onStepClick?: (index: number) => void;
|
|
304
|
-
/** Om stepper skal vise indeksering av hvilket trinn man er på
|
|
305
|
-
* @default true
|
|
306
|
-
*/
|
|
307
|
-
showStepperIndex?: boolean;
|
|
308
|
-
/** Ekstra klassenavn. */
|
|
309
|
-
className?: string;
|
|
310
|
-
/** Skjermlesertekst for ordet 'steg' som i '_steg_ 1 av 3'
|
|
311
|
-
* @default 'Steg'
|
|
312
|
-
*/
|
|
313
|
-
ariaLabelStep?: string;
|
|
314
|
-
/** Skjermlesertekst for ordet 'av' som i 'steg 1 _av_ 3'
|
|
315
|
-
* @defaul 'av'
|
|
316
|
-
*/
|
|
317
|
-
ariaLabelOf?: string;
|
|
318
|
-
/** Skjermlesertekst for ordet fullført
|
|
319
|
-
* @default 'fullført'
|
|
320
|
-
*/
|
|
321
|
-
ariaLabelCompleted?: string;
|
|
322
|
-
/** Skjermlesertekst for oppsummering av hele stepper-en
|
|
323
|
-
* @default `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`
|
|
324
|
-
*/
|
|
325
|
-
ariaLabelSummary?: string;
|
|
326
|
-
[key: string]: any;
|
|
327
|
-
};
|
|
328
|
-
|
|
329
|
-
export declare const TopNavigationItem: <E extends default_2.ElementType = "a">({ active, className, as, ...rest }: TopNavigationItemProps<E>) => JSX.Element;
|
|
330
|
-
|
|
331
|
-
export declare type TopNavigationItemOwnProps = {
|
|
332
|
-
/** Om komponenten vises som valgt eller ikke
|
|
333
|
-
* @default false
|
|
334
|
-
*/
|
|
335
|
-
active?: boolean;
|
|
336
|
-
/** Tekste som vises */
|
|
337
|
-
children: default_2.ReactNode;
|
|
338
|
-
/** HTML-elementet eller React-komponenten som lager komponenten
|
|
339
|
-
* @default 'a'
|
|
340
|
-
*/
|
|
341
|
-
as?: 'a' | default_2.ElementType;
|
|
342
|
-
/** Ekstra klassenavn */
|
|
343
|
-
className?: string;
|
|
344
|
-
};
|
|
345
|
-
|
|
346
|
-
export declare type TopNavigationItemProps<T extends default_2.ElementType = typeof defaultElement_2> = PolymorphicComponentProps<T, TopNavigationItemOwnProps>;
|
|
347
|
-
|
|
348
|
-
export declare const useSideNavigationContext: () => {
|
|
349
|
-
isCollapsed: boolean;
|
|
350
|
-
};
|
|
351
|
-
|
|
352
|
-
export { }
|
|
1
|
+
export * from './BreadcrumbNavigation';
|
|
2
|
+
export * from './BreadcrumbItem';
|
|
3
|
+
export * from './CollapsibleSideNavigation';
|
|
4
|
+
export * from './OverflowMenu';
|
|
5
|
+
export * from './Pagination';
|
|
6
|
+
export * from './SideNavigation';
|
|
7
|
+
export * from './SideNavigationItem';
|
|
8
|
+
export * from './SideNavigationGroup';
|
|
9
|
+
export * from './Stepper';
|
|
10
|
+
export * from './TopNavigationItem';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useShowDelayedLabel: (isCollapsed: boolean) => [boolean];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/menu",
|
|
3
|
-
"version": "5.2.
|
|
3
|
+
"version": "5.2.2",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/menu.cjs.js",
|
|
6
6
|
"module": "dist/menu.esm.js",
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/a11y": "^0.2.
|
|
31
|
-
"@entur/button": "^3.3.
|
|
32
|
-
"@entur/expand": "^3.6.
|
|
33
|
-
"@entur/icons": "^8.0.
|
|
34
|
-
"@entur/layout": "^3.1.
|
|
35
|
-
"@entur/tokens": "^3.19.
|
|
36
|
-
"@entur/tooltip": "^5.2.
|
|
37
|
-
"@entur/typography": "^1.9.
|
|
38
|
-
"@entur/utils": "^0.12.
|
|
30
|
+
"@entur/a11y": "^0.2.101",
|
|
31
|
+
"@entur/button": "^3.3.14",
|
|
32
|
+
"@entur/expand": "^3.6.14",
|
|
33
|
+
"@entur/icons": "^8.0.2",
|
|
34
|
+
"@entur/layout": "^3.1.10",
|
|
35
|
+
"@entur/tokens": "^3.19.3",
|
|
36
|
+
"@entur/tooltip": "^5.2.14",
|
|
37
|
+
"@entur/typography": "^1.9.14",
|
|
38
|
+
"@entur/utils": "^0.12.5",
|
|
39
39
|
"@floating-ui/react": "^0.26.28",
|
|
40
40
|
"classnames": "^2.5.1"
|
|
41
41
|
},
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"vite": "^7.1.3",
|
|
53
53
|
"vite-plugin-dts": "^4.5.4"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "5dd9d318f1d79f6f522f978de27b551fda1e91cc"
|
|
56
56
|
}
|