@entur/menu 5.2.1-beta.1 → 5.2.1-beta.11

package/dist/BreadcrumbItem.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './BreadcrumbNavigation.scss';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type BreadcrumbItemOwnProps = {
+    /** Komponenten som rendres
+     * @default "a"
+     */
+    as?: 'a' | React.ElementType;
+    /** Teksten som vises */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** True om sist i listen. Settes automatisk av BreadcrumbNavigation-komponenten */
+    isCurrent?: boolean;
+};
+export type BreadcrumbItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BreadcrumbItemOwnProps>;
+declare const defaultElement = "a";
+export declare const BreadcrumbItem: <E extends React.ElementType = "a">({ className, isCurrent, as, ...rest }: BreadcrumbItemProps<E>) => JSX.Element;
+export {};

package/dist/BreadcrumbNavigation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './BreadcrumbNavigation.scss';
+export type BreadcrumbNavigationProps = {
+    /** Label for brødsmulestien.
+     * @default 'Brødsmulesti'
+     */
+    'aria-label'?: string;
+    /** En liste med BreadcrumbItem-er */
+    children: React.ReactElement[];
+};
+export declare const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps>;

package/dist/CollapsibleSideNavigation.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SideNavigationProps } from './SideNavigation';
+type CollapsibleSideNavigationProps = SideNavigationProps & {
+    /**Tilstand til menyen
+     * @default false
+     */
+    collapsed?: boolean;
+    /** Kalles når menyen åpnes eller lukkes  */
+    onCollapseToggle?: (e: any) => void;
+    /** Posisjonen til Collapsible-knappen, målt fra toppen (som CSS-enhet)
+     *  @default 50%
+     */
+    collapsibleButtonPosition?: string;
+    /** Aria-label for knappen som åpner menyen
+     * @default "Åpne sidemeny"
+     */
+    openSideMenuAriaLabel?: string;
+    /** Aria-label for knappen som lukker menyen
+     * @default "Lukk sidemeny"
+     */
+    closeSideMenuAriaLabel?: string;
+};
+export declare const CollapsibleSideNavigation: React.FC<CollapsibleSideNavigationProps>;
+export declare const useSideNavigationContext: () => {
+    isCollapsed: boolean;
+};
+export {};

package/dist/OverflowMenu.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Placement } from '@entur/tooltip';
+import { PolymorphicComponentProps } from '@entur/utils';
+import './OverflowMenu.scss';
+export type OverflowMenuProps = {
+    /** Menypunkter (OverflowMenuItem eller OverflowMenuLink) */
+    children: React.ReactNode;
+    buttonIcon?: React.ReactNode;
+    /** Knapp som skal åpne OverflowMenu
+     * @default IconButton med VerticalDotsIcon
+     */
+    button?: React.ReactElement;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Posisjoneringen av OverflowMenu-lista
+     * @default 'bottom-start'
+     */
+    placement?: Placement;
+    /**
+     * @deprecated Use placement insted.
+     * This is done to standardise the name of
+     * the relative position prop used in Entur
+     * designs sytstem components
+     */
+    position?: 'right' | 'left';
+    /** Tekst som beskriver knappen som åpner Overflow-menyen
+     * @default "åpne valgmeny"
+     */
+    'aria-label'?: string;
+};
+export declare const OverflowMenu: ({ children, className, button, buttonIcon, placement, "aria-label": ariaLabel, ...rest }: OverflowMenuProps) => React.JSX.Element;
+type OverflowMenuItemBaseProps = {
+    /** Innholdet til OverflowMenuItem */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Det som skjer når elementet er valgt, enten ved museklikk eller Enter-klikk */
+    onSelect?: () => void;
+    /** Lenke til siden brukeren skal sendes til.
+     *  Obs: kun én av onSelect og href skal brukes på ett element
+     */
+    href?: string;
+    /** Om dette valget skal være deaktivert */
+    disabled?: boolean;
+};
+export type OverflowMenuItemProps<C extends React.ElementType> = PolymorphicComponentProps<C, OverflowMenuItemBaseProps>;
+export declare const OverflowMenuItem: <C extends React.ElementType = "button">({ children, className, onSelect, href, disabled, as, ...rest }: OverflowMenuItemProps<C>) => React.JSX.Element;
+type OverflowMenuLinkExtendedBaseProps = {
+    /**
+     * @deprecated onSelect is no longer used
+     * in OverflowMenuLink, use 'href' instead */
+    onSelect?: () => void;
+};
+export declare const OverflowMenuLink: <C extends React.ElementType = "a">(props: OverflowMenuItemProps<C> & OverflowMenuLinkExtendedBaseProps) => React.JSX.Element;
+export {};

