@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/packages/lumx-core/src/js/utils/select/toggleSelection.js

@@ -0,0 +1,39 @@
+import { getWithSelector } from "../selectors/getWithSelector.js";
+import { findOptionById } from "./findOptionById.js";
+//#region ../lumx-core/src/js/utils/select/toggleSelection.ts
+/**
+* Compute the next selection state after a user toggles an option.
+*
+* Single-mode behaviour (`isMultiple=false`):
+* - Returns the option matched by id (or `undefined` if none matches the id —
+*   e.g. when the consumer triggers a custom action via `beforeOptions`).
+*
+* Multi-mode behaviour (`isMultiple=true`):
+* - If the option is already in the current value array → returns a new array with it removed.
+* - Otherwise → returns a new array with the option appended.
+* - If the id matches no option in `options` (e.g. custom actions), the current array is returned unchanged.
+*
+* Pure function: never mutates `currentValue`.
+*
+* @param options          The list of options.
+* @param getOptionId      Selector returning the option id (matches `<Combobox.Option value>`).
+* @param currentValue     Current selection (option, array of options, or undefined).
+* @param selectedOptionId Id of the option the user just selected.
+* @param isMultiple       Whether to use multi-select semantics.
+* @return                 The new selection — `O | undefined` in single mode, `O[]` in multi mode.
+*/
+function toggleSelection(options, getOptionId, currentValue, selectedOptionId, isMultiple) {
+	const newOption = findOptionById(options, getOptionId, selectedOptionId);
+	if (!isMultiple) return newOption;
+	const currentArray = Array.isArray(currentValue) ? currentValue : [];
+	const existingIndex = currentArray.findIndex((item) => getWithSelector(getOptionId, item) === selectedOptionId);
+	if (existingIndex === -1) {
+		if (!newOption) return currentArray;
+		return [...currentArray, newOption];
+	}
+	const updated = [...currentArray];
+	updated.splice(existingIndex, 1);
+	return updated;
+}
+//#endregion
+export { toggleSelection };

package/_internal/packages/lumx-core/src/js/utils/select/types.d.ts

