@lumx/core 4.11.0-next.5 → 4.11.0-next.7

package/components-and-utils.css

@@ -4988,21 +4988,10 @@ table {
 /* Selection Chip group
    ========================================================================== */
 .lumx-selection-chip-group {
-  max-width: 100%;
-}
-.lumx-selection-chip-group:empty {
-  display: none;
-}
-.lumx-selection-chip-group__item {
-  display: flex;
-  overflow: hidden;
+  align-content: flex-start;
 }
-.lumx-selection-chip-group__chip {
-  overflow: hidden;
-}
-.lumx-selection-chip-group__chip .lumx-chip__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.lumx-selection-chip-group, .lumx-selection-chip-group .lumx-chip, .lumx-selection-chip-group .lumx-chip__label {
+  min-width: 0;
 }
 
 /* ==========================================================================
@@ -5020,6 +5009,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/js/components/Chip/SelectionChipGroup.d.ts

@@ -0,0 +1,56 @@
+import type { LumxClassName, HasClassName, HasTheme } from '../../types';
+import type { Selector } from '../../types/Selector';
+import type { ChipProps } from '.';
+/**
+ * Framework-specific components injected by React/Vue wrappers.
+ */
+export interface SelectionChipGroupComponents {
+    Chip: any;
+    ChipGroup: any;
+    Icon: any;
+    Text: any;
+    Tooltip: any;
+}
+/**
+ * Props that consumers can override per chip via getChipProps.
+ * Excludes internal/framework props that the core always controls.
+ */
+export type ChipOverrideProps = Pick<ChipProps, 'isDisabled' | 'color' | 'isHighlighted' | 'isSelected' | 'className' | 'before' | 'after'>;
+/**
+ * Defines the props of the component.
+ */
+export interface SelectionChipGroupProps<O> extends HasClassName, HasTheme {
+    /** Option object id selector (either a property name or a function to get the id) */
+    getOptionId: Selector<O>;
+    /** Option object name selector. Falls back to the id if not defined */
+    getOptionName?: Selector<O, string | undefined | null>;
+    /** Selected options array */
+    value?: O[];
+    /** Label for accessibility (aria-label on the listbox) */
+    label: string;
+    /** Label for the remove action (visually hidden text appended to each chip) */
+    chipRemoveLabel?: string;
+    /** Disabled state for all chips */
+    isDisabled?: boolean;
+    /** Customize chip props per option */
+    getChipProps?: (option: O) => Partial<ChipProps>;
+    /** Ref for the container element */
+    ref?: any;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "SelectionChipGroup";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+/**
+ * SelectionChipGroup component.
+ * Renders a listbox of removable selection chips using component injection for framework-agnostic rendering.
+ *
+ * @param props      Component props.
+ * @param components Framework-specific components injected by the wrapper (Chip, ChipGroup, Icon, Tooltip).
+ * @return JSX element, or null when value is empty.
+ */
+export declare const SelectionChipGroup: <O>(props: SelectionChipGroupProps<O>, { Chip, ChipGroup, Icon, Text, Tooltip }: SelectionChipGroupComponents) => import("react").JSX.Element | null;

package/js/components/Chip/SelectionChipGroupTests.d.ts

@@ -0,0 +1,18 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    selectionChipGroup: HTMLElement | null;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+interface CoreTestOptions extends SetupOptions<any> {
+    /**
+     * Render a stateful SelectionChipGroup that updates its own value on change.
+     * When provided, enables roving tabindex recovery tests.
+     */
+    renderStateful?: () => void;
+}
+declare const _default: (renderOptions: CoreTestOptions) => void;
+export default _default;

package/js/components/Chip/index.d.ts

@@ -0,0 +1,81 @@
+import { ColorPalette, Size } from '../../constants';
+import { HasTheme, HasAriaDisabled, JSXElement, LumxClassName, HasClassName, HasDisabled, CommonRef, GenericProps } from '../../types';
+/**
+ * Chip sizes.
+ */
+export type ChipSize = Extract<Size, 's' | 'm'>;
+/**
+ * Defines the props of the component.
+ */
+export interface ChipProps extends HasClassName, HasDisabled, HasTheme, HasAriaDisabled {
+    /** A component to be rendered after the content. */
+    after?: JSXElement;
+    /** A component to be rendered before the content. */
+    before?: JSXElement;
+    /** Color variant. */
+    color?: ColorPalette;
+    /** Whether the component is clickable or not. */
+    isClickable?: boolean;
+    /** Whether the chip is currently in a highlighted state or not. */
+    isHighlighted?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Size variant. */
+    size?: ChipSize;
+    /** href for the chip if it is a link */
+    href?: string;
+    /** reference to the root element */
+    ref?: CommonRef;
+    /** On "after" element clicked callback. */
+    handleAfterClick?: (event: any) => void;
+    /** On element key down callback. */
+    handleKeyDown?: (event: any) => void;
+    /** On "before" element clicked callback. */
+    handleBeforeClick?: (event: any) => void;
+    /** On element clicked callback. */
+    handleClick?: (event: any) => void;
+    /** name of the prop for handling key down events */
+    keyDownProp?: string;
+    /** name of the prop for tab index */
+    tabIndexProp?: string;
+    /** Children */
+    children?: JSXElement;
+    /** Props to apply when the component is in a disabled state. */
+    disabledStateProps: GenericProps;
+    /** Whether the "after" element has a click handler. */
+    hasAfterClick?: boolean;
+    /** Whether the "before" element has a click handler. */
+    hasBeforeClick?: boolean;
+    /** Whether the component has a main click handler. */
+    hasOnClick?: boolean;
+    /** Whether any part of the component is disabled. */
+    isAnyDisabled?: boolean;
+}
+export type ChipPropsToOverride = 'disabledStateProps' | 'hasOnClick' | 'hasBeforeClick' | 'hasAfterClick' | 'before' | 'after' | 'keyDownProp' | 'tabIndexProp' | 'isAnyDisabled';
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Chip";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ChipProps>;
+/**
+ * Chip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Chip: (props: ChipProps) => import("react").JSX.Element;

package/js/components/Chip/setupSelectionChipGroupEvents.d.ts

@@ -0,0 +1,28 @@
+import type { Selector } from '../../types/Selector';
+/**
+ * Options for setting up selection chip group event handlers.
+ * All option accessors are wrapped in getters so that React/Vue can provide
+ * reactive values without the core needing to know about reactivity systems.
+ */
+export interface SetupSelectionChipGroupEventsOptions<O> {
+    /** Getter for the current selected options array. */
+    getValue: () => O[] | undefined;
+    /** Getter for the option id selector. */
+    getOptionId: Selector<O>;
+    /** Callback when the option array changes. */
+    onChange: (newValue?: O[]) => void;
+    /** Getter for the chip group container element. */
+    getContainer: () => HTMLElement | null | undefined;
+    /** Getter for the associated input element (optional). */
+    getInput?: () => HTMLInputElement | null | undefined;
+}
+/**
+ * Attach delegated click and keydown event listeners on the chip group container,
+ * and optionally an input backspace handler.
+ *
+ * Uses addEventListener on the container element. Events bubble up from individual
+ * chips, so there is no need to re-attach listeners when chips change.
+ *
+ * @returns A cleanup function that removes all attached event listeners.
+ */
+export declare function setupSelectionChipGroupEvents<O>(options: SetupSelectionChipGroupEventsOptions<O>): () => void;

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

@@ -17,6 +17,11 @@ export interface ComboboxInputProps extends HasClassName, HasTheme {
     toggleButtonProps?: Record<string, any>;
     /** Toggle callback for the chevron button. */
     handleToggle?(): void;
+    /**
+     * Controls how the combobox filters options as the user types.
+     * When `'off'`, the input is rendered as `readOnly`.
+     */
+    filter?: 'auto' | 'manual' | 'off';
 }
 /**
  * Injected framework-specific components for ComboboxInput rendering.

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

@@ -2,14 +2,22 @@ import type { ComboboxCallbacks, ComboboxHandle } from './types';
 /** Options for configuring the input-mode combobox controller. */
 export interface SetupComboboxInputOptions extends ComboboxCallbacks {
     /**
-     * When true (default), the combobox automatically filters options as the user types.
-     * Each registered `Combobox.Option` receives filter state updates and hides itself
-     * when it does not match the current input value.
+     * Controls how the combobox filters options as the user types.
      *
-     * Set to false when you want to handle filtering yourself (e.g. async search,
-     * consumer-side pre-filtering). Options will not be registered for auto-filtering.
+     * - `'auto'` (default) — Options are automatically filtered client-side.
+     * - `'manual'` — Filtering is the consumer's responsibility.
+     * - `'off'` — Like `'manual'`, and `openOnFocus` defaults to `true`.
+     *   The core template renders the input as `readOnly`.
      */
-    autoFilter?: boolean;
+    filter?: 'auto' | 'manual' | 'off';
+    /**
+     * When true, the combobox opens automatically when the input receives focus.
+     * When false (default, unless `filter` is `'off'`), the combobox only opens
+     * on click, typing, or keyboard navigation.
+     *
+     * @default false (true when filter is 'off')
+     */
+    openOnFocus?: boolean;
 }
 /**
  * Set up a combobox with an input trigger (autocomplete/filter pattern).

package/lumx.css

@@ -5669,21 +5669,10 @@ table {
 /* Selection Chip group
    ========================================================================== */
 .lumx-selection-chip-group {
-  max-width: 100%;
-}
-.lumx-selection-chip-group:empty {
-  display: none;
-}
-.lumx-selection-chip-group__item {
-  display: flex;
-  overflow: hidden;
+  align-content: flex-start;
 }
-.lumx-selection-chip-group__chip {
-  overflow: hidden;
-}
-.lumx-selection-chip-group__chip .lumx-chip__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.lumx-selection-chip-group, .lumx-selection-chip-group .lumx-chip, .lumx-selection-chip-group .lumx-chip__label {
+  min-width: 0;
 }
 
 /* ==========================================================================
@@ -5701,6 +5690,22 @@ table {
 }
 .lumx-combobox-popover__scroll {
   overflow-y: auto;
+  scroll-snap-type: y proximity;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .lumx-combobox-popover__scroll {
+    scroll-behavior: smooth;
+  }
+}
+.lumx-combobox-popover__scroll::before {
+  content: "";
+  display: block;
+  scroll-snap-align: start;
+}
+.lumx-combobox-popover__scroll::after {
+  content: "";
+  display: block;
+  scroll-snap-align: end;
 }
 
 .lumx-combobox-popover:empty, .lumx-combobox-popover:not(:has(.lumx-combobox-option)):not(:has(.lumx-combobox-state)):not(:has(.lumx-combobox-option-skeleton)),

package/package.json

@@ -7,7 +7,7 @@
     },
     "dependencies": {
         "@floating-ui/dom": "^1.7.5",
-        "@lumx/icons": "^4.11.0-next.5",
+        "@lumx/icons": "^4.11.0-next.7",
         "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.11.0-next.5",
+    "version": "4.11.0-next.7",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/scss/components/chip/_index.scss

@@ -191,23 +191,10 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-selection-chip-group {
-  max-width: 100%;
+    align-content: flex-start;
 
-  &:empty {
-    display: none;
-  }
-
-  &__item {
-    display: flex;
-    overflow: hidden;
-  }
-
-  &__chip {
-    overflow: hidden;
-
-    .#{$lumx-base-prefix}-chip__label {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    // Shrink chips in constrained space
+    &, & .#{$lumx-base-prefix}-chip, & .#{$lumx-base-prefix}-chip__label {
+        min-width: 0;
     }
-  }
 }

package/scss/components/combobox/_index.scss

@@ -18,6 +18,21 @@
 
     &__scroll {
         overflow-y: auto;
+        scroll-snap-type: y proximity;
+        @media (prefers-reduced-motion: no-preference) {
+            scroll-behavior: smooth;
+        }
+
+        &::before {
+          content: '';
+          display: block;
+          scroll-snap-align: start;
+        }
+        &::after {
+          content: '';
+          display: block;
+          scroll-snap-align: end;
+        }
     }
 }