@lumx/core 4.12.1 → 4.13.0-next.1

package/js/components/Combobox/ComboboxButton.d.ts

@@ -1,4 +1,4 @@
-import type { CommonRef, HasClassName, LumxClassName } from '../../types';
+import type { CommonRef, HasClassName, JSXElement, LumxClassName } from '../../types';
 import type { ComboboxCallbacks } from './types';
 /**
  * Label display mode for the ComboboxButton.
@@ -23,6 +23,8 @@ export interface ComboboxButtonProps extends HasClassName, ComboboxCallbacks {
     isOpen?: boolean;
     /** ref to the root button element. */
     ref?: CommonRef;
+    /** Custom render button */
+    renderButton?: (buttonProps: Record<string, any>) => JSXElement;
 }
 /**
  * Injected framework-specific components for ComboboxButton rendering.

package/js/types/NamedProps.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Strips index signature from a type, keeping only explicitly named properties.
+ * Used to prevent `GenericProps`'s `[propName: string]: any` from contaminating
+ * TypeScript inference of the option type `O`.
+ */
+export type NamedProps<T> = {
+    [K in keyof T as string extends K ? never : K]: T[K];
+};

package/js/types/index.d.ts

@@ -27,3 +27,4 @@ export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
 export type { PropsToOverride } from './jsx/PropsToOverride';
 export type { PartialBy, PartialExcept } from './PartialBy';
+export type { NamedProps } from './NamedProps';

package/js/utils/select/findOptionById.d.ts

@@ -0,0 +1,13 @@
+import type { Selector } from '../../types';
+/**
+ * Find the option whose id matches the given value.
+ *
+ * Used by Select* wrappers to resolve a selection event (which carries the option id
+ * as `selectedOption.value`) back to the original option object.
+ *
+ * @param options    The list of options.
+ * @param getOptionId Selector returning the option id (matches `<Combobox.Option value>`).
+ * @param id          The id to match against.
+ * @return The matching option, or `undefined` if none is found / inputs are nullish.
+ */
+export declare function findOptionById<O>(options: readonly O[] | undefined, getOptionId: Selector<O> | undefined, id: unknown): O | undefined;

package/js/utils/select/toggleSelection.d.ts

@@ -0,0 +1,23 @@
+import type { Selector } from '../../types';
+/**
+ * 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.
+ */
+export declare function toggleSelection<O>(options: readonly O[] | undefined, getOptionId: Selector<O> | undefined, currentValue: O | O[] | undefined, selectedOptionId: unknown, isMultiple: boolean): O | O[] | undefined;

package/js/utils/select/types.d.ts

@@ -19,6 +19,8 @@ export interface RenderOptionContext {
     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`. */
@@ -116,6 +118,51 @@ export interface SelectTextFieldTranslations {
     /** Secondary error message (e.g. "Please try again"). */
     errorTryReloadMessage?: string;
 }
+/**
+ * Shared translation labels for SelectButton wrappers (React and Vue).
+ */
+export 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 SelectButton implementations.
+ * These are framework-specific concerns (not part of the core template) that both
+ * wrappers need — extracted here to avoid duplication.
+ */
+export interface BaseSelectButtonWrapperProps<O> extends Pick<BaseSelectProps<O>, 'options' | 'getOptionId' | 'getOptionName' | 'getOptionDescription' | 'getSectionId'> {
+    /**
+     * Selection type. Discriminator that wrappers expand into a typed union:
+     * `'single'` (default) → `value?: O`, `'multiple'` → `value: O[]`.
+     */
+    selectionType?: 'single' | 'multiple';
+    /** Button label (used for ARIA and when no selection). */
+    label: string;
+    /**
+     * Status of the dropdown list.
+     * @default 'idle'
+     */
+    listStatus?: SelectTextFieldStatus;
+    /** Optional translations for screen-reader announcements (loading/empty/error/option count). */
+    translations?: SelectButtonTranslations;
+}
 /**
  * Wrapper-level props shared between React and Vue SelectTextField implementations.
  * These are framework-specific concerns (not part of the core template) that both

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.12.1",
+        "@lumx/icons": "^4.13.0-next.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.18.1",
@@ -69,7 +69,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.12.1",
+    "version": "4.13.0-next.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -92,5 +92,6 @@
         "vite": "^7.3.2",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
-    }
+    },
+    "stableVersion": "4.12.1"
 }