asma-ui-core 3.111.0 → 3.113.0

package/dist/src/components/inputs/full-screen-picker/FullScreenPicker.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { DialogCloseReason } from '../../feedback/dialog/StyledDialog';
+import { PickerAnnouncement } from './PickerLiveRegion';
+export type FullScreenPickerCloseReason = DialogCloseReason | 'closeButton';
+export interface FullScreenPickerProps {
+    open: boolean;
+    /** Close button, Escape and native Back. Always a cancel: the caller discards anything not applied. */
+    onClose: (reason: FullScreenPickerCloseReason) => void;
+    dataTest: string;
+    /** The field label. Wraps onto as many lines as it needs; it is never truncated. */
+    title?: ReactNode;
+    /** Accessible name of the dialog when there is no `title`. */
+    fallbackName?: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** The search field — rendered full width under the title, or beside it on a short viewport. */
+    search: ReactNode;
+    /** The selection row (several choices) or the clear row (one choice). Part of the fixed header. */
+    headerRow?: ReactNode;
+    /** The list. It is the only part that scrolls. */
+    children: ReactNode;
+    /** Polite announcement rendered inside the dialog (counts, matches, clears). */
+    announcement?: PickerAnnouncement;
+}
+/**
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#45614-217265
+ * Figma "Select mobile full-screen picker": a full-screen sheet with a fixed **Header** (title, close,
+ * search, optional selection/clear row; 1 px `border/separator` delta-200 under it) and one scrolling
+ * **List**. Title = Mobile/Page title, SemiBold 20/28, `text-icon/title-label` delta-800, wraps.
+ * Close = 40 × 40 Quaternary button with a 24 px ×. Search row = `pt-8 px-16`. On a short viewport
+ * (`Variant2`, ≤ 480 px high) title, search (max 240 px) and close share the first row.
+ *
+ * The shared shell for every full-screen picker in ui-core: `StyledSelectAutocomplete` and
+ * `CountryCodeSelect` both render through it (ASMA-8468). Presentation only — the caller owns the
+ * query, the list, the keyboard and what closing means. Nothing is focused for typing on open, so
+ * the on-screen keyboard appears only when the user taps the search field (REQ-006). Opened from
+ * the keyboard, focus goes to the `listbox` in `children` when it is a Tab stop (else to the close
+ * button), where the arrows work at once. Native Back comes from `StyledDialog` (D-004).
+ *
+ * For a project's own picker (exported from `asma-ui-core`): render it below the same breakpoint
+ * as the selects (`max-width: 743px` or `max-height: 480px`); pass the search field and the list;
+ * make the list a `role="listbox"` with `tabIndex={0}` and `aria-activedescendant` if it should
+ * take keyboard focus on open; announce counts with `useAnnouncer`.
+ *
+ * @example
+ * const [announcement, announce] = useAnnouncer()
+ * <FullScreenPicker
+ *     open={open}
+ *     onClose={() => setOpen(false)}            // ×, Escape and Back: a cancel
+ *     dataTest='templates-picker'
+ *     title='Add questionnaires'
+ *     closeLabel='Close'
+ *     search={<StyledSearchField dataTest='templates-search' label='Search' value={query} fullWidth onChange={…} />}
+ *     headerRow={<MySelectionRow />}            // optional: count, clear, Done
+ *     announcement={announcement}
+ * >
+ *     <ul role='listbox' aria-label='Questionnaires' tabIndex={0} aria-activedescendant={activeId}>…</ul>
+ * </FullScreenPicker>
+ *
+ * @see asma-modules/_docs/frontend/plans/2026-10-19-11-04-plan-full-screen-select-picker-phones.md:203 — TASK-004
+ */
+export declare const FullScreenPicker: ({ open, onClose, dataTest, title, fallbackName, ...sheet }: FullScreenPickerProps) => JSX.Element;

package/dist/src/components/inputs/full-screen-picker/PickerLiveRegion.d.ts

