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

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.d.ts

@@ -0,0 +1,29 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.d.ts
+/**
+ * Defines the props for the core ComboboxOptionMoreInfo template.
+ */
+interface ComboboxOptionMoreInfoProps extends HasClassName {
+  /** Popover content (additional details about the option). */
+  children?: JSXElement;
+  /** Whether the popover is open. */
+  isOpen?: boolean;
+  /** ID for the popover element (used for aria-describedby on the parent option). */
+  popoverId: string;
+  /** Ref for the anchor element (icon button). */
+  ref?: CommonRef;
+  /** Mouse enter callback. */
+  onMouseEnter?(): void;
+  /** Mouse leave callback. */
+  onMouseLeave?(): void;
+  /** Props forwarded to the IconButton. */
+  buttonProps?: Record<string, any>;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ */
+type ComboboxOptionMoreInfoPropsToOverride = 'children' | 'popoverId' | 'isOpen';
+//#endregion
+export { ComboboxOptionMoreInfoProps, ComboboxOptionMoreInfoPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.js

@@ -0,0 +1,60 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { Fragment, createVNode, isVNode, mergeProps } from "vue";
+import { mdiInformationOutline } from "@lumx/icons/esm/information-outline.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionMoreInfo.tsx
+/**
+* Defines the props for the core ComboboxOptionMoreInfo template.
+*/
+/**
+* Props that React/Vue wrappers need to re-declare with framework-specific types.
+*/
+/**
+* Injected framework-specific components for ComboboxOptionMoreInfo rendering.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option-more-info";
+var { block, element } = bem(CLASSNAME);
+/**
+* ComboboxOptionMoreInfo core template.
+* Renders an info icon button with a popover that shows additional details about a combobox option.
+* The popover opens on mouse hover or when the parent option is keyboard-highlighted.
+*
+* Framework-specific components (IconButton, Popover) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxOptionMoreInfo = (props, { IconButton, Popover }) => {
+	const { children, className, isOpen, popoverId, ref, onMouseEnter, onMouseLeave, buttonProps } = props;
+	return createVNode(Fragment, null, [createVNode(IconButton, mergeProps({
+		"ref": ref,
+		"icon": mdiInformationOutline,
+		"size": "s"
+	}, buttonProps, {
+		"className": block([className, buttonProps?.className]),
+		"emphasis": "low",
+		"onMouseEnter": onMouseEnter,
+		"onMouseLeave": onMouseLeave,
+		"aria-hidden": true,
+		"label": ""
+	}), null), createVNode(Popover, {
+		"id": popoverId,
+		"className": element("popover"),
+		"anchorRef": ref,
+		"isOpen": isOpen,
+		"closeMode": "unmount",
+		"closeOnEscape": true,
+		"closeOnClickAway": true,
+		"placement": "bottom-end",
+		"hasArrow": true
+	}, _isSlot(children) ? children : { default: () => [children] })]);
+};
+//#endregion
+export { CLASSNAME, ComboboxOptionMoreInfo };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.d.ts

@@ -0,0 +1,32 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.d.ts
+/**
+ * Defines the props for the core ComboboxOptionSkeleton template.
+ */
+interface ComboboxOptionSkeletonProps extends HasClassName {
+  /** Content rendered before the skeleton text (e.g. SkeletonCircle for avatar placeholders). */
+  before?: JSXElement;
+  /** Content rendered after the skeleton text. */
+  after?: JSXElement;
+  /** Show a secondary skeleton line (mirrors ComboboxOption's `description` prop). */
+  hasDescription?: boolean;
+  /** Override the default SkeletonTypography content entirely. */
+  children?: JSXElement;
+  /** ref to the root <li> element. */
+  ref?: CommonRef;
+  /**
+   * Number of skeleton `<li>` elements to render.
+   * Each is an independent element with `:nth-child` width cycling applied by SCSS.
+   * @default 1
+   */
+  count?: number;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ * Used by `ReactToJSX<ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride>`.
+ */
+type ComboboxOptionSkeletonPropsToOverride = 'before' | 'after' | 'children';
+//#endregion
+export { ComboboxOptionSkeletonProps, ComboboxOptionSkeletonPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.js

@@ -0,0 +1,40 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { ListItem } from "../List/ListItem.js";
+import { SkeletonTypography } from "../Skeleton/SkeletonTypography.js";
+import { Fragment, createVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxOptionSkeleton.tsx
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-option-skeleton";
+/**
+* ComboboxOptionSkeleton core template.
+* Renders a skeleton placeholder `<li>` inside a combobox list, styled to match
+* option dimensions. Uses `role="none"` so screen readers ignore it.
+*
+* Width variation across sibling skeletons is handled by SCSS `:nth-child` rules,
+* not by props — the component itself does not need a `width` prop.
+*
+* @param props Component props.
+* @return JSX element.
+*/
+var ComboboxOptionSkeleton = (props) => {
+	const { hasDescription, children, className, ref, count = 1, ...forwardedProps } = props;
+	const itemProps = {
+		ref,
+		size: "tiny",
+		role: "none",
+		...forwardedProps,
+		className: import_classnames.default(className, CLASSNAME),
+		children: children || createVNode(Fragment, null, [createVNode(SkeletonTypography, {
+			"typography": "body1",
+			"theme": "light"
+		}, null), hasDescription && createVNode(SkeletonTypography, {
+			"typography": "caption",
+			"theme": "light"
+		}, null)])
+	};
+	return createVNode(Fragment, null, [Array.from({ length: count }, (_, i) => createVNode(ListItem, mergeProps({ "key": i }, itemProps), null))]);
+};
+//#endregion
+export { CLASSNAME, ComboboxOptionSkeleton };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxPopover.d.ts

@@ -0,0 +1,16 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { PopoverSizes } from "../Popover/types.js";
+import { PopoverProps } from "../Popover/index.js";
+
+//#region ../lumx-core/src/js/components/Combobox/ComboboxPopover.d.ts
+type InheritedPopoverProps = Pick<PopoverProps, 'closeOnClickAway' | 'closeOnEscape' | 'fitToAnchorWidth' | 'isOpen' | 'anchorRef' | 'placement' | 'handleClose'> & PopoverSizes;
+/**
+ * Defines the props for the core ComboboxPopover template.
+ */
+interface ComboboxPopoverProps extends HasClassName, InheritedPopoverProps {
+  /** Content (should contain a ComboboxList). */
+  children?: JSXElement;
+}
+//#endregion
+export { ComboboxPopoverProps };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxPopover.js

@@ -0,0 +1,52 @@
+import { bem } from "../../utils/classNames/bem/index.js";
+import { DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT } from "./constants.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxPopover.tsx
+/**
+* Component display name.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name.
+*/
+var CLASSNAME = "lumx-combobox-popover";
+var { block, element } = bem(CLASSNAME);
+/**
+* Defines the props for the core ComboboxPopover template.
+*/
+/**
+* Injected framework-specific components for ComboboxPopover rendering.
+*/
+/**
+* ComboboxPopover core template.
+* Renders a Popover with combobox-specific defaults (className, closeMode, closeOnClickAway, closeOnEscape).
+*
+* Framework-specific components (Popover) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxPopover = (props, { Popover, FlexBox }) => {
+	const { children, className, closeOnClickAway = true, closeOnEscape = false, fitToAnchorWidth = true, isOpen, maxHeight = DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT, placement = "bottom-start", anchorRef, handleClose, ...forwardedProps } = props;
+	return createVNode(Popover, mergeProps(forwardedProps, {
+		"placement": placement,
+		"fitToAnchorWidth": fitToAnchorWidth,
+		"maxHeight": maxHeight,
+		"className": block([className]),
+		"anchorRef": anchorRef,
+		"isOpen": isOpen,
+		"onClose": handleClose,
+		"closeOnClickAway": closeOnClickAway,
+		"closeOnEscape": closeOnEscape,
+		"closeMode": "hide"
+	}), { default: () => [createVNode(FlexBox, {
+		"orientation": "vertical",
+		"className": element("scroll")
+	}, _isSlot(children) ? children : { default: () => [children] })] });
+};
+//#endregion
+export { CLASSNAME, ComboboxPopover };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxSection.d.ts

@@ -0,0 +1,36 @@
+import { HasClassName } from "../../types/HasClassName.js";
+import { JSXElement } from "../../types/JSXElement.js";
+import { CommonRef } from "../../types/CommonRef.js";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxSection.d.ts
+/**
+ * Defines the props for the core ComboboxSection template.
+ */
+interface ComboboxSectionProps extends HasClassName {
+  /** Section label displayed as the group title. Accepts a plain string or custom JSX content. */
+  label?: string | JSXElement;
+  /** Section icon */
+  icon?: string;
+  /** Section content (should be ComboboxOption elements). */
+  children: JSXElement;
+  /** ref to the root element. */
+  ref?: CommonRef;
+  /**
+   * When true, the section renders as a bare `<li hidden>` wrapper, keeping children
+   * mounted (so option registrations stay alive) but invisible to the user and screen readers.
+   * Set automatically by the React/Vue wrapper when all child options are filtered out.
+   */
+  hidden?: boolean;
+  /**
+   * When true, the section is visually rendered (label + content) but hidden from assistive
+   * technology. Used for skeleton-only sections: the visual skeleton provides feedback to
+   * sighted users, while the live region (`ComboboxState`) handles the loading announcement.
+   */
+  'aria-hidden'?: boolean;
+}
+/**
+ * Props that React/Vue wrappers need to re-declare with framework-specific types.
+ * Used by `ReactToJSX<ComboboxSectionProps, ComboboxSectionPropsToOverride>`.
+ */
+type ComboboxSectionPropsToOverride = 'children';
+//#endregion
+export { ComboboxSectionProps, ComboboxSectionPropsToOverride };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxSection.js

@@ -0,0 +1,43 @@
+import { import_classnames } from "../../utils/classNames/index.js";
+import { createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxSection.tsx
+/**
+* Defines the props for the core ComboboxSection template.
+*/
+/**
+* Props that React/Vue wrappers need to re-declare with framework-specific types.
+* Used by `ReactToJSX<ComboboxSectionProps, ComboboxSectionPropsToOverride>`.
+*/
+/**
+* Injected framework-specific components for ComboboxSection rendering.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-section";
+/**
+* ComboboxSection core template.
+* Renders a ListSection with combobox-specific ARIA roles.
+*
+* Framework-specific components (ListSection) are passed as a second argument
+* by the React/Vue wrappers.
+*
+* @param props      Component props.
+* @param components Injected framework-specific components.
+* @return JSX element.
+*/
+var ComboboxSection = (props, { ListSection }) => {
+	const { children, className, hidden, "aria-hidden": ariaHidden, ...forwardedProps } = props;
+	return createVNode(ListSection, mergeProps(forwardedProps, {
+		"hidden": hidden,
+		"aria-hidden": ariaHidden || void 0,
+		"className": !hidden ? import_classnames.default(className, CLASSNAME) : void 0,
+		"role": !ariaHidden ? "none" : void 0,
+		"itemsWrapperProps": { role: "group" }
+	}), _isSlot(children) ? children : { default: () => [children] });
+};
+//#endregion
+export { CLASSNAME, ComboboxSection };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxState.d.ts

@@ -0,0 +1,64 @@
+//#region ../lumx-core/src/js/components/Combobox/ComboboxState.d.ts
+/**
+ * Defines the props for the core ComboboxState template.
+ */
+interface ComboboxStateProps {
+  /**
+   * 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 state title message.
+   * When provided, the error state is active (takes priority over the empty state).
+   * When omitted, the error state is not shown.
+   */
+  errorMessage?: string;
+  /**
+   * Secondary error message (e.g. "Please try again").
+   * Only rendered when `errorMessage` is provided.
+   */
+  errorTryReloadMessage?: string;
+  /**
+   * Message to announce when loading persists (after a 500ms debounce).
+   * When omitted, no loading announcement is made.
+   */
+  loadingMessage?: string;
+  /**
+   * List state
+   */
+  state?: {
+    /**
+     * The number of currently visible options.
+     * Driven by the framework wrapper via the combobox handle's `optionsChange` event.
+     */
+    optionsLength?: number;
+    /**
+     * The current value of the combobox input.
+     * Passed to `emptyMessage` when it is a function.
+     */
+    inputValue?: string;
+    /**
+     * Whether loading is active (immediate, from `loadingChange` event).
+     * Used to suppress false "empty" state while data is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the combobox popover is open.
+     * Used to gate live region content so screen readers announce messages
+     * when the popover opens (content insertion triggers `aria-live` announcement).
+     */
+    isOpen?: boolean;
+  };
+}
+//#endregion
+export { ComboboxStateProps };

package/_internal/packages/lumx-core/src/js/components/Combobox/ComboboxState.js

@@ -0,0 +1,85 @@
+import { padding } from "../../utils/classNames/spacing/index.js";
+import { visuallyHidden } from "../../utils/classNames/visually-hidden/index.js";
+import { bem } from "../../utils/classNames/bem/index.js";
+import { import_classnames } from "../../utils/classNames/index.js";
+import { Fragment, createVNode, isVNode, mergeProps } from "vue";
+//#region ../lumx-core/src/js/components/Combobox/ComboboxState.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-combobox-state";
+var { block } = bem(CLASSNAME);
+/**
+* Defines the props for the core ComboboxState template.
+*/
+/**
+* Components injected by the framework wrapper (dependency injection).
+*/
+/**
+* ComboboxState core template.
+* Renders empty/error/option-count state messages inside the combobox popover.
+* The block itself acts as a screen reader live region (`role="status" aria-live="polite"`).
+*
+* Activation rules:
+* - Error state: active when `errorMessage` is provided (presence-based).
+* - Empty state: active when `optionsLength` is 0 and `emptyMessage` is provided, and there is no error.
+* - Option count: active when `nbOptionMessage` is provided, the list is not empty, not loading, and not in error.
+*
+* @param props Component props.
+* @param components Injected framework-specific components.
+* @return JSX element or null when no state is active.
+*/
+var ComboboxState = (props, { GenericBlock, Text }) => {
+	const { emptyMessage, nbOptionMessage, errorMessage, errorTryReloadMessage, loadingMessage, state } = props;
+	const isOpen = state?.isOpen ?? true;
+	const optionsLength = state?.optionsLength ?? 0;
+	const isEmpty = optionsLength === 0;
+	const showError = !!errorMessage;
+	const resolvedEmptyMessage = typeof emptyMessage === "function" ? emptyMessage(state?.inputValue || "") : emptyMessage;
+	const showEmpty = isEmpty && !showError && !state?.isLoading && !!resolvedEmptyMessage;
+	const showLoading = !showError && !!loadingMessage;
+	const resolvedNbOptionMessage = !isEmpty && !showError && !state?.isLoading && nbOptionMessage ? nbOptionMessage(optionsLength) : void 0;
+	const show = showEmpty || showError;
+	const alignProps = {
+		hAlign: "center",
+		vAlign: "center"
+	};
+	const renderContent = isOpen;
+	return createVNode(GenericBlock, mergeProps({
+		"className": import_classnames.default(!show && visuallyHidden(), block(), padding("regular")),
+		"orientation": "vertical"
+	}, alignProps, {
+		"role": "status",
+		"aria-live": "polite",
+		"aria-atomic": true
+	}), { default: () => [
+		renderContent && showEmpty && createVNode(Text, {
+			"as": "p",
+			"typography": "body1",
+			"color": "dark-L2"
+		}, _isSlot(resolvedEmptyMessage) ? resolvedEmptyMessage : { default: () => [resolvedEmptyMessage] }),
+		renderContent && showLoading && createVNode(Text, {
+			"as": "p",
+			"typography": "body1",
+			"color": "dark-L2"
+		}, _isSlot(loadingMessage) ? loadingMessage : { default: () => [loadingMessage] }),
+		renderContent && !!resolvedNbOptionMessage && createVNode(Text, {
+			"as": "p",
+			"typography": "body1",
+			"color": "dark-L2"
+		}, _isSlot(resolvedNbOptionMessage) ? resolvedNbOptionMessage : { default: () => [resolvedNbOptionMessage] }),
+		renderContent && !!errorMessage && createVNode(Fragment, null, [createVNode(Text, {
+			"as": "p",
+			"typography": "subtitle2"
+		}, _isSlot(errorMessage) ? errorMessage : { default: () => [errorMessage] }), errorTryReloadMessage && createVNode(Text, {
+			"as": "p",
+			"typography": "body1",
+			"color": "dark-L2"
+		}, _isSlot(errorTryReloadMessage) ? errorTryReloadMessage : { default: () => [errorTryReloadMessage] })])
+	] });
+};
+//#endregion
+export { CLASSNAME, ComboboxState };

package/_internal/packages/lumx-core/src/js/components/Combobox/constants.js

@@ -0,0 +1,4 @@
+//#region ../lumx-core/src/js/components/Combobox/constants.ts
+var DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = "80vh";
+//#endregion
+export { DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT };