@fremtind/jokul 0.8.1 → 0.10.0

package/build/components/datepicker/types.d.ts

@@ -0,0 +1,269 @@
+import { ChangeEvent, KeyboardEvent, FocusEvent, ButtonHTMLAttributes } from 'react';
+import { DataTestAutoId, Density } from '../../core';
+import { InputGroupProps, LabelProps } from '../input-group';
+export type DateValidationError = "WRONG_FORMAT" | "OUTSIDE_LOWER_BOUND" | "OUTSIDE_UPPER_BOUND";
+export type DatePickerChangeEventHandler = (e: ChangeEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerBlurEventHandler = (e: FocusEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerFocusEventHandler = DatePickerBlurEventHandler;
+export type DatePickerKeyDownEventHandler = (e: KeyboardEvent<HTMLInputElement>, date: Date | null, meta: DatePickerMetadata) => void;
+export type DatePickerMetadata = {
+    error: DateValidationError | null;
+    /** Samme som event.target.value */
+    value: string;
+};
+export type YearsToShow = number | "all" | {
+    previous: number;
+    coming: number;
+};
+export interface DatePickerProps extends Omit<InputGroupProps, "label" | "children">, DataTestAutoId {
+    /** Settes på rotnivå. */
+    id?: string;
+    /** Settes på rotnivå. */
+    className?: string;
+    /**
+     * @default "Velg dato"
+     */
+    label?: string;
+    /**
+     * Bruk labelProps for å sette props som `variant` og `srOnly`.
+     *
+     * @example
+     *  ```tsx
+     *  <DatePicker
+     *      labelProps={{ srOnly: true }}
+     *  />
+     *  ```
+     */
+    labelProps?: Omit<LabelProps, "children">;
+    /**
+     * dd.mm.åååå
+     *
+     * Dersom komponenten ikke er _controlled_, send inn ønsket standardverdi her (hvis noen).
+     *
+     * @default undefined // tomt skjemafelt
+     */
+    defaultValue?: string;
+    /**
+     * Styr om du vil at kalenderen skal starte åpen.
+     * @default false
+     */
+    defaultShow?: boolean;
+    /**
+     * dd.mm.åååå
+     *
+     * Verdien til inputfeltet.
+     */
+    value?: string;
+    /**
+     * dd.mm.åååå
+     *
+     * Skru av knapper i kalenderen før denne datoen,
+     * og gi valideringsfeil om dato som har blitt skrevet inn er utenfor.
+     */
+    disableBeforeDate?: string;
+    /**
+     * dd.mm.åååå
+     *
+     * Skru av knapper i kalenderen etter denne datoen,
+     * og gi valideringsfeil om dato som har blitt skrevet inn er utenfor.
+     */
+    disableAfterDate?: string;
+    /**
+     * Angir hvor mange år som skal vises i nedtrekkslisten i kalenderen. Du kan angi samme verdi
+     * for kommende og foregående år ved å sende inn et tall, eller sende inn et objekt med separate
+     * verdier for kommende og foregående år. Hvis du sender inn "all" vil alle år mellom min. og
+     * maks. dato vises i listen (eller default antall år hvis ikke min./maks. dato er angitt).
+     * @default 3
+     */
+    yearsToShow?: YearsToShow;
+    /**
+     * Settes på inputfeltet.
+     */
+    name?: string;
+    /**
+     * Hjelpetekst som vises under inputfeltet.
+     */
+    helpLabel?: string;
+    /**
+     * Hvis datovelgeren har valideringsfeil må dette feltet settes. Inputfeltet
+     * merkes som ugyldig og teksten erstatter en eventuell hjelpetekst.
+     */
+    errorLabel?: string;
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    density?: Density;
+    /**
+     * @deprecated Kalenderen viser nå alltid kontroller for å navigere mellom år og måneder. Denne prop'en gjør ikke lenger noe og kan fjernes.
+     */
+    extended?: boolean;
+    /**
+     * Om du ønsker andre labels for ukedagene kan du gi de her.
+     */
+    days?: string[];
+    /**
+     * Om du ønsker andre labels for måneder kan du gi de her.
+     */
+    months?: string[];
+    /**
+     * Overstyr hvordan vi omtaler "Måned".
+     * @default "Måned"
+     */
+    monthLabel?: string;
+    /**
+     * Overstyr hvordan vi omtaler "År".
+     * @default "År"
+     */
+    yearLabel?: string;
+    /**
+     * Vises i inputfeltet hvis det ikke har noen input, som hint for datoformat.
+     * @default "dd.mm.åååå"
+     */
+    placeholder?: string;
+    /**
+     * Bredden på inputfeltet, tilpasset typisk bredde for en dato i formatet `dd.mm.åååå`.
+     * @default "10ch"
+     */
+    width?: string;
+    /**
+     * Kalles ved change-event fra datovelgerens inputfelt. Verdien fra selve eventet vil
+     * alltid være teksten fra inputfeltet.
+     *
+     * Det er _ikke_ garantert at verdien fra `event.target.value` er en
+     * gyldig dato, eller i datoformat. Andre parameter vil enten være en gyldig
+     * `Date` eller `null`. Tredje parameter har informasjon om validering,
+     * men du kan også gjøre validering selv rett på `event.target.value`
+     * med utility-funksjoner som eksporteres fra pakka (se eksempel lenger ned).
+     *
+     * Kalles også når brukeren velger en dato fra kalendervisningen. Kallet
+     * prøver å simulere et vanlig change-event så nært som mulig.
+     *
+     * Bruk meta-objektet for å se om det er valideringsfeil, og i så fal hvilken type feil:
+     *
+     *  - ugyldig format på tekst
+     *  - dato utenfor minimum tillatte dato (satt med `disableBeforeDate`)
+     *  - dato utenfor maksimum tillatte dato (satt med `disableAfterDate`)
+     *
+     * @example
+     *
+     *  ```tsx
+     *  <DatePicker
+     *      value={value}
+     *      onChange={(e, date, meta) => {
+     *          setValue(e.target.value);
+     *
+     *          console.log("onChange", {
+     *              event: e,
+     *              date,
+     *              meta,
+     *          });
+     *      }}
+     *  />
+     *  ```
+     *
+     * @example
+     *
+     *  ```tsx
+     *  import {
+     *      DatePicker,
+     *      formatInput,
+     *      isCorrectFormat,
+     *      isWithinUpperBound,
+     *      isWithinLowerBound,
+     *      parseDateString
+     *  } from "@fremtind/jkl-datepicker-react";
+     *  import { formatDate } from "@fremtind/jkl-formatters-util";
+     *
+     *  <DatePicker
+     *      label="Fødselsdato"
+     *      errorLabel={formState.errors.fodselsdato?.message}
+     *      disableBefore="01.01.1970"
+     *      disableAfter={formatInput(new Date())}
+     *      {...register("fodselsdato", {
+     *          required: "Du må fylle ut fødselsdato",
+     *          validate: {
+     *              isCorrectFormat: (v) =>
+     *                  isCorrectFormat(v) ||
+     *                  `Datoen må være skrevet i formen ${formatDate(new Date())} eller kortformat`,
+     *              withinLowerBound: (v) =>
+     *                  isWithinLowerBound(v, parseDateString("01.01.1970") || "Datoen må være før 01.01.1970"",
+     *              withinUpperBound: (v) =>
+     *                  isWithinUpperBound(v, new Date()) || `Datoen må være før ${formatDate(new Date())}`,
+     *          },
+     *      })}
+     *  />
+     *  ```
+     */
+    onChange?: DatePickerChangeEventHandler;
+    /**
+     * Kalles ved focus-event fra datovelgerens inputfelt.
+     *
+     * @example
+     *  ```tsx
+     *  <DatePicker
+     *      onFocus={(e, date, meta) => {
+     *          console.log("onFocus", {
+     *              event: e,
+     *              date,
+     *              meta,
+     *          });
+     *      }}
+     *  />
+     *  ```
+     */
+    onFocus?: DatePickerFocusEventHandler;
+    /**
+     * Kalles ved blur-event fra datovelgerens inputfelt, og kommer når fokus flyttes ut
+     * av skjemaelementet.
+     *
+     * **NB!** Dette inkluderer når fokus flyttes inn i kalenderen, eller til kalenderknappen!
+     *
+     * Om du ønsker å gjøre ting når brukeren går videre fra hele DatePicker:
+     *   1. Ha en onBlur på DatePicker, men ignorere events når fokus er inni DatePicker
+     *   2. Ha en onBlur på DatePicker sin action-prop (kalenderknappen), og gjøre det samme
+     *
+     * Hjelpefunksjonen isBlurTargetOutside hjelper med detaljene.
+     *
+     * @example
+     *  ```tsx
+     *  import { DatePicker, isBlurTargetOutside } from "@fremtind/jkl-datepicker-react";
+     *
+     *  <DatePicker
+     *      onBlur={(e, date, meta) => {
+     *          // Ignorer blurs som går til kalenderknapper
+     *          if (isBlurTargetOutside(e)) {
+     *              console.log("onBlur");
+     *          }
+     *      }}
+     *      action={{
+     *          onBlur: (e) => {
+     *              // Ignorer blurs som går tilbake til inputfeltet
+     *              if (isBlurTargetOutside(e)) {
+     *                  console.log("action.onBlur");
+     *              }
+     *          },
+     *      }}
+     *  />
+     *  ```
+     */
+    onBlur?: DatePickerBlurEventHandler;
+    /**
+     * Kalles ved onKeyDown på datovelgerens inputfelt. Dersom du trenger å fange opp
+     * alle tastetrykk, inkludert Tab videre til knappen for å åpne/lukke kalenderen,
+     * så kan du bruke dette eventet.
+     *
+     * @deprecated Eventet har mye overlapp med onChange, men var tidligere eneste metode for å
+     * få tilbakemelding ved tastetrykk i inputfeltet. Foretrekk onChange for ny kode.
+     */
+    onKeyDown?: DatePickerKeyDownEventHandler;
+    /**
+     * Lar deg sette lyttere på kalenderknappen i skjemafeltet.
+     */
+    action?: DatePickerAction;
+    showCalendarLabel?: string;
+    hideCalendarLabel?: string;
+}
+export interface DatePickerAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
+}

package/build/components/datepicker/utils.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export declare const dayMonthYearRegex: RegExp;
+/**
+ * Format a Date object as a string in the format DatePicker expects.
+ *
+ * @param date the Date object to format
+ * @return returns a date string with "dd.mm.yyyy"-format
+ */
+export declare function formatInput(date: Date): string;
+/**
+ * Convert a date string to a Date object
+ *
+ * @param dateString date as string with format dd.mm.yyyy
+ * @return a Date object representing the given date
+ */
+export declare function parseDateString(dateString?: string): Date | undefined;
+/**
+ * Hjelpefunksjon for å se om en onBlur går utenfor DatePicker,
+ * eller om den går til et interaktivt element inni DatePickeren.
+ * @param {React.FocusEvent<HTMLButtonElement | HTMLInputElement>} e - Eventet fra onBlur og action.onBlur
+ * @returns {boolean} true hvis e.relatedTarget er utenfor DatePicker
+ */
+export declare function isBlurTargetOutside(e: React.FocusEvent<HTMLButtonElement | HTMLInputElement>): boolean;

package/build/components/datepicker/validation.d.ts

@@ -0,0 +1,11 @@
+export declare function isCorrectFormat(value: string | undefined): boolean;
+type ComparisonOptions = {
+    /**
+     * Kontroller om testen skal godkjennes om verdien er lik
+     * @default false
+     */
+    inclusive: boolean;
+};
+export declare function isWithinLowerBound(value: Date | string | undefined, minDate: Date, options?: ComparisonOptions): boolean;
+export declare function isWithinUpperBound(value: Date | string | undefined, maxDate: Date, options?: ComparisonOptions): boolean;
+export {};

package/build/components/index.d.ts

@@ -1,10 +1,22 @@
+export * from './accordion';
+export * from './breadcrumb';
+export * from './button';
 export * from './card';
+export * from './checkbox';
+export * from './combobox';
+export * from './cookie-consent';
+export * from './datepicker';
 export * from './icon';
 export * from './icon-button';
 export * from './input-group';
 export * from './link';
 export * from './link-list';
+export * from './list';
 export * from './loader';
+export * from './modal';
+export * from './radio-button';
+export * from './select';
 export * from './tag';
+export * from './text-input';
 export * from './tooltip';
 export { ScreenReaderOnly, type ScreenReaderOnlyProps } from './ScreenReaderOnly';

package/build/components/list/List.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+export interface ListProps extends WithChildren {
+    className?: string;
+}
+export declare const UnorderedList: React.FC<ListProps>;
+export declare const OrderedList: React.FC<ListProps>;
+export declare const List: React.FC<ListProps>;

package/build/components/list/ListItem.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { WithChildren } from '../..';
+export interface ListItemProps extends WithChildren {
+    className?: string;
+}
+export declare const ListItem: React.FC<ListItemProps>;
+export declare const CrossListItem: React.FC<ListItemProps>;
+export declare const CheckListItem: React.FC<ListItemProps>;

package/build/components/list/index.d.ts

@@ -0,0 +1,3 @@
+export type { ListProps } from './List';
+export { UnorderedList, OrderedList, List } from './List';
+export { ListItem, CheckListItem, CrossListItem } from './ListItem';

package/build/components/modal/Modal.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { WithOptionalChildren } from '../..';
+import { IconButtonProps } from '../icon-button';
+export interface ModalProps extends WithOptionalChildren {
+    id?: string;
+    className?: string;
+    component?: React.ElementType;
+    style?: React.CSSProperties;
+    /**
+     * Overstyrer padding på modalen via en CSS-variabel.
+     */
+    padding?: 16 | 24 | 40;
+}
+type BaseModalProps = Omit<ModalProps, "padding" | "component">;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
+    id: string;
+    ref: (node: HTMLElement | React.ReactNode) => void;
+    role: string;
+    'aria-modal': boolean;
+    'aria-hidden': boolean;
+    'aria-labelledby': string;
+} & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalOverlay: React.ForwardRefExoticComponent<{
+    onClick?: (() => void) | undefined;
+} & BaseModalProps & {
+    /**
+     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
+     */
+    transparent?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<{
+    role: "document";
+} & ModalProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalHeader: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalTitle: React.ForwardRefExoticComponent<{
+    role: "heading";
+    'aria-level': number;
+    id: string;
+} & BaseModalProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalCloseButton: React.ForwardRefExoticComponent<Omit<{
+    type: "button";
+    onClick: () => void;
+} & {
+    "aria-label": string;
+}, "onClick"> & BaseModalProps & IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalBody: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalActions: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/build/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+export type { ModalProps } from './Modal';
+export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal';
+export type { UseModalOptions, ModalInstance, ModalConfig } from './useModal';
+export { useModal } from './useModal';

package/build/components/modal/useModal.d.ts

@@ -0,0 +1,69 @@
+import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
+export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
+    id?: string;
+    /**
+     * @default "Lukk"
+     */
+    closeButtonLabel?: string;
+    /**
+     * Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.
+     *
+     * @default "dialog"
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.
+     */
+    title: string;
+}
+export type ModalInstance = ReturnType<typeof useModal>[0];
+export interface ModalConfig extends Omit<A11yDialogConfig, "dialog"> {
+    modal: A11yDialogConfig["dialog"];
+    closeButton: A11yDialogConfig["closeButton"] & {
+        "aria-label": string;
+    };
+}
+/**
+ * @example
+ * ```jsx
+ * const heading = "Bekreft sletting";
+ * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });
+ *
+ * useEffect(() => {
+ *      if (!instance) {
+ *          return;
+ *      }
+ *      instance.show();
+ *  }, [instance]);
+ *
+ * return ReactDOM.createPortal(
+ *      <ModalContainer {...container}>
+ *          <ModalOverlay {...overlay} />
+ *          <Modal {...modal}>
+ *              <ModalHeader>
+ *                  <ModalTitle {...title}>{heading}</ModalTitle>
+ *                  <ModalCloseButton {...closeButton} />
+ *              </ModalHeader>
+ *              <ModalBody>
+ *                  Er du sikker på at du vil slette Foo Bar Baz?
+ *              </ModalBody>
+ *              <ModalActions>
+ *                  <PrimaryButton
+ *                      onClick={() => {
+ *                          // Do the thing
+ *                          instance?.hide()
+ *                      }}
+ *                  >
+ *                      Bekreft
+ *                  </PrimaryButton>
+ *                  <TertiaryButton onClick={() => instance?.hide()}>
+ *                     Avbryt
+ *                 </TertiaryButton>
+ *              </ModalActions>
+ *          </Modal>
+ *      </ModalContainer>,
+ *      document.body,
+ *  );
+ * ```
+ */
+export declare function useModal(props: UseModalOptions): readonly [A11yDialog.A11yDialog, ModalConfig];

