@entur/dropdown 9.0.2-beta.0 → 9.1.0

package/dist/Dropdown.d.ts

@@ -1,4 +1,5 @@
 import { default as React, Dispatch, SetStateAction } from 'react';
+import { FeedbackAnnouncementProps } from '../../form';
 import { VariantType } from '../../utils';
 import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
 /** @deprecated use variant="information" instead */
@@ -79,6 +80,80 @@ export type DropdownProps<ValueType> = {
      * @default ', valgt element, trykk for å fjerne'
      */
     ariaLabelSelectedItem?: string;
-};
-export declare const Dropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+} & FeedbackAnnouncementProps;
+export declare const Dropdown: <ValueType extends unknown>(props: {
+    /** Tilgjengelige valg i dropdown-en */
+    items: PotentiallyAsyncDropdownItemType<ValueType>;
+    /** Valgt verdi. Bruk null for ingen verdi. */
+    selectedItem: NormalizedDropdownItemType<ValueType> | null;
+    /** Callback ved valg som skal oppdatere selectedItem */
+    onChange?: ((selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | React.Dispatch<React.SetStateAction<NormalizedDropdownItemType<ValueType> | null>>) | undefined;
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
+    /** Placeholder-tekst når ingenting er satt */
+    placeholder?: string;
+    /** Om man skal ha mulighet for å nullstille Dropdown-en
+     * @default false
+     */
+    clearable?: boolean;
+    /** Velg det markerte elementet når brukeren "tab-er" seg vekk fra komponenten/input-feltet */
+    selectOnTab?: boolean;
+    /** Deaktiver dropdown-en */
+    disabled?: boolean;
+    /** Setter dropdown-en i read-only modus */
+    readOnly?: boolean;
+    /** Hvilken valideringsvariant som gjelder */
+    variant?: VariantType | typeof error | typeof info;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Tekst eller ikon som kommer først i dropdown-feltet */
+    prepend?: React.ReactNode;
+    /** */
+    loading?: boolean;
+    /** En tekst som beskriver hva som skjer når man venter på items
+     * @default 'Laster inn …'
+     */
+    loadingText?: string;
+    /** Tekst som kommer opp når det ikke er noe elementer å vise
+     * @default "Ingen tilgjengelige valg …"
+     */
+    noMatchesText?: string;
+    /** Om man skal ha mulighet for å nullstille Dropdown-en
+     * @default "fjern valgt"
+     */
+    labelClearSelectedItem?: string;
+    /** En tooltip som gir ekstra info om inputfeltet */
+    labelTooltip?: React.ReactNode;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Styling som sendes ned til Dropdown-lista */
+    listStyle?: {
+        [key: string]: any;
+    };
+    /** Styling for Dropdown-en */
+    style?: {
+        [key: string]: any;
+    };
+    /** Tekst for skjemleser for knapp som lukker listen med valg
+     * @default "Lukk liste med valg"
+     */
+    ariaLabelCloseList?: string;
+    /** Tekst for skjemleser for knapp som åpner listen med valg
+     * @default "Åpne liste med valg"
+     */
+    ariaLabelOpenList?: string;
+    /** Ord for at et element er valgt i entall
+     * eks. 'Element 1, _valgt_'
+     * @default 'valgt'
+     */
+    ariaLabelChosenSingular?: string;
+    /** Tekst for skjermleser som beskriver statusen til et element som valgt
+     * @default ', valgt element, trykk for å fjerne'
+     */
+    ariaLabelSelectedItem?: string;
+} & FeedbackAnnouncementProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export {};

package/dist/NativeDropdown.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { FeedbackAnnouncementProps } from '../../form';
 import { VariantType } from '../../utils';
 import { NormalizedDropdownItemType, PotentiallyAsyncDropdownItemType } from './types';
 /** @deprecated use variant="information" instead */
@@ -50,6 +51,51 @@ export type NativeDropdownProps<ValueType> = {
      */
     disableLabelAnimation?: boolean;
     [key: string]: any;
-};
-export declare const NativeDropdown: <ValueType extends string | number>(props: NativeDropdownProps<ValueType> & React.RefAttributes<HTMLSelectElement>) => React.ReactElement | null;
+} & FeedbackAnnouncementProps;
+export declare const NativeDropdown: <ValueType extends string | number>(props: {
+    [key: string]: any;
+    /** Ekstra klassenavn */
+    className?: string;
+    /**
+     * For å deaktivere dropdow-nen
+     * @default false
+     **/
+    disabled?: boolean;
+    /** Valideringsmelding, brukes sammen med `variant` */
+    feedback?: string;
+    /** Alle valg for dropdown-en å ha */
+    items: PotentiallyAsyncDropdownItemType<ValueType>;
+    /** Beskrivende tekst som forklarer feltet */
+    label: string;
+    /** En callback for endringer av value
+     * Obs: merk at parameter her denne ikke er samme som i en HTML select.
+     * Bruk { target } hvis du trenger info om select-elementet som ble trykket på
+     */
+    onChange?: (({ value, selectedItem, target, }: {
+        value: string;
+        selectedItem: NormalizedDropdownItemType<ValueType> | null;
+        target: EventTarget & HTMLSelectElement;
+    }) => void) | undefined;
+    /** Tekst eller ikon som kommer før dropdown-en */
+    prepend?: React.ReactNode;
+    /**
+     * Setter dropdown-en i read-only modus
+     * @default false
+     **/
+    readOnly?: boolean;
+    /** Den valgte verdien som NormalizedDropdownItemType
+     * (Brukes når komponenten er 'controlled')
+     */
+    selectedItem?: NormalizedDropdownItemType<ValueType> | null | undefined;
+    /** Den valgte verdien som sting
+     * (Brukes når komponenten er 'controlled)
+     */
+    value?: string;
+    /** Hvilken valideringsvariant som gjelder*/
+    variant?: VariantType | typeof error | typeof info;
+    /** Plasserer labelen statisk på toppen av inputfeltet
+     * @default false
+     */
+    disableLabelAnimation?: boolean;
+} & FeedbackAnnouncementProps & React.RefAttributes<HTMLSelectElement>) => React.ReactElement | null;
 export {};

package/dist/SearchableDropdown.d.ts

@@ -23,7 +23,37 @@ export type SearchableDropdownProps<ValueType> = DropdownProps<ValueType> & {
     /** Callback når input-feltet får fokus */
     onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
 };
-export declare const SearchableDropdown: <ValueType extends unknown>(props: DropdownProps<ValueType> & {
+export declare const SearchableDropdown: <ValueType extends unknown>(props: {
+    items: import('./types').PotentiallyAsyncDropdownItemType<ValueType>;
+    selectedItem: NormalizedDropdownItemType<ValueType> | null;
+    onChange?: ((selectedItem: NormalizedDropdownItemType<ValueType> | null) => void | React.Dispatch<React.SetStateAction<NormalizedDropdownItemType<ValueType> | null>>) | undefined;
+    label: string;
+    placeholder?: string;
+    clearable?: boolean;
+    selectOnTab?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    variant?: import('../../utils').VariantType | "error" | "info";
+    feedback?: string;
+    prepend?: React.ReactNode;
+    loading?: boolean;
+    loadingText?: string;
+    noMatchesText?: string;
+    labelClearSelectedItem?: string;
+    labelTooltip?: React.ReactNode;
+    disableLabelAnimation?: boolean;
+    className?: string;
+    listStyle?: {
+        [key: string]: any;
+    };
+    style?: {
+        [key: string]: any;
+    };
+    ariaLabelCloseList?: string;
+    ariaLabelOpenList?: string;
+    ariaLabelChosenSingular?: string;
+    ariaLabelSelectedItem?: string;
+} & import('../../form').FeedbackAnnouncementProps & {
     /** Filtreringen som brukes når man skriver inn tekst i inputfeltet
      * @default Regex-test som sjekker om item.label inneholder input-teksten
      */

package/dist/dropdown.cjs

@@ -387,6 +387,15 @@ const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
     fetchItems: debouncedFetchItems
   };
 };
+function useFloatingRef(setElement) {
+  const latestSetElement = React.useRef(setElement);
+  React.useLayoutEffect(() => {
+    latestSetElement.current = setElement;
+  }, [setElement]);
+  return React.useCallback((node) => {
+    if (node !== null) latestSetElement.current(node);
+  }, []);
+}
 function createShadowEnvironment(shadowRoot) {
   return {
     addEventListener: shadowRoot.addEventListener.bind(shadowRoot),
@@ -697,6 +706,7 @@ const SearchableDropdown = React.forwardRef(
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
     React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
@@ -712,7 +722,7 @@ const SearchableDropdown = React.forwardRef(
     });
     const menuProps = getMenuProps({
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     const inputProps = getInputProps({
@@ -810,7 +820,8 @@ const SearchableDropdown = React.forwardRef(
               className: classNames("eds-dropdown__input eds-form-control", {
                 "eds-dropdown__input--hidden": showSelectedItem
               }),
-              ...inputProps
+              ...inputProps,
+              "aria-invalid": variant === "negative" || variant === "error"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1077,6 +1088,7 @@ const MultiSelect = React.forwardRef(
         reactDom.flip({ fallbackStrategy: "initialPlacement" })
       ]
     });
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
     React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
@@ -1120,7 +1132,7 @@ const MultiSelect = React.forwardRef(
     const menuProps = getMenuProps({
       "aria-multiselectable": true,
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     const toggleButtonProps = getToggleButtonProps({
@@ -1212,7 +1224,13 @@ const MultiSelect = React.forwardRef(
                     selectedItem: summarySelectedItems
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps })
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    "aria-invalid": variant === "negative" || variant === "error"
+                  }
+                )
               ]
             }
           ),
@@ -1238,6 +1256,7 @@ const MultiSelect = React.forwardRef(
     );
   }
 );
+const error$1 = "error";
 const Dropdown = React.forwardRef(
   ({
     ariaLabelChosenSingular,
@@ -1321,6 +1340,8 @@ const Dropdown = React.forwardRef(
       ]
     });
     floatingRefs = refs;
+    const setFloatingMenu = useFloatingRef(refs.setFloating);
+    const setFloatingReference = useFloatingRef(refs.setReference);
     React.useLayoutEffect(() => {
       if (isOpen && refs.reference.current && refs.floating.current) {
         return reactDom.autoUpdate(
@@ -1338,7 +1359,7 @@ const Dropdown = React.forwardRef(
       isFilled
     });
     const toggleButtonProps = getToggleButtonProps({
-      ref: utils.mergeRefs(ref, refs.setReference, toggleButtonRef),
+      ref: utils.mergeRefs(ref, setFloatingReference, toggleButtonRef),
       "aria-disabled": disabled,
       "aria-label": disabled ? "Disabled dropdown" : "",
       disabled,
@@ -1359,7 +1380,7 @@ const Dropdown = React.forwardRef(
     });
     const menuProps = getMenuProps({
       refKey: "innerRef",
-      ref: refs.setFloating,
+      ref: setFloatingMenu,
       style: listStyle
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1376,6 +1397,7 @@ const Dropdown = React.forwardRef(
         style,
         variant,
         ...toggleButtonProps,
+        "aria-invalid": variant === "negative" || variant === error$1,
         after: /* @__PURE__ */ jsxRuntime.jsx(
           DropdownList,
           {
@@ -1449,6 +1471,8 @@ const NativeDropdown = React.forwardRef(
     style,
     value,
     variant,
+    ariaAlertOnFeedback,
+    feedbackProps,
     ...rest
   }, ref) => {
     const { items: normalizedItems, loading } = useResolvedItems(items);
@@ -1459,6 +1483,8 @@ const NativeDropdown = React.forwardRef(
         disabled,
         readOnly,
         prepend,
+        ariaAlertOnFeedback,
+        feedbackProps,
         append: /* @__PURE__ */ jsxRuntime.jsx(
           FieldAppend,
           {