asma-ui-core 3.80.3 → 3.81.1

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

@@ -0,0 +1,20 @@
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface CountryCodeOptionsProps {
+    dataTest: string;
+    /** Already filtered — the caller owns the query. */
+    visible: readonly PhoneCountryChoice[];
+    selectedIso2: string;
+    activeIndex: number;
+    optionId: (index: number) => string;
+    onSelect: (iso2: string) => void;
+    listId: string;
+    /** Accessible name for the list. Consumer copy, same string that titles the mobile sheet. */
+    label: string;
+    renderFlag?: RenderCountryFlag;
+    className?: string;
+}
+/**
+ * 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;

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

@@ -0,0 +1,30 @@
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface CountryCodeSelectProps {
+    dataTest: string;
+    countries: readonly PhoneCountryChoice[];
+    value: string;
+    onChange: (iso2: string) => void;
+    disabled?: boolean;
+    /** Title of the mobile picker sheet; supplied by the consumer — this library ships no copy. */
+    selectCountryLabel: string;
+    /** Placeholder of the mobile sheet's search box. Consumer-supplied. */
+    searchPlaceholder: string;
+    renderFlag?: RenderCountryFlag;
+    /** `id` of the field label, so the trigger inherits the field's accessible name. */
+    labelledBy?: string;
+    /** Surface class shared with the number input so the pair matches. */
+    className?: string;
+}
+/**
+ * Collapsed country trigger (flag + calling code + chevron) and the picker it opens.
+ *
+ * Two presentations, one list and one keyboard contract ([[useCountryPicker]]):
+ *
+ * - **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.
+ */
+export declare const CountryCodeSelect: ({ dataTest, countries, value, onChange, disabled, selectCountryLabel, searchPlaceholder, renderFlag, labelledBy, className, }: CountryCodeSelectProps) => JSX.Element;

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

@@ -0,0 +1,34 @@
+export interface StyledCountryFlagProps {
+    /** ISO 3166-1 alpha-2 code, e.g. `'NO'`. Rendered as `data-country` so tests can assert which flag appeared. */
+    iso2: string;
+    /**
+     * URL of the flag artwork, resolved by the consumer. Required because this package is loaded
+     * from the kernel CDN and cannot know where the consuming app hosts its assets — so the
+     * artwork ships with the app, and the app's bundler is what turns it into an address.
+     */
+    src: string;
+    /**
+     * `'eager'` for a flag that is on screen the moment it mounts — the collapsed trigger, and any
+     * row of an already-open picker. Defaults to `'lazy'`, which is right for a long scrolling list
+     * where fetching all 245 up front would move megabytes nobody looks at.
+     */
+    loading?: 'eager' | 'lazy';
+    className?: string;
+}
+/**
+ * @figmaNode none — the Design System has no flag component; the phone field's Figma frames draw
+ * flag artwork directly.
+ *
+ * Real artwork rather than emoji: Windows ships no regional-indicator glyphs, so `🇳🇴` renders as
+ * the letters "NO" in Chrome and Edge there.
+ *
+ * One file per country rather than one sprite, which is a measured choice: the full flag set is
+ * 2.0 MB raw / 619 kB gzipped, dominated by a handful of ornate coats of arms (Serbia alone is
+ * 182 kB), so a sprite would charge every user the whole set to look at ten rows. Per-file fetches
+ * only what is on screen — and Norway, the collapsed default, is 318 bytes.
+ *
+ * The box is painted before the artwork arrives and stays painted if it never does. Sizes vary by
+ * two orders of magnitude across the set, so a row holding a heavy flag would otherwise sit empty
+ * — or show the browser's broken-image glyph — long enough to read as a defect.
+ */
+export declare const StyledCountryFlag: ({ iso2, src, loading, className, }: StyledCountryFlagProps) => JSX.Element;

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

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { FieldSize } from '../field-styles';
+import { PhoneCountryChoice, RenderCountryFlag } from './types';
+export interface StyledPhoneFieldProps {
+    /** @figmaProp none — test hook */
+    dataTest: string;
+    /** @figmaProp Label above the control pair */
+    label?: ReactNode;
+    countries: readonly PhoneCountryChoice[];
+    /** Selected country as an ISO 3166-1 alpha-2 code. */
+    country: string;
+    onCountryChange: (iso2: string) => void;
+    /**
+     * National significant number as **digits only** — no dial code, no separators. Grouping is a
+     * display concern applied through `formatNationalNumber`, so the value a consumer stores and
+     * the value it reads back are the same string.
+     */
+    value: string;
+    /** Receives the typed national number as digits only. */
+    onChange: (nationalNumber: string) => void;
+    onBlur?: () => void;
+    /** @figmaProp State = true→"Error" — reddens the number input only, per Figma. */
+    error?: boolean;
+    /** @figmaProp Helper text element */
+    helperText?: ReactNode;
+    reserveHelperText?: boolean;
+    /** @figmaProp State = true→"Disabled" */
+    disabled?: boolean;
+    /** @figmaProp State = true→"Read only" — renders the number as text, not as inputs. */
+    readOnly?: boolean;
+    /** Pre-formatted international number for the read-only state, e.g. `'+47 48 01 23 45'`. */
+    readOnlyText?: string;
+    /**
+     * Click-to-call target for the read-only state, e.g. `phoneTelHref(value)` from
+     * `asma-core-helpers/phone`. Supplied by the consumer because building a `tel:` URI is a phone
+     * rule, and this library owns none — without it the number renders as plain text.
+     */
+    readOnlyHref?: string;
+    required?: boolean;
+    /** @figmaProp Placeholder of the number input */
+    placeholder?: string;
+    /**
+     * Per-country grouping for the number input, e.g. `formatNationalAsYouType` from
+     * `asma-core-helpers/phone`. Injected rather than built in: this library owns no phone rules
+     * and no country metadata (ADR-0017 DEC-001).
+     */
+    formatNationalNumber?: (nationalNumber: string, iso2: string) => string;
+    renderFlag?: RenderCountryFlag;
+    /** Title of the country picker. Consumer-supplied — this library ships no user-facing copy. */
+    selectCountryLabel: string;
+    /** Placeholder of the country search box. Consumer-supplied. */
+    searchPlaceholder: string;
+    id?: string;
+    name?: string;
+    size?: FieldSize;
+    /**
+     * Applied to the surface of **both** controls, so the pair cannot drift apart visually —
+     * e.g. `'bg-white'` where the field sits on a tinted panel.
+     */
+    fieldClassName?: string;
+    helperTextClassName?: string;
+    className?: string;
+}
+/**
+ * @figmaNode y2whTsnmk1J2dy5fwbM7GK#8523-109515
+ * Figma "Phone number input": a country trigger (flag + code + chevron) and a separate number
+ * input side by side under one label, with a single helper row beneath the pair. The Figma
+ * **Property 1** variants (Default/Error/Disabled/Read-only/Menu) map to `error`/`disabled`/
+ * `readOnly` and the picker's own open state.
+ *
+ * Country data, grouping, validation and every user-facing string are supplied by the consumer —
+ * this component renders the state it is told about and owns no rules (ADR-0017 DEC-001/REQ-009).
+ * Pair it with `asma-core-helpers/phone`, which provides the country list, the formatter and the
+ * validator.
+ *
+ * ponytail: reformatting is applied on every keystroke, so the caret lands at the end of the
+ * number after an edit in the middle of it. Phone numbers are short and typed left to right, so
+ * this is a deliberate ceiling; the upgrade path is the caret-preserving `formatMaskedValue` in
+ * `helpers/inputMask.ts`, which today only handles fixed-width masks.
+ */
+export declare const StyledPhoneField: ({ dataTest, label, countries, country, onCountryChange, value, onChange, onBlur, error, helperText, reserveHelperText, disabled, readOnly, readOnlyText, readOnlyHref, required, placeholder, formatNationalNumber, renderFlag, selectCountryLabel, searchPlaceholder, id, name, size, fieldClassName, helperTextClassName, className, }: StyledPhoneFieldProps) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './StyledPhoneField';
+export * from './StyledCountryFlag';
+export type { PhoneCountryChoice, RenderCountryFlag } from './types';

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+/**
+ * One row of the country picker.
+ *
+ * Declared structurally rather than imported from `asma-core-helpers/phone` on purpose:
+ * this package is a kernel member served to the whole fleet, and pulling a phone-metadata
+ * dependency into it would put ~20 kB gz of country data in every app's shared bundle.
+ * `PhoneCountryOption` from that subpath satisfies this shape, so consumers pass it directly.
+ *
+ * @see asma-modules/_docs/adr/adr-g-0017-frontend-form-state-and-validation-ownership.md:49 — DEC-001, this library owns presentation only
+ */
+export interface PhoneCountryChoice {
+    /** ISO 3166-1 alpha-2 code, e.g. `'NO'`. */
+    iso2: string;
+    /** Calling code without the leading `+`, e.g. `'47'`. */
+    dialCode: string;
+    /** Country name, already localized by the consumer. */
+    name: string;
+}
+/**
+ * Renders the flag for a country. `loading` is `'eager'` where the flag is on screen the moment it
+ * mounts (the collapsed trigger, and the rows of an already-open picker) — see `StyledCountryFlag`.
+ */
+export type RenderCountryFlag = (iso2: string, loading?: 'eager' | 'lazy') => ReactNode;

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