package/build/components/radio-button/BaseRadioButton.d.ts

@@ -0,0 +1,10 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density } from '../..';
+import { RadioButtonProps } from './RadioButton';
+export interface BaseRadioButtonProps extends RadioButtonProps {
+    inline?: boolean;
+    density?: Density;
+    invalid?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const BaseRadioButton: React.ForwardRefExoticComponent<BaseRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/components/radio-button/RadioButton.d.ts

@@ -0,0 +1,15 @@
+import { default as React, InputHTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
+import { SupportLabelProps } from '../input-group';
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    children?: ReactNode;
+    value: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    name?: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** @deprecated Bruk children */
+    label?: ReactNode;
+    helpLabel?: ReactNode;
+    supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/components/radio-button/RadioButtonGroup.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEventHandler, FC } from 'react';
+import { Density } from '../..';
+import { FieldGroupProps } from '../input-group';
+export interface RadioButtonGroupProps extends Omit<FieldGroupProps, "onChange"> {
+    legend: string;
+    /** Alle RadioButton i gruppen får dette som name. */
+    name?: string;
+    /** Om gruppen skal være controlled setter du den valgte verdien her. */
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    helpLabel?: string;
+    /**
+     * Erstatter hjelpeteksten (hvis noen) med en feilmelding.
+     * Merker samtidig alle RadioButton i gruppen som ugyldige.
+     */
+    errorLabel?: string;
+    /**
+     * Setter inline-modifieren på alle RadioButton i gruppen.
+     * @default false
+     */
+    inline?: boolean;
+    density?: Density;
+}
+export declare const RadioButtonGroup: FC<RadioButtonGroupProps>;

package/build/components/radio-button/index.d.ts

@@ -0,0 +1,6 @@
+export type { RadioButtonProps } from './RadioButton';
+export { RadioButton } from './RadioButton';
+export type { RadioButtonGroupProps } from './RadioButtonGroup';
+export { RadioButtonGroup } from './RadioButtonGroup';
+export type { BaseRadioButtonProps } from './BaseRadioButton';
+export { BaseRadioButton } from './BaseRadioButton';

package/build/components/radio-button/radioGroupContext.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density, WithChildren } from '../..';
+type RadioGroupContext = {
+    name: string | undefined;
+    value: string | undefined;
+    inline: boolean;
+    density?: Density;
+    invalid: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement> | undefined;
+};
+export declare const useRadioGroupContext: () => RadioGroupContext;
+interface Props extends WithChildren {
+    state: RadioGroupContext;
+}
+export declare const RadioGroupContextProvider: React.FC<Props>;
+export {};