@@ -0,0 +1,203 @@
+import { HasTheme } from "../../types/HasTheme.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { HasAriaDisabled } from "../../types/HasAriaDisabled.js";
+import { Selector } from "../../types/Selector.js";
+//#region ../lumx-core/src/js/utils/select/types.d.ts
+/**
+ * Status of the select dropdown list.
+ *
+ * - `'idle'` — Default state, no loading indicators.
+ * - `'loading'` — Full loading: shows skeleton placeholders, hides real options.
+ * - `'loadingMore'` — Paginated loading: appends a skeleton after existing options.
+ * - `'error'` — Error state: shows an error message in the dropdown.
+ */
+type SelectListStatus = 'idle' | 'loading' | 'loadingMore' | 'error';
+/**
+ * Context passed to the `renderOption` callback alongside the option object.
+ * Contains core-computed values that the consumer should forward to `<Combobox.Option>`.
+ */
+interface RenderOptionContext {
+  /** Index of the option in the current (possibly section-filtered) list. */
+  index: number;
+  /** Resolved option id (from `getOptionId`). Should be passed as `value` to `<Combobox.Option>`. */
+  value: any;
+  /** Resolved option name (from `getOptionName`, falling back to `getOptionId`). */
+  name: string;
+  /** Whether this option is currently selected. Should be forwarded as `isSelected`. */
+  isSelected: boolean;
+  /** Resolved description string (from `getOptionDescription`), if any. Should be forwarded as `description`. */
+  description?: string | null;
+}
+interface BaseSelectProps<O> {
+  /** List of option objects. */
+  options?: Array<O>;
+  /** Option object id selector. */
+  getOptionId: Selector<O>;
+  /** Option object name selector (falls back to id if not defined). */
+  getOptionName?: Selector<O, string | undefined | null>;
+  /** Option object description selector. */
+  getOptionDescription?: Selector<O, string | undefined | null>;
+  /**
+   * Custom option render function (core/Vue contract).
+   * Receives the option object and a `RenderOptionContext` with core-computed props (`value`,
+   * `isSelected`, `description`, `index`). The callee must render a `<Combobox.Option>` and
+   * forward those context values, including a unique `key`.
+   *
+   * @example (Vue / core level)
+   * renderOption={(fruit, { value, isSelected, description }) => (
+   *     <Combobox.Option key={value} value={value} isSelected={isSelected} description={description}>
+   *         <strong>{fruit.name}</strong>
+   *     </Combobox.Option>
+   * )}
+   */
+  renderOption?: (option: O, context: RenderOptionContext) => JSXElement;
+  /**
+   * Selector returning a section id string for each option. Options with the same
+   * section id are grouped together. The id is also used as the default displayed
+   * label unless `renderSectionTitle` is provided.
+   */
+  getSectionId?: Selector<O, string | undefined>;
+  /**
+   * Custom section title render function. Receives the section id and the options
+   * in that section. Returns custom JSX to display as the section header.
+   * When not provided, the section id is used as a plain text label.
+   */
+  renderSectionTitle?: (sectionId: string | undefined, options: O[]) => JSXElement;
+}
+/**
+ * Shared translation labels for SelectTextField wrappers (React and Vue).
+ */
+interface SelectTextFieldTranslations {
+  /** Accessible label for the clear button. */
+  clearLabel?: string;
+  /** Accessible label for the show-suggestions toggle button. When omitted, the toggle button is not rendered. */
+  showSuggestionsLabel?: string;
+  /** Accessible label for the chip group. */
+  chipGroupLabel?: string;
+  /** Accessible label for the remove action on chips (used in visually hidden text). */
+  chipRemoveLabel?: string;
+  /** Screen reader loading announcement (e.g. "Loading…"). */
+  loadingMessage?: string;
+  /**
+   * Message to display when the list has no visible options.
+   * Can be a plain string or a function receiving the current input value (for dynamic messages).
+   * When omitted, the empty state is not shown.
+   */
+  emptyMessage?: string | ((inputValue: string) => string);
+  /**
+   * Message callback to display the number of available options.
+   * Called with the current visible option count and should return a human-readable string
+   * (e.g. `(n) => \`${n} result(s) available\``).
+   * Displayed when the combobox is open, not empty, not loading, and not in error.
+   * When omitted, no option count message is shown.
+   */
+  nbOptionMessage?: (optionsLength: number) => string;
+  /** Error title displayed in the dropdown (e.g. "Failed to load"). */
+  errorMessage?: string;
+  /** Secondary error message (e.g. "Please try again"). */
+  errorTryReloadMessage?: string;
+}
+/**
+ * Shared translation labels for SelectButton wrappers (React and Vue).
+ */
+interface SelectButtonTranslations {
+  /** Screen reader loading announcement (e.g. "Loading…"). */
+  loadingMessage?: string;
+  /**
+   * Message to display when the list has no visible options.
+   * Can be a plain string or a function receiving the current input value (for dynamic messages).
+   * When omitted, the empty state is not shown.
+   */
+  emptyMessage?: string | ((inputValue: string) => string);
+  /**
+   * Message callback to display the number of available options.
+   * Called with the current visible option count and should return a human-readable string.
+   * Displayed when the dropdown is open, not empty, not loading, and not in error.
+   * When omitted, no option count message is shown.
+   */
+  nbOptionMessage?: (optionsLength: number) => string;
+  /** Error title displayed in the dropdown (e.g. "Failed to load"). */
+  errorMessage?: string;
+  /** Secondary error message (e.g. "Please try again"). */
+  errorTryReloadMessage?: string;
+}
+/**
+ * Wrapper-level props shared between React and Vue SelectTextField implementations.
+ * These are framework-specific concerns (not part of the core template) that both
+ * wrappers need — extracted here to avoid duplication.
+ */
+interface BaseSelectTextFieldWrapperProps<O> extends Pick<BaseSelectProps<O>, 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId'>, HasAriaDisabled, HasTheme {
+  /** Selection type: 'single' or 'multiple'. */
+  selectionType: 'single' | 'multiple';
+  /**
+   * Status of the dropdown list.
+   * @default 'idle'
+   */
+  listStatus?: SelectListStatus;
+  /**
+   * Controls how the combobox filters options as the user types.
+   *
+   * - `'auto'` — Options that do not match the input value are hidden client-side.
+   * - `'manual'` — All options remain visible; filtering is the consumer's
+   *   responsibility (e.g. by updating the `options` prop in response to `onSearch`).
+   * - `'off'` — Like `'manual'`, but the input is also set to `readOnly` and
+   *   `openOnFocus` defaults to `true` (useful for static dropdowns / pure pickers).
+   *
+   * This prop is independent of `onSearch`: you can use both together (e.g. client-side
+   * filtering + tracking search text for a "create" action), or use `filter: 'manual'`
+   * without `onSearch` for static dropdowns.
+   */
+  filter: 'auto' | 'manual' | 'off';
+  /**
+   * Controlled search input value.
+   * When provided, this value seeds (and resets) the visible search text in the input.
+   * Setting it to `''` (empty string) resets the input.
+   */
+  searchInputValue?: string;
+  /**
+   * Whether to show a clear button when a value is selected.
+   * @default true
+   */
+  hasClearButton?: boolean;
+  /**
+   * When true, the dropdown opens automatically when the input receives focus.
+   * When false (default), the dropdown only opens on click, typing, or keyboard navigation.
+   *
+   * @default false
+   */
+  openOnFocus?: boolean;
+  /** Field label (required). Also used as aria-label for the listbox. */
+  label: string;
+  /** Input placeholder text. */
+  placeholder?: string;
+  /** Leading icon (SVG path). */
+  icon?: string;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  /** Required field indicator. */
+  isRequired?: boolean;
+  /** Error state flag. */
+  hasError?: boolean;
+  /** Error message text. */
+  error?: string;
+  /** Helper text below the field. */
+  helper?: string;
+  /** Native input id attribute. */
+  id?: string;
+  /** Native input name attribute. */
+  name?: string;
+  /** Whether displayed with valid style. */
+  isValid?: boolean;
+  /** Maximum string length (shows character counter). */
+  maxLength?: number;
+  /** Accessible label for the input element (overrides the visual label for screen readers). */
+  ariaLabel?: string;
+  /** Additional props forwarded to the Combobox.Input (and ultimately to TextField). */
+  inputProps?: Record<string, any>;
+  /** Props forwarded to the Combobox.Popover. */
+  popoverProps?: Record<string, any>;
+  /** Labels for the clear button, toggle button, and chip group. */
+  translations: SelectTextFieldTranslations;
+}
+//#endregion
+export { BaseSelectProps, BaseSelectTextFieldWrapperProps, SelectButtonTranslations, SelectListStatus, SelectTextFieldTranslations };

