@iress-oss/ids-components 5.16.0 → 5.18.0

package/dist/patterns/Loading/components/LongLoading.js

@@ -2,7 +2,7 @@ import { jsx as c, jsxs as g } from "react/jsx-runtime";
 import { IressStack as w } from "../../../components/Stack/Stack.js";
 import { useMemo as f, useId as y } from "react";
 import { c as h } from "../../../index-2QXL0WYc.js";
-import { l as m } from "../../../Loading.module-BU91nTNp.js";
+import { l as m } from "../../../Loading.module-CnqsvkmD.js";
 import { IressText as M } from "../../../components/Text/Text.js";
 import { IressPanel as S } from "../../../components/Panel/Panel.js";
 import { IressProgress as j } from "../../../components/Progress/Progress.js";
@@ -10,7 +10,7 @@ import { GlobalCSSClass as L } from "../../../enums.js";
 import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
 import { useShowIndicator as C } from "../hooks/useShowIndicator.js";
 import { useEstimatedProgressValue as G } from "../hooks/useEstimatedProgressValue.js";
-const P = "ids-long-loading--root-v5160", V = "ids-long-loading--panel-v5160", B = "ids-long-loading--dots-v5160", E = "ids-long-loading--check-list-v5160", R = "ids-long-loading--check-list-item-v5160", T = "ids-long-loading--check-list-item__done-v5160", U = "ids-long-loading--checked-v5160", $ = "ids-long-loading--checked__circle-v5160", q = "ids-long-loading--checked__check-v5160", s = {
+const P = "ids-long-loading--root-v5180", V = "ids-long-loading--panel-v5180", B = "ids-long-loading--dots-v5180", E = "ids-long-loading--check-list-v5180", R = "ids-long-loading--check-list-item-v5180", T = "ids-long-loading--check-list-item__done-v5180", U = "ids-long-loading--checked-v5180", $ = "ids-long-loading--checked__circle-v5180", q = "ids-long-loading--checked__check-v5180", s = {
   root: P,
   panel: V,
   dots: B,

package/dist/patterns/Loading/components/PageLoading.js

@@ -3,12 +3,12 @@ import "react";
 import "../../../components/Stack/Stack.js";
 import "../../../components/Skeleton/Skeleton.js";
 import "../../../components/Container/Container.js";
-import { ah as n } from "../../../LoadingSuspense-D0TO0TDT.js";
+import { ah as n } from "../../../LoadingSuspense-ZAaPH398.js";
 import "../../../components/Col/Col.js";
 import "../../../components/Divider/Divider.js";
 import "../../../components/Card/Card.js";
 import "../../../index-2QXL0WYc.js";
-import "../../../Loading.module-BU91nTNp.js";
+import "../../../Loading.module-CnqsvkmD.js";
 export {
   n as PageLoading
 };

package/dist/patterns/Loading/components/StartUpLoading.js

@@ -3,12 +3,12 @@ import { IressStack as j } from "../../../components/Stack/Stack.js";
 import { useState as y, useEffect as u, useRef as I, useMemo as T } from "react";
 import { IressProgress as k } from "../../../components/Progress/Progress.js";
 import { c as M } from "../../../index-2QXL0WYc.js";
-import { l as n } from "../../../Loading.module-BU91nTNp.js";
+import { l as n } from "../../../Loading.module-CnqsvkmD.js";
 import { IressText as v } from "../../../components/Text/Text.js";
 import { propagateTestid as O } from "../../../helpers/utility/propagateTestid.js";
 import { useShowIndicator as E } from "../hooks/useShowIndicator.js";
 import { useEstimatedProgressValue as R } from "../hooks/useEstimatedProgressValue.js";
-const H = "ids-start-up-loading--root-v5160", P = "ids-start-up-loading--progress-v5160", h = {
+const H = "ids-start-up-loading--root-v5180", P = "ids-start-up-loading--progress-v5180", h = {
   root: H,
   progress: P
 }, U = ({

package/dist/patterns/Loading/components/ValidateLoading.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
-import { af as d } from "../../../LoadingSuspense-D0TO0TDT.js";
+import { af as d } from "../../../LoadingSuspense-ZAaPH398.js";
 import "../../../index-2QXL0WYc.js";
 import "react";
 import "../../../components/Text/Text.js";
-import "../../../Loading.module-BU91nTNp.js";
+import "../../../Loading.module-CnqsvkmD.js";
 export {
   d as ValidateLoading
 };

package/dist/patterns/Loading/index.js

@@ -1,4 +1,4 @@
-import { P as a, Q as o } from "../../LoadingSuspense-D0TO0TDT.js";
+import { P as a, Q as o } from "../../LoadingSuspense-ZAaPH398.js";
 export {
   a as IressLoading,
   o as IressLoadingSuspense

package/dist/src/components/Autocomplete/Autocomplete.types.d.ts

@@ -97,6 +97,26 @@ export interface AutocompleteSearchHookReturn {
      * Stop the search.
      */
     stopSearch: () => void;
+    /**
+     * Whether to show "Type at least X characters to search" instruction.
+     * True when the query length is below the minimum search length.
+     */
+    shouldShowInstructions: boolean;
+    /**
+     * Whether to show nothing (clean, minimal) during debounce waiting period.
+     * True when user has typed enough characters but search hasn't started yet.
+     */
+    shouldShowDebounceWaiting: boolean;
+    /**
+     * Whether to show "No results found" message.
+     * True only after a legitimate search has been performed and returned empty results.
+     */
+    shouldShowNoResults: boolean;
+    /**
+     * Smart result calculation that handles all display scenarios.
+     * Returns the appropriate results based on current state.
+     */
+    displayResults: FormattedLabelValueMeta[];
 }
 export interface AutocompletePopoverProps extends Pick<IressInputPopoverProps, 'autoHighlight' | 'align' | 'className' | 'container' | 'contentClassName' | 'displayMode' | 'style'> {
     append?: ReactNode;
@@ -110,3 +130,15 @@ export interface AutocompleteNoResultsProps extends Pick<IressAutocompleteProps,
         noResults?: string;
     };
 }
+export interface AutocompleteInstructionsProps {
+    /**
+     * The minimum number of characters required to search.
+     */
+    minSearchLength: number;
+    /**
+     * Pass a CSS module object to override styles.
+     */
+    styles?: {
+        instructions?: string;
+    };
+}

package/dist/src/components/Autocomplete/components/AutocompleteInstructions.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteInstructionsProps } from '../Autocomplete.types';
+export declare const AutocompleteInstructions: ({ minSearchLength, styles, }: AutocompleteInstructionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Autocomplete/hooks/useAutocompleteSearch.d.ts

@@ -1,2 +1,6 @@
 import { AutocompleteSearchHookProps, AutocompleteSearchHookReturn } from '../Autocomplete.types';
+/**
+ * Advanced autocomplete search hook with debouncing and race condition protection
+ * Supports both sync array search and async function search
+ */
 export declare const useAutocompleteSearch: ({ debounceThreshold, initialOptions, minSearchLength, options, query, }: AutocompleteSearchHookProps) => AutocompleteSearchHookReturn;

package/dist/src/components/Modal/Modal.types.d.ts

@@ -50,6 +50,10 @@ export interface IressModalProps extends IressHTMLAttributes {
      * Emitted when the modal has opened or closed internally. Use for controlled modals.
      */
     onShowChange?: (show: boolean) => void;
+    /**
+     * Emitted when the modal has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
     /**
      * Emitted when the modal has opened.
      */

package/dist/src/components/Popover/Popover.types.d.ts

@@ -142,6 +142,7 @@ export interface PopoverContextValue extends PopoverStateHookReturn, PopoverAria
     interactions: ReturnType<typeof useInteractions>;
     list: MutableRefObject<(HTMLElement | null)[]>;
     type?: PopoverTypes;
+    resetActiveIndex: () => void;
     setActiveIndex: (value: number | null) => void;
     setShowWithReason: (flag: boolean, e?: Event, reason?: OpenChangeReason) => void;
     setVirtualFocus?: (node: PopoverVirtualNode | null) => void;

package/dist/src/components/RichSelect/RichSelect.types.d.ts

@@ -1,7 +1,7 @@
 import { AutocompleteSearchHookProps } from '../Autocomplete';
 import { FloatingUIAligns, FocusableElementRef, FormattedLabelValueMeta, FormElementWidths, IressPopoverProps, LabelValueMeta, PopoverRef, PopoverTypes } from '../../main';
 import { ChangeEvent, ForwardedRef, ReactElement, ReactNode } from 'react';
-export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'matchActivatorWidth' | 'show'> {
+export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'show'> {
     /**
      * Sets the alignment of the dropdown relative to the activator element.
      * @default bottom-start
@@ -21,6 +21,13 @@ export interface IressRichSelectProps extends Omit<AutocompleteSearchHookProps,
      * Set to true if the user can select multiple options.
      */
     multiSelect?: boolean;
+    /**
+     * Whether the popover should match the width of the activator element.
+     * When true, the dropdown will have the same width as the select input.
+     * When false, the dropdown will size based on its content.
+     * @default true
+     */
+    matchActivatorWidth?: boolean;
     /**
      * Name of the select. Used to pass data when submitted within a form.
      */

package/dist/src/components/RichSelect/SelectMenu/SelectMenuItem.d.ts

@@ -1,2 +1,2 @@
 import { IressSelectMenuItemProps } from './SelectMenu.types';
-export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IressSelectMenuItem: ({ className, divider, formattedLabel, formattedMeta, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/RichSelect/components/SelectOptions.d.ts

@@ -1,6 +1,8 @@
 import { IressRichSelectProps, SelectOptionsRenderProps } from '../RichSelect.types';
 interface SelectOptionsProps extends Pick<IressRichSelectProps, 'autoHighlight' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps, 'close'> {
     setShow: (show: boolean) => void;
+    shouldShowInstructions?: boolean;
+    shouldShowNoResults?: boolean;
 }
-export declare const SelectOptions: ({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, value, }: SelectOptionsProps) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const SelectOptions: ({ autoHighlight, debouncedQuery, error, initialOptions: initialOptionsProp, loading, minSearchLength, multiSelect, onChange, options, query, renderOptions, results, setQuery, setShow, setValue, show, value, shouldShowInstructions, shouldShowNoResults, }: SelectOptionsProps) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/src/components/Slideout/Slideout.types.d.ts

@@ -58,6 +58,10 @@ export interface IressSlideoutProps extends IressHTMLAttributes {
      * Use for controlled slideouts.
      */
     onShowChange?: (show: boolean, reason?: OpenChangeReason) => void;
+    /**
+     * Emitted when the slideout has mounted, unmounted, opened or closed. Open and close occur before animation begins.
+     */
+    onStatus?: (status: 'unmounted' | 'initial' | 'open' | 'close') => void;
     /**
      * Emitted when the slideout has opened.
      */

package/dist/src/helpers/dom/closestCrossShadow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Finds the closest ancestor element that matches the selector, traversing across shadow DOM boundaries.
+ * Similar to native Element.closest() but works across shadow DOM.
+ *
+ * @param element - The starting element
+ * @param selector - CSS selector to match against
+ * @returns The closest ancestor element matching the selector, or null if not found
+ */
+export declare const closestCrossShadow: (element: Element | null, selector: string) => Element | null;

package/dist/src/interfaces.d.ts

@@ -55,6 +55,7 @@ export interface LabelValueMeta extends LabelValue {
 }
 export interface FormattedLabelValueMeta extends LabelValueMeta {
     formattedLabel?: React.ReactNode;
+    formattedMeta?: React.ReactNode;
 }
 export interface BreakpointDetail {
     mediaQuery: string;