@@ -0,0 +1,31 @@
+/** One message for a live region. `id` changes on every `announce`, so a repeated text is read again. */
+export interface PickerAnnouncement {
+    text: string;
+    id: number;
+}
+/**
+ * Holds the latest announcement for `FullScreenPicker`'s `announcement` prop, which a screen reader
+ * reads out politely from inside the dialog (counts, matches, *No matches*). `announce` accepts the
+ * same text twice and still re-announces it; `reset` forgets it, so the next opening starts silent.
+ *
+ * @example
+ * const [announcement, announce, resetAnnouncement] = useAnnouncer()
+ * // on a tick: announce(`${ticked.length} selected`); when the picker opens: resetAnnouncement()
+ * <FullScreenPicker announcement={announcement} … />
+ */
+export declare const useAnnouncer: () => [PickerAnnouncement | undefined, (text: string) => void, () => void];
+/**
+ * Polite live region for the picker (ASMA-8468 REQ-011/013/016). Inside the dialog it must be
+ * rendered **in** the dialog: while `showModal()` is active everything outside is inert and not
+ * reliably announced (ALT-005).
+ *
+ * The text is emptied and set again on the next frame, so the same message twice in a row
+ * (`0 valgt` after two clears) is read out again. Both steps write the DOM directly, not React
+ * state: two state updates that land before React renders merge into "no change", and an unchanged
+ * region is not read out again. The frame's delay also lets a closing dialog leave the top layer
+ * first, so a message set as it closes is heard.
+ */
+export declare const PickerLiveRegion: ({ announcement, dataTest, }: {
+    announcement?: PickerAnnouncement;
+    dataTest?: string;
+}) => JSX.Element;

package/dist/src/components/inputs/full-screen-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { FullScreenPicker, type FullScreenPickerProps, type FullScreenPickerCloseReason } from './FullScreenPicker';
+export { useAnnouncer } from './PickerLiveRegion';

package/dist/src/components/inputs/full-screen-picker/pickerCopy.d.ts

@@ -0,0 +1,29 @@
+import { UiCoreLocale } from '../../../helpers/uiCoreLocale';
+/**
+ * Every string the full-screen picker shows or announces (ASMA-8468). ui-core ships Norwegian and
+ * English defaults; a consumer overrides any of them through `pickerText`.
+ *
+ * @see asma-modules/_docs/frontend/plans/2026-10-19-11-04-plan-full-screen-select-picker-phones.md:206 — TASK-007
+ */
+export interface PickerText {
+    /** Accessible name of the close button. */
+    close: string;
+    /** Label of the search field. */
+    search: string;
+    /** Several choices: applies the ticks and closes. */
+    done: string;
+    /** One choice, optional field: empties the field. */
+    clearOne: string;
+    /** Several choices: unticks everything, including ticks hidden by the search. */
+    clearAll: string;
+    selectedCount: (count: number) => string;
+    noMatches: string;
+    matchCount: (count: number) => string;
+    /** Announced after `clearOne`. */
+    cleared: string;
+    /** Announced after `clearAll`. */
+    clearedAll: string;
+    truncated: (shown: number, total: number) => string;
+}
+/** Default picker copy for `locale`, with any consumer overrides applied on top. */
+export declare const getPickerText: (locale: UiCoreLocale, overrides?: Partial<PickerText>) => PickerText;

package/dist/src/components/inputs/full-screen-picker/useVisualViewportHeight.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The visible height in CSS px — the part of the screen the on-screen keyboard does not cover.
+ *
+ * iOS Safari keeps `100%`/`dvh` at the full layout height while the keyboard is up, so a list sized
+ * by CSS alone ends behind the keyboard. The picker sizes its column with this instead (ASMA-8468
+ * REQ-008, RISK-004 — verify on a real device).
+ */
+export declare const useVisualViewportHeight: () => number;

package/dist/src/components/inputs/input-field/StyledInputField.d.ts