package/dist/Pagination.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import './Pagination.scss';
+export type PaginationProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Sidenummeret som er aktivt nå (1-indeksert) */
+    currentPage: number;
+    /** Callback for når man ønsker å gå til en ny side */
+    onPageChange: (requestedPage: number) => void;
+    /** Antall sider totalt */
+    pageCount: number;
+    /**
+     * Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
+     * @default "Gå til forrige side"
+     */
+    previousPageLabel?: string;
+    /**
+     * Hva som blir lest opp når brukere av skjermlesere navigerer til "neste side knappen"
+     * @default "Gå til neste side"
+     */
+    nextPageLabel?: string;
+    /**
+     * Hva som blir lest opp når brukere av skjermlesere navigerer til "forrige side knappen"
+     * @default pageNumber => `Gå til side ${pageNumber}`,
+     */
+    pageLabel?: (pageNumber: number) => string;
+    /**
+     * @default "Nåværende side:"
+     */
+    currentPageLabelForScreenreader?: string;
+    /** Vis et felt til høyre for pagineringen hvor man kan angi siden man
+     * ønsker å vise i et tekstfelt.
+     *
+     * @default false
+     */
+    showInput?: boolean;
+    /** Label som vises til venstre for input-feltet som vises om `showInput` er true
+     * @default "Gå til side"
+     */
+    inputLabel?: string;
+    /** Hvor mange resultater man har totalt */
+    numberOfResults?: number;
+    /** Hvor mange resultater som vises per side */
+    resultsPerPage?: number;
+    /**
+     * @default [10,25,50]
+     */
+    resultsPerPageOptions?: number[];
+    /** Callback for når resultater per side oppdateres */
+    onResultsPerPageChange?: (e: number) => void;
+    /** Brukes for å skjule "neste side"-knappen
+     * @default false
+     */
+    hideNextButton?: boolean;
+    /** Brukes for å skjule "forrige side"-knappen
+     * @default false
+     */
+    hidePrevButton?: boolean;
+    /** Teksten som vises for hvilke resultater av sideantallet man viser.
+     * @default `Viser resultat ${minPage} - ${maxPage} av ${pageCount}`
+     */
+    showingResultsLabel?: (minPage: number, maxPage: number, pageCount: number) => string;
+    /** Teksten som vises før "resultsPerPage"-velgeren
+     * @default "Vis"
+     */
+    showNumberOfResultsLabel?: string;
+    [key: string]: any;
+};
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/PaginationInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type PaginationInputProps = {
+    currentPage: number;
+    label?: string;
+    onPageChange: (pageNumber: number) => void;
+    pageCount: number;
+};
+export declare const PaginationInput: React.FC<PaginationInputProps>;

package/dist/PaginationPage.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type PaginationPageProps = {
+    /** Sidenummeret som er aktivt nå */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Viser siden som aktiv */
+    selected?: boolean;
+    /** Viser knappen som inaktiv */
+    disabled?: boolean;
+    /** Callback for når man trykker på siden */
+    onClick: () => void;
+    /** Tekst for skjermlesere */
+    'aria-label': string;
+    'aria-describedby'?: string;
+};
+export declare const PaginationPage: React.FC<PaginationPageProps>;

package/dist/SideNavigation.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './SideNavigation.scss';
+export type SideNavigationProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Størrelse på menyen
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    [key: string]: any;
+};
+type InternalMarker = {
+    __IS_ENTUR_MENU__: boolean;
+};
+export declare const SideNavigation: React.FC<SideNavigationProps> & InternalMarker;
+export {};