package/_internal/packages/lumx-core/src/js/utils/selectors/getWithSelector.js

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/utils/selectors/getWithSelector.ts
+/** Get value with a string of function selector */
+var getWithSelector = (selector, object) => {
+	if (typeof selector === "function") return selector(object);
+	if (typeof selector === "string") return object[selector];
+	return String(object);
+};
+//#endregion
+export { getWithSelector };

package/_internal/packages/lumx-core/src/js/utils/selectors/groupBySelector.js

@@ -0,0 +1,21 @@
+import { getWithSelector } from "./getWithSelector.js";
+//#region ../lumx-core/src/js/utils/selectors/groupBySelector.ts
+/**
+* Equivalent to `lodash/groupBy` but returns a `Map` of groups items (instead of an object)
+* (has the major advantage to not forcing the keys to be string!)
+*/
+function groupBySelector(array, selector) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const item of array) {
+		const key = getWithSelector(selector, item);
+		let group = groups.get(key);
+		if (!group) {
+			group = [];
+			groups.set(key, group);
+		}
+		group.push(item);
+	}
+	return groups;
+}
+//#endregion
+export { groupBySelector };

package/_internal/packages/lumx-core/src/js/utils/time/buildTimeList.d.ts

@@ -0,0 +1,20 @@
+//#region ../lumx-core/src/js/utils/time/buildTimeList.d.ts
+/**
+ * A time-of-day (24h), independent of any date or time zone. Canonical
+ * exchange shape for the time utilities and `TimePickerField`.
+ */
+interface TimeOfDay {
+  /** 0–23 */
+  hour: number;
+  /** 0–59 */
+  minute: number;
+  /** Locale-aware short display string. Populated by `buildTimeList` when `locale` is set. */
+  name?: string;
+  /**
+   * `true` when strictly outside `[minTime, maxTime]`. Set by `buildTimeList`;
+   * consumers typically forward this as `isDisabled` on the rendered option.
+   */
+  outOfRange?: boolean;
+}
+//#endregion
+export { TimeOfDay };

package/_internal/packages/lumx-core/src/js/utils/time/buildTimeList.js

@@ -0,0 +1,36 @@
+import { formatTime } from "./formatTime.js";
+import { getDateAtTime } from "./getDateAtTime.js";
+import { timeOfDayMinutes } from "./timeOfDayMinutes.js";
+//#region ../lumx-core/src/js/utils/time/buildTimeList.ts
+var MINUTES_IN_HOUR = 60;
+var MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+/**
+* Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
+* Out-of-bounds entries are kept (with `outOfRange: true`) so consumers can
+* render them as visible-but-unselectable. Returns `[]` for invalid `step`.
+*/
+function buildTimeList(options = {}) {
+	const { step = 30, minTime, maxTime, locale } = options;
+	if (!Number.isInteger(step) || step <= 0) return [];
+	const minMinutes = minTime ? timeOfDayMinutes(minTime) : void 0;
+	const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : void 0;
+	const list = [];
+	for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+		const hour = Math.floor(minutes / MINUTES_IN_HOUR);
+		const minute = minutes % MINUTES_IN_HOUR;
+		const outOfRange = minMinutes !== void 0 && minutes < minMinutes || maxMinutes !== void 0 && minutes > maxMinutes || void 0;
+		const name = locale ? formatTime(getDateAtTime({
+			hour,
+			minute
+		}), locale) : void 0;
+		list.push({
+			hour,
+			minute,
+			name,
+			outOfRange
+		});
+	}
+	return list;
+}
+//#endregion
+export { buildTimeList };

package/_internal/packages/lumx-core/src/js/utils/time/formatTime.js

@@ -0,0 +1,14 @@
+//#region ../lumx-core/src/js/utils/time/formatTime.ts
+/**
+* Format a time-of-day as a locale-aware short time (e.g. `'10:30 AM'`,
+* `'10:30'`). Hour is `numeric` (not `'2-digit'`); some locales insert a
+* narrow no-break space (U+202F) before AM/PM.
+*/
+function formatTime(date, locale) {
+	return date.toLocaleTimeString(locale, {
+		hour: "numeric",
+		minute: "2-digit"
+	});
+}
+//#endregion
+export { formatTime };

package/_internal/packages/lumx-core/src/js/utils/time/getDateAtTime.js

@@ -0,0 +1,12 @@
+//#region ../lumx-core/src/js/utils/time/getDateAtTime.ts
+/**
+* Build a new `Date` with the given time-of-day, inheriting the date part of
+* `reference` (or today). Seconds/ms zeroed; `reference` is not mutated.
+*/
+function getDateAtTime({ hour, minute }, reference) {
+	const next = reference ? new Date(reference) : /* @__PURE__ */ new Date();
+	next.setHours(hour, minute, 0, 0);
+	return next;
+}
+//#endregion
+export { getDateAtTime };

package/_internal/packages/lumx-core/src/js/utils/time/isDateOnTime.js

@@ -0,0 +1,10 @@
+//#region ../lumx-core/src/js/utils/time/isDateOnTime.ts
+/**
+* Returns `true` when the time-of-day of `date` matches `time` (hour and
+* minute). Seconds and milliseconds are ignored.
+*/
+function isDateOnTime(date, time) {
+	return date.getHours() === time.hour && date.getMinutes() === time.minute;
+}
+//#endregion
+export { isDateOnTime };

package/_internal/packages/lumx-core/src/js/utils/time/parseTimeInput.js

@@ -0,0 +1,46 @@
+//#region ../lumx-core/src/js/utils/time/parseTimeInput.ts
+/**
+* Match a free-form time. Supports:
+* - 12h with am/pm suffix (`a`, `am`, `p`, `pm`, `a.m.`, `p.m.`), optional whitespace
+* - 24h with colon (`15:45`), dot (`15.45`), `h` (`15h45`) or no separator (`1545`)
+* - Optional seconds segment (ignored): `15:45:00`, `15.45.00`
+* - Optional ISO `T` prefix and trailing `Z` (UTC marker)
+*
+* Capture groups:
+*   1: hour, 2: minutes (optional), 3: am/pm marker (optional)
+*/
+var RE_TIME = /^T?(\d{1,2})(?:[:.h]?([0-5]\d)(?:[:.]?[0-5]\d)?)?\s*(a\.?m?\.?|p\.?m?\.?)?Z?$/i;
+/**
+* Parse a free-form user time input into a 24h `TimeOfDay`. Accepts a wide
+* range of formats:
+*
+* - 12h AM/PM: `'2pm'`, `'2 PM'`, `'2:30pm'`, `'3.45 PM'`, `'3:45 p.m.'`
+* - 24h colon: `'10:30'`, `'15:45'`
+* - 24h dot (DE/FR/IT): `'15.45'`
+* - 24h French: `'15h45'`
+* - Military / no separator: `'1545'`, `'1030pm'`
+* - With seconds (ignored): `'15:45:00'`
+* - ISO 8601: `'T15:45'`, `'15:45Z'`
+*
+* Whitespace is trimmed. Returns `undefined` if no format matches.
+*/
+function parseTimeInput(raw) {
+	if (typeof raw !== "string") return void 0;
+	const match = raw.trim().match(RE_TIME);
+	if (!match) return void 0;
+	const [, rawHour, rawMinute, ampm] = match;
+	let hour = Number(rawHour);
+	const minute = rawMinute ? Number(rawMinute) : 0;
+	if (ampm) {
+		if (hour < 1 || hour > 12) return void 0;
+		const isPm = ampm[0].toLowerCase() === "p";
+		if (hour === 12) hour = isPm ? 12 : 0;
+		else if (isPm) hour += 12;
+	} else if (hour > 23) return;
+	return {
+		hour,
+		minute
+	};
+}
+//#endregion
+export { parseTimeInput };

package/_internal/packages/lumx-core/src/js/utils/time/snapTimeToBounds.js

@@ -0,0 +1,21 @@
+import { timeOfDayMinutes } from "./timeOfDayMinutes.js";
+//#region ../lumx-core/src/js/utils/time/snapTimeToBounds.ts
+/**
+* Clamp `time` to `[minTime, maxTime]`. Inputs strictly before `minTime` snap
+* up; inputs strictly after `maxTime` snap down; otherwise returned unchanged.
+* Only the time-of-day of `minTime`/`maxTime` is used.
+*/
+function snapTimeToBounds(time, minTime, maxTime) {
+	const totalMinutes = time.hour * 60 + time.minute;
+	if (minTime && totalMinutes < timeOfDayMinutes(minTime)) return {
+		hour: minTime.getHours(),
+		minute: minTime.getMinutes()
+	};
+	if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) return {
+		hour: maxTime.getHours(),
+		minute: maxTime.getMinutes()
+	};
+	return time;
+}
+//#endregion
+export { snapTimeToBounds };

package/_internal/packages/lumx-core/src/js/utils/time/timeOfDayMinutes.js

@@ -0,0 +1,9 @@
+//#region ../lumx-core/src/js/utils/time/timeOfDayMinutes.ts
+/**
+* Return the time-of-day of `date` in minutes since 00:00 (date part ignored).
+*/
+function timeOfDayMinutes(date) {
+	return date.getHours() * 60 + date.getMinutes();
+}
+//#endregion
+export { timeOfDayMinutes };

package/_internal/packages/lumx-core/src/js/utils/typeahead/index.js

@@ -0,0 +1,77 @@
+//#region ../lumx-core/src/js/utils/typeahead/index.ts
+/** Timeout in ms after which the accumulated search string is cleared. */
+var SEARCH_TIMEOUT = 500;
+/**
+* Create a typeahead controller for keyboard navigation in list-like widgets
+* (combobox, menu, listbox, tree, etc.).
+*
+* Accumulates typed characters and matches them against item labels.
+* Supports single-char cycling (e.g. pressing "a" repeatedly cycles through
+* items starting with "a") and multi-char prefix matching.
+*
+* Uses a {@link TreeWalker} for lazy DOM traversal — items are visited one
+* at a time without materializing the full list.
+*
+* @param getWalker Callback returning a fresh TreeWalker over navigable items, or null if unavailable.
+* @param getItemValue Callback extracting the text label from an item element.
+* @param signal AbortSignal for cleanup.
+* @returns Typeahead instance.
+*/
+function createTypeahead(getWalker, getItemValue, signal) {
+	let searchString = "";
+	let searchTimeout;
+	function reset() {
+		searchString = "";
+		if (searchTimeout !== void 0) {
+			clearTimeout(searchTimeout);
+			searchTimeout = void 0;
+		}
+	}
+	signal.addEventListener("abort", reset);
+	function match(currentItem) {
+		if (!searchString) return null;
+		const walker = getWalker();
+		if (!walker) return null;
+		const firstItem = walker.nextNode();
+		if (!firstItem) return null;
+		const allSameChar = searchString.split("").every((ch) => ch === searchString[0]);
+		const searchText = allSameChar ? searchString[0] : searchString;
+		const validCurrent = currentItem && walker.root.contains(currentItem) ? currentItem : null;
+		let startItem;
+		if (validCurrent) {
+			walker.currentNode = validCurrent;
+			if (allSameChar) startItem = walker.nextNode() ?? firstItem;
+			else startItem = validCurrent;
+		} else startItem = firstItem;
+		walker.currentNode = startItem;
+		let candidate = startItem;
+		while (true) {
+			if (getItemValue(candidate).toLowerCase().startsWith(searchText)) return candidate;
+			const next = walker.nextNode();
+			if (next) candidate = next;
+			else {
+				walker.currentNode = walker.root;
+				const wrapped = walker.nextNode();
+				if (!wrapped) return null;
+				candidate = wrapped;
+			}
+			if (candidate === startItem) return null;
+		}
+	}
+	function handle(key, currentItem) {
+		if (searchTimeout !== void 0) clearTimeout(searchTimeout);
+		searchString += key.toLowerCase();
+		searchTimeout = setTimeout(reset, SEARCH_TIMEOUT);
+		return match(currentItem);
+	}
+	function rematch(currentItem) {
+		return match(currentItem);
+	}
+	return {
+		handle,
+		rematch,
+		reset
+	};
+}
+//#endregion
+export { createTypeahead };

package/_internal/utils/A11YLiveMessage/index.d.ts

@@ -0,0 +1,50 @@
+import React, { AriaAttributes, ReactNode } from "react";
+
+//#region src/utils/A11YLiveMessage/index.d.ts
+interface A11YLiveMessageProps {
+  /** The message that will be read. */
+  children?: ReactNode;
+  /** Whether the message should be hidden */
+  hidden?: boolean;
+  /**
+   * The type of message.
+   * Default to "polite"
+   * Assertive should only be used for messages than need immediate attention.
+   */
+  type?: AriaAttributes['aria-live'];
+  /**
+   * Indicates whether assistive technologies will present all, or only parts of, the changed region based on
+   * the change notifications defined by the aria-relevant attribute.
+   */
+  atomic?: AriaAttributes['aria-atomic'];
+  /**
+   * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+   * @see atomic.
+   */
+  relevant?: AriaAttributes['aria-relevant'];
+  /**
+   * Whether the live region reads a current status or
+   * raises an alert.
+   * Only use `alert` for time sensitive information that should be read immediately
+   * as it will interrupt anything being currently read.
+   */
+  role?: 'status' | 'alert';
+  /** Scope, for  tracking purposes */
+  scope?: string;
+  /** Optionnal classname */
+  className?: string;
+}
+/**
+ * Live region to read a message to screen readers.
+ * Messages can be "polite" and be read when possible or
+ * "assertive" and interrupt any message currently be read. (To be used sparingly)
+ *
+ * More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ *
+ * @family A11Y
+ * @param A11YLiveMessageProps
+ * @returns A11YLiveMessage
+ */
+declare const A11YLiveMessage: React.FC<A11YLiveMessageProps>;
+//#endregion
+export { A11YLiveMessage, A11YLiveMessageProps };

package/_internal/utils/A11YLiveMessage/index.js

@@ -0,0 +1,28 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { join, visuallyHidden } from "@lumx/core/js/utils/classNames";
+//#region src/utils/A11YLiveMessage/index.tsx
+/**
+* Live region to read a message to screen readers.
+* Messages can be "polite" and be read when possible or
+* "assertive" and interrupt any message currently be read. (To be used sparingly)
+*
+* More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+*
+* @family A11Y
+* @param A11YLiveMessageProps
+* @returns A11YLiveMessage
+*/
+var A11YLiveMessage = ({ type = "polite", atomic, role, hidden, relevant, children, className, ...forwardedProps }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...forwardedProps,
+		className: join(hidden ? visuallyHidden() : void 0, className),
+		role,
+		"aria-live": type,
+		"aria-atomic": atomic,
+		"aria-relevant": relevant,
+		children
+	});
+};
+//#endregion
+export { A11YLiveMessage };

package/_internal/utils/ClickAwayProvider/ClickAwayProvider.d.ts

@@ -0,0 +1,23 @@
+import { ClickAwayParameters } from "../../hooks/useClickAway.js";
+import { RefObject } from "react";
+
+//#region src/utils/ClickAwayProvider/ClickAwayProvider.d.ts
+interface ClickAwayProviderProps extends ClickAwayParameters {
+  /**
+   * (Optional) Element that should be considered as part of the parent
+   */
+  parentRef?: RefObject<HTMLElement>;
+  /**
+   * Children
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
+ * we take into account both the DOM tree and the React tree to detect click away.
+ *
+ * @return the react component.
+ */
+declare const ClickAwayProvider: React.FC<ClickAwayProviderProps>;
+//#endregion
+export { ClickAwayProvider };