@@ -44,7 +44,10 @@ export interface StyledInputFieldProps {
     expandHelperText?: boolean;
     /** Character limit; also readable from `slotProps.htmlInput.maxLength`. */
     maxLength?: number;
-    /** Shows the count against `maxLength` as the user types, for free text with a limit. */
+    /**
+     * Count against `maxLength`, on by default whenever the field has a limit (WID-12). Pass `false`
+     * for a fixed format such as a postal code, whose length the label or hint already states.
+     */
     counter?: boolean;
     /** Language of the counter text. */
     locale?: UiCoreLocale;

package/dist/src/components/inputs/phone-field/CountryCodeOptions.d.ts

@@ -1,3 +1,4 @@
+import { KeyboardEvent } from 'react';
 import { PhoneCountryChoice, RenderCountryFlag } from './types';
 export interface CountryCodeOptionsProps {
     dataTest: string;
@@ -12,9 +13,16 @@ export interface CountryCodeOptionsProps {
     label: string;
     renderFlag?: RenderCountryFlag;
     className?: string;
+    /**
+     * Makes the list a Tab stop of its own (the mobile sheet, ASMA-8468), driven by these keys and
+     * the 3 px active-row marker. Without it the list is only driven from the combobox (desktop).
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+    /** Tabbing into the list: put the active-row marker on a row. */
+    onFocus?: () => void;
 }
 /**
  * The country listbox. Presentation only — filtering, the active row and the keyboard live in
  * [[useCountryPicker]], so the desktop trigger and the mobile sheet render the same list.
  */
-export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, }: CountryCodeOptionsProps) => JSX.Element;
+export declare const CountryCodeOptions: ({ dataTest, visible, selectedIso2, activeIndex, optionId, onSelect, listId, label, renderFlag, className, onKeyDown, onFocus, }: CountryCodeOptionsProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/CountryCodeSelect.d.ts

@@ -23,8 +23,9 @@ export interface CountryCodeSelectProps {
  * - **Desktop** — the trigger *is* the combobox. Opening it turns the calling-code slot into an
  *   input and typing filters the list below, which is what Figma draws (the open trigger carries a
  *   text cursor, and the menu holds rows only — node 8565:284950 has no search field).
- * - **Mobile** — a full-screen sheet with its own search box, per node 8699:112423. The break is
- *   `StyledDialog`'s own `fullScreen ?? isMobile` default (≤743 px), so the two never disagree
- *   about what "mobile" means.
+ * - **Mobile** — a full-screen sheet with its own search box, per node 8699:112423, drawn by the
+ *   shared `FullScreenPicker` (ASMA-8468). The break is the selects' picker break — below 744 px
+ *   wide **or** at most 480 px high (D-002) — so a landscape phone gets the sheet too, not a
+ *   popover squeezed against the keyboard.
  */
 export declare const CountryCodeSelect: ({ dataTest, countries, value, onChange, disabled, selectCountryLabel, searchPlaceholder, renderFlag, labelledBy, className, }: CountryCodeSelectProps) => JSX.Element;

package/dist/src/components/inputs/phone-field/useCountryPicker.d.ts

@@ -18,7 +18,8 @@ export interface CountryPicker {
     activeIndex: number | null;
     optionId: (index: number) => string;
     openWithKeyboard: (direction: -1 | 1) => void;
-    select: (iso2: string) => void;
+    /** Chooses a country; `close = false` keeps the list open (Space). */
+    select: (iso2: string, close?: boolean) => void;
     dismiss: () => void;
     handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
 }

package/dist/src/components/inputs/select-autocomplete/SelectAutocompletePicker.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode, SyntheticEvent } from 'react';
+import { PickerText } from '../full-screen-picker/pickerCopy';
+import { AutocompleteRenderOptionState, OptionLiProps } from './StyledSelectAutocomplete';
+export interface SelectAutocompletePickerProps<T> {
+    open: boolean;
+    dataTest: string;
+    listboxId: string;
+    title?: ReactNode;
+    /** Plain-text field name: names the listbox, and the dialog when there is no `title`. */
+    name: string;
+    text: PickerText;
+    options: readonly T[];
+    multiple: boolean;
+    /** Current value: the option (or `null`) with one choice, the chosen options with several. */
+    value: T | null | readonly T[];
+    /** The field may be emptied: not `disableClearable`, not read-only. */
+    clearable: boolean;
+    isEqual: (a: T, b: T) => boolean;
+    isOptionDisabled: (option: T) => boolean;
+    getLabel: (option: T) => string;
+    getOptionKey?: (option: T) => string | number;
+    filterOptions?: (options: T[], state: {
+        inputValue: string;
+    }) => T[];
+    renderOptionRow: (props: OptionLiProps, option: T, state: AutocompleteRenderOptionState) => ReactNode;
+    optionRowClassName: string;
+    loading?: boolean;
+    loadingText: ReactNode;
+    noOptionsText: ReactNode;
+    allowSelectAll?: boolean;
+    selectAllLabel: string;
+    /**
+     * One choice: an option was chosen. The caller applies it, and closes when `close` is set — a tap
+     * or Enter; Space chooses and keeps the picker open, as in the attached list.
+     */
+    onSelect: (event: SyntheticEvent, option: T, close: boolean) => void;
+    /** One choice: *Fjern valget*. The caller empties the field, closes and announces. */
+    onClear: (event: SyntheticEvent) => void;
+    /** Several choices: *Ferdig*. The caller applies the draft (see `getDraftChanges`) and closes. */
+    onApply: (event: SyntheticEvent, draft: T[]) => void;
+    /** Close button, Escape, Back: a cancel — nothing is applied. */
+    onCancel: () => void;
+}
+/**
+ * The body of `StyledSelectAutocomplete` on a small viewport (ASMA-8468): its own search query
+ * (the field's text is left alone), filtering, the 50-row cap, the keyboard, and the choice rules —
+ * one choice closes on tap; several choices tick a draft that only *Ferdig* applies. The draft and
+ * the clear-row visibility are taken at the moment it opens (REQ-011).
+ *
+ * @see asma-modules/_docs/frontend/plans/2026-10-19-11-04-plan-full-screen-select-picker-phones.md:218 — TASK-012..018
+ */
+export declare function SelectAutocompletePicker<T>({ open, dataTest, listboxId, title, name, text, options, multiple, value, clearable, isEqual, isOptionDisabled, getLabel, getOptionKey, filterOptions, renderOptionRow, optionRowClassName, loading, loadingText, noOptionsText, allowSelectAll, selectAllLabel, onSelect, onClear, onApply, onCancel, }: SelectAutocompletePickerProps<T>): JSX.Element;

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -1,11 +1,14 @@
 import { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 import { FieldWidth } from '../field-styles';
+import { PickerText } from '../full-screen-picker/pickerCopy';
 export type AutocompleteChangeReason = 'createOption' | 'selectOption' | 'removeOption' | 'clear' | 'blur';
 export type AutocompleteInputChangeReason = 'input' | 'reset' | 'clear';
 export interface AutocompleteRenderOptionState {
     selected: boolean;
     index: number;
     inputValue: string;
+    /** The row is drawn in the full-screen picker (ASMA-8468): show the full label, no line clamp. */
+    inPicker?: boolean;
 }
 /** Props the combobox hands to `renderInput`; spread straight onto `StyledInputField`. */
 export interface AutocompleteRenderInputParams {
@@ -29,7 +32,7 @@ export interface AutocompleteRenderInputParams {
         };
     };
 }
-type OptionLiProps = HTMLAttributes<HTMLLIElement> & {
+export type OptionLiProps = HTMLAttributes<HTMLLIElement> & {
     key?: string;
     ref?: React.Ref<HTMLLIElement>;
     [dataAttr: `data-${string}`]: unknown;
@@ -128,6 +131,22 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
         };
     };
     sx?: unknown;
+    /**
+     * Title of the full-screen picker on a small viewport (ASMA-8468). Defaults to the field's label,
+     * read when the picker opens from the input's `<label>`, `aria-labelledby` or `aria-label`. With
+     * none, there is no title and the dialog and list are named by the placeholder, else by
+     * `pickerText.search`.
+     */
+    pickerTitle?: ReactNode;
+    /** Overrides for any picker string (*Ferdig*, *Fjern valget*, counts, …). */
+    pickerText?: Partial<PickerText>;
+    /** Language of the default picker copy. Defaults to English, like the rest of ui-core. */
+    locale?: 'no' | 'en';
+    /**
+     * Keep the attached list on every viewport. By default the list opens as a full-screen picker
+     * below 744 CSS px wide or at most 480 CSS px high (ASMA-8468).
+     */
+    disableFullScreenPicker?: boolean;
 }
 /**
  * single + multiple selection (with tag chips + optional select-all), type-ahead filtering,
@@ -136,5 +155,5 @@ export interface StyledSelectAutocompleteProps<T, Multiple extends boolean | und
  * ponytail: `freeSolo` is accepted (arbitrary input is emitted via onInputChange) but not turned
  * into option values; exact keyboard-parity edge cases are Chromatic/axe-gated.
  */
