asma-ui-core 3.112.0 → 3.113.0

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/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/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.112.0",
+    "version": "3.113.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",