package/build/components/select/NativeSelect.d.ts

@@ -0,0 +1,19 @@
+import { default as React, SelectHTMLAttributes } from 'react';
+import { ValuePair } from '../..';
+import { InputGroupProps } from '../input-group';
+export interface NativeSelectProps extends Omit<InputGroupProps, "children">, SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    /**
+     * Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.
+     * @default "Velg"
+     */
+    placeholder?: string;
+    items: Array<string | ValuePair>;
+    selectClassName?: string;
+    width?: string;
+}
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;

package/build/components/select/Select.d.ts

@@ -0,0 +1,53 @@
+import { default as React, ChangeEvent } from 'react';
+import { ValuePair, DataTestAutoId, Density } from '../..';
+import { LabelProps, InputGroupProps } from '../input-group';
+interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLSelectElement>, "target">> {
+    /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change */
+    type: "change" | "blur";
+    target: {
+        /** Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret */
+        name: string;
+        value: string;
+    };
+}
+type ChangeEventHandler = (event: PartialChangeEvent) => void;
+export interface SelectProps extends Omit<InputGroupProps, "children">, DataTestAutoId {
+    id?: string;
+    name: string;
+    label: string;
+    labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
+    items: Array<string | ValuePair>;
+    /**
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * @default "Velg"
+     */
+    defaultPrompt?: string;
+    className?: string;
+    value?: string;
+    helpLabel?: string;
+    errorLabel?: string;
+    /**
+     * @default false
+     */
+    searchable?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);
+    density?: Density;
+    width?: string;
+    onChange?: ChangeEventHandler;
+    onBlur?: ChangeEventHandler;
+    onFocus?: ChangeEventHandler;
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    /**
+     * Hvor mange valg skal vises i listen før den begynner å scrolle.
+     * @default 5
+     */
+    maxShownOptions?: number;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/build/components/select/index.d.ts

@@ -0,0 +1,4 @@
+export type { SelectProps } from './Select';
+export { Select } from './Select';
+export type { NativeSelectProps } from './NativeSelect';
+export { NativeSelect } from './NativeSelect';

package/build/components/select/select-utils.d.ts

@@ -0,0 +1,2 @@
+export declare function toLower(str?: string): string;
+export declare function focusSelected(listEl: HTMLElement, selected: string | undefined): void;