-export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, width, fullWidth: _fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
+export declare function StyledSelectAutocomplete<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false>({ dataTest, options, renderInput, value, onChange, getOptionLabel, getOptionKey, isOptionEqualToValue, renderOption, renderValue, filterOptions, loading, loadingText, noOptionsText, disabled, readOnly, error, helperText, size, rowSize, disableClearable, disableCloseOnSelect, popupIcon, autoHeight, multiple, allowSelectAll, selectAllLabel, width, fullWidth: _fullWidth, classes, inputValue: controlledInput, onInputChange, open: controlledOpen, onOpen, onClose, className, wrapperClassName, getOptionDisabled, slotProps, pickerTitle, pickerText, locale, disableFullScreenPicker, }: StyledSelectAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;
 export {};

package/dist/src/components/inputs/select-autocomplete/draftChanges.d.ts

@@ -0,0 +1,17 @@
+export type DraftChange<T> = {
+    value: T[];
+    reason: 'removeOption' | 'selectOption';
+    option: T;
+} | {
+    value: T[];
+    reason: 'clear';
+    option?: undefined;
+};
+/**
+ * The `onChange` calls that turn `applied` into `draft` the way ticking in the attached list would
+ * have (ASMA-8468 D-007): one `removeOption`/`selectOption` per changed option, carrying
+ * `details.option`, so consumers that act per tick keep working. Removals come first, additions in
+ * the order they were ticked. Emptying a non-empty value is one `clear`, as the field's × does. No
+ * change, no calls.
+ */
+export declare const getDraftChanges: <T>(applied: readonly T[], draft: readonly T[], isEqual: (a: T, b: T) => boolean) => DraftChange<T>[];

package/dist/src/components/inputs/select-autocomplete/listboxCursor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Where ArrowUp/ArrowDown moves the keyboard cursor of a select listbox. Shared by the attached list
+ * and the full-screen picker (ASMA-8468), which must step the same way.
+ *
+ * `stops` are the cursor positions in order (`-1` is the *Select all* row). Without a cursor the
+ * move starts from `fallback` (the chosen option); from outside the stops it lands on the first or
+ * the last one. Clamped at both ends, no wrap-around. `null` when there is nowhere to go.
+ */
+export declare const nextActiveIndex: (stops: readonly number[], current: number | null, fallback: number, direction: -1 | 1) => number | null;

package/dist/src/components/inputs/select-autocomplete/readFieldName.d.ts

@@ -0,0 +1,13 @@
+export interface FieldName {
+    /** The field's label: shown as the picker title. */
+    label: string;
+    /** What names the dialog and list when there is no label: the label, else the placeholder. */
+    name: string;
+}
+/**
+ * The field's name for the full-screen picker (ASMA-8468 TASK-015), in the order a browser names an
+ * input: its first `<label>`, else the elements named by `aria-labelledby`, else `aria-label` — a
+ * visible label that is not linked to the input usually reaches it that way (RISK-002). A
+ * placeholder only names the dialog and list, it is no title. Empty strings when there is nothing.
+ */
+export declare const readFieldName: (input: HTMLInputElement | null) => FieldName;

package/dist/src/helpers/CharacterCounter.d.ts

@@ -11,6 +11,7 @@ export interface CharacterCounterProps {
 }
 /**
  * The count of a free-text field with a character limit, such as *12 av 100 tegn* (field width
- * pattern WID-2, Q12), so typed text is never cut without notice.
+ * pattern WID-2, WID-12), so typed text is never cut without notice.
+ * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#45907-218317
  */
 export declare const CharacterCounter: ({ id, length, limit, locale, className }: CharacterCounterProps) => JSX.Element;

package/dist/src/hooks/useMediaQuery.hook.d.ts

@@ -2,3 +2,9 @@ export declare function makeMediaQueryStore(mediaQuery: string): () => boolean;
 export declare const useMobileMediaQuery: () => boolean;
 /** A phone in landscape: too short for a sheet capped at 90vh to leave a usable body. */
 export declare const useShortViewportMediaQuery: () => boolean;
+/**
+ * ASMA-8468 REQ-001: a searchable select opens as a full-screen picker below 744 CSS px wide or at
+ * most 480 CSS px high. The height half is the same boundary as {@link useShortViewportMediaQuery}
+ * (D-003), so a landscape phone counts as "small" for every overlay.
+ */
+export declare const useFullScreenPickerMediaQuery: () => boolean;

package/dist/src/index.d.ts

@@ -21,6 +21,7 @@ export * from './components/inputs/search-field';
 export * from './components/inputs/textarea';
 export * from './components/inputs/select';
 export * from './components/inputs/select-autocomplete';
+export * from './components/inputs/full-screen-picker';
 export * from './components/inputs/slider';
 export * from './components/inputs/switch';
 export * from './components/inputs/radio-button';

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.111.0",
+    "version": "3.113.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",