package/dist/SideNavigationGroup.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type SideNavigationGroupProps = {
+    /** Skal menygruppen være ekspandert by default? Kun relevant om komponenten ikke er kontrollert
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Er menyen åpen? */
+    open?: boolean;
+    /** Kalles når menygruppen åpnes eller lukkes */
+    onToggle?: (e?: boolean) => void;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Menyen som skal grupperes */
+    children: React.ReactNode;
+    /** Overskriften til menyen */
+    title: React.ReactNode;
+    icon?: React.ReactNode;
+    [key: string]: any;
+};
+export declare const SideNavigationGroup: React.FC<SideNavigationGroupProps>;

package/dist/SideNavigationItem.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PolymorphicComponentProps } from '@entur/utils';
+type BaseSideNavigationItemOwnProps = {
+    active?: boolean;
+    as?: 'a' | 'button' | React.ElementType;
+    className?: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    subMenu?: React.ReactNode;
+    [key: string]: any;
+};
+export type BaseSideNavigationItemProps<T extends React.ElementType = typeof defaultElementBaseItem> = PolymorphicComponentProps<T, BaseSideNavigationItemOwnProps>;
+declare const defaultElementBaseItem = "a";
+export type SideNavigationItemOwnProps = {
+    /** Om meny-elementet er det som er aktivt */
+    active?: boolean;
+    /** HTML-elementet eller React-komponenten som rendres */
+    as?: 'a' | 'button' | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Om meny-elementet er deaktivert */
+    disabled?: boolean;
+    /** Callback for når man klikker på meny-elementet */
+    onClick?: (e: React.MouseEvent) => any;
+    /** Sett til true om du vil tvinge alle sub-menus til å rendre barna sine. Typisk for å vise søkeresultater */
+    forceExpandSubMenus?: boolean;
+    icon?: React.ReactNode;
+    [key: string]: any;
+};
+export type SideNavigationItemProps<T extends React.ElementType = typeof defaultElementItem> = PolymorphicComponentProps<T, SideNavigationItemOwnProps>;
+declare const defaultElementItem = "a";
+export declare const SideNavigationItem: <E extends React.ElementType = typeof defaultElementItem>(props: SideNavigationItemProps<E>) => React.ReactElement | null;
+export {};

package/dist/Stepper.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import './Stepper.scss';
+export type StepperProps = {
+    /** Liste med steg-navn i rekkefølge. */
+    steps: string[];
+    /** Det nåværende steget. 0-indeksert */
+    activeIndex: number;
+    /** Om stepperen skal være et interaktivt-navigasjonselement eller ikke
+     * @default false
+     */
+    interactive?: boolean;
+    /** Kalles med indeksen til det klikkede steget.
+     * Fungerer kun hvis Stepper-en er interaktiv */
+    onStepClick?: (index: number) => void;
+    /** Om stepper skal vise indeksering av hvilket trinn man er på
+     * @default true
+     */
+    showStepperIndex?: boolean;
+    /** Ekstra klassenavn. */
+    className?: string;
+    /** Skjermlesertekst for ordet 'steg' som i '_steg_ 1 av 3'
+     * @default 'Steg'
+     */
+    ariaLabelStep?: string;
+    /** Skjermlesertekst for ordet 'av' som i 'steg 1 _av_ 3'
+     * @defaul 'av'
+     */
+    ariaLabelOf?: string;
+    /** Skjermlesertekst for ordet fullført
+     * @default 'fullført'
+     */
+    ariaLabelCompleted?: string;
+    /** Skjermlesertekst for oppsummering av hele stepper-en
+     * @default `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`
+     */
+    ariaLabelSummary?: string;
+    [key: string]: any;
+};
+export declare const Stepper: React.FC<StepperProps>;

package/dist/TopNavigationItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './TopNavigationItem.scss';
+import { PolymorphicComponentProps } from '@entur/utils';
+export type TopNavigationItemOwnProps = {
+    /** Om komponenten vises som valgt eller ikke
+     * @default false
+     */
+    active?: boolean;
+    /** Tekste som vises */
+    children: React.ReactNode;
+    /** HTML-elementet eller React-komponenten som lager komponenten
+     * @default 'a'
+     */
+    as?: 'a' | React.ElementType;
+    /** Ekstra klassenavn */
+    className?: string;
+};
+export type TopNavigationItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, TopNavigationItemOwnProps>;
+declare const defaultElement = "a";
+export declare const TopNavigationItem: <E extends React.ElementType = "a">({ active, className, as, ...rest }: TopNavigationItemProps<E>) => JSX.Element;
+export {};