@@ -0,0 +1,30 @@
+import { KeyboardEvent } from 'react';
+import { PhoneCountryChoice } from './types';
+/**
+ * Matches on localized name **or** calling code, so both `"Norway"` and `"47"` narrow the list
+ * to +47 (ASMA-7485). A leading `+` is ignored so pasting `+47` works.
+ */
+export declare function matchesCountryQuery(country: PhoneCountryChoice, query: string): boolean;
+export interface UseCountryPickerOptions {
+    countries: readonly PhoneCountryChoice[];
+    selectedIso2: string;
+    query: string;
+    listId: string;
+    onSelect: (iso2: string) => void;
+    onDismiss: () => void;
+}
+export interface CountryPicker {
+    visible: readonly PhoneCountryChoice[];
+    activeIndex: number;
+    optionId: (index: number) => string;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * Filtering, active-row tracking and keyboard behaviour for the country picker — shared by the
+ * desktop trigger (which is itself the combobox) and the mobile sheet (which has its own search
+ * box), so the two presentations cannot drift apart on what typing or arrowing does.
+ *
+ * The active row is tracked by country rather than by index: filtering renumbers every index, and
+ * an index would need an effect to stay in range — a re-render behind the list it describes.
+ */
+export declare function useCountryPicker({ countries, selectedIso2, query, listId, onSelect, onDismiss, }: UseCountryPickerOptions): CountryPicker;

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

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/select/StyledSelectItem.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent, ReactNode } from 'react';
 export interface StyledSelectItemProps {
-    id?: string;
     value?: unknown;
+    /** Needed when a parent listbox points `aria-activedescendant` at this row. */
+    id?: string;
     children?: ReactNode;
     selected?: boolean;
     active?: boolean;

package/dist/src/index.d.ts

@@ -26,6 +26,7 @@ export * from './components/inputs/switch';
 export * from './components/inputs/radio-button';
 export * from './components/inputs/label';
 export * from './components/inputs/dynamic-select';
+export * from './components/inputs/phone-field';
 export * from './datetime/components/date-picker';
 export * from './datetime/components/time-picker';
 export * from './datetime/helpers/date.helper';

package/package.json

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