@iress-oss/ids-components 5.15.2 → 5.17.0

package/dist/helpers/dom/closestCrossShadow.js

@@ -0,0 +1,26 @@
+const h = (t, r) => {
+  var i, n;
+  if (!t)
+    return null;
+  const a = (i = t.closest) == null ? void 0 : i.call(t, r);
+  if (a)
+    return a;
+  let o = t;
+  for (; o; ) {
+    if ((n = o.matches) != null && n.call(o, r))
+      return o;
+    let s = o.parentElement;
+    if (!s) {
+      const f = o.getRootNode();
+      if (f instanceof ShadowRoot)
+        s = f.host;
+      else
+        break;
+    }
+    o = s;
+  }
+  return null;
+};
+export {
+  h as closestCrossShadow
+};

package/dist/main.js

@@ -1,11 +1,11 @@
-import { I as o, a as s, b as t, d as I, c as a, e as p, g as S, h as m, j as x, i as l, k as T, l as f, m as n, n as i, P as E, Q as u, o as O, p as d, r as C, q as _, s as A, f as L, t as M, u as N, v as P, w as R, D as c, E as D, x as g, y as G, z as B, A as F, B as U, C as b, F as y, G as v, H as k, J as H, K as V, L as h, M as Y, O as X, T as z, N as Z } from "./LoadingSuspense-BMFBqvXJ.js";
+import { I as o, a as s, b as t, d as I, c as a, e as p, g as S, h as m, j as x, i as l, k as T, l as f, m as n, n as i, P as E, Q as u, o as O, p as d, r as C, q as _, s as A, f as L, t as M, u as N, v as P, w as R, D as c, E as D, x as g, y as G, z as B, A as F, B as U, C as b, F as y, G as v, H as k, J as H, K as V, L as h, M as Y, O as X, T as z, N as Z } from "./LoadingSuspense-BjzbePWa.js";
 import { ALERT_ICONS as w } from "./components/Alert/Alert.types.js";
 import { useAutocompleteSearch as W } from "./components/Autocomplete/hooks/useAutocompleteSearch.js";
 import { IressBadge as q } from "./components/Badge/Badge.js";
 import { BADGE_MODES as $, BadgeMode as ee } from "./components/Badge/Badge.types.js";
 import { BUTTON_MODES as oe, BUTTON_TYPES as se, ButtonCssClass as te, ButtonMode as Ie, ButtonType as ae } from "./components/Button/Button.types.js";
 import { IressButtonGroup as Se } from "./components/ButtonGroup/ButtonGroup.js";
-import { u as xe } from "./useIDSButtonGroupItem-BdwMUgHj.js";
+import { u as xe } from "./useIDSButtonGroupItem-NdNvcZnJ.js";
 import { CardCssClass as Te, CardSlotClass as fe } from "./components/Card/Card.types.js";
 import { IressCard as ie } from "./components/Card/Card.js";
 import { IressButtonCard as ue } from "./components/Card/components/ButtonCard.js";
@@ -67,7 +67,7 @@ import { SKELETON_MODES as qo, SkeletonMode as Jo } from "./components/Skeleton/
 import { IressSkeleton as es } from "./components/Skeleton/Skeleton.js";
 import { IressSkipLink as os } from "./components/SkipLink/SkipLink.js";
 import { SLIDEOUT_MODES as ts, SLIDEOUT_POSITIONS as Is, SLIDEOUT_SIZES as as, SlideoutMode as ps, SlideoutPosition as Ss, SlideoutSize as ms } from "./components/Slideout/Slideout.types.js";
-import { IressSlideoutContext as ls, IressSlideoutProvider as Ts } from "./components/Slideout/SlideoutProvider.js";
+import { I as ls, a as Ts } from "./SlideoutProvider-CQh140HM.js";
 import { useSlideout as ns } from "./components/Slideout/hooks/useSlideout.js";
 import { StackCssClass as Es } from "./components/Stack/Stack.types.js";
 import { IressStack as Os } from "./components/Stack/Stack.js";

package/dist/patterns/Loading/Loading.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "./components/StartUpLoading.js";
-import { P as s } from "../../LoadingSuspense-BMFBqvXJ.js";
+import { P as s } from "../../LoadingSuspense-BjzbePWa.js";
 import "./hooks/useShouldRenderLoading.js";
 import "./components/LongLoading.js";
 export {

package/dist/patterns/Loading/LoadingSuspense.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import "react";
-import { Q as i } from "../../LoadingSuspense-BMFBqvXJ.js";
+import { Q as i } from "../../LoadingSuspense-BjzbePWa.js";
 import "./hooks/useSuspenseResource.js";
 export {
   i as IressLoadingSuspense

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

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
 import "../../../components/Skeleton/Skeleton.js";
-import { ag as e } from "../../../LoadingSuspense-BMFBqvXJ.js";
-import "../../../Loading.module-DUh3NIWC.js";
+import { ag as e } from "../../../LoadingSuspense-BjzbePWa.js";
+import "../../../Loading.module-PM8ehb0Z.js";
 import "../../../index-2QXL0WYc.js";
 import "../../../components/Text/Text.js";
 export {

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

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
 import "react";
-import { ae as e } from "../../../LoadingSuspense-BMFBqvXJ.js";
+import { ae as e } from "../../../LoadingSuspense-BjzbePWa.js";
 import "../../../components/Text/Text.js";
 import "../../../index-2QXL0WYc.js";
-import "../../../Loading.module-DUh3NIWC.js";
+import "../../../Loading.module-PM8ehb0Z.js";
 export {
   e as DefaultLoading
 };

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-DUh3NIWC.js";
+import { l as m } from "../../../Loading.module-PM8ehb0Z.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-v5151", V = "ids-long-loading--panel-v5151", B = "ids-long-loading--dots-v5151", E = "ids-long-loading--check-list-v5151", R = "ids-long-loading--check-list-item-v5151", T = "ids-long-loading--check-list-item__done-v5151", U = "ids-long-loading--checked-v5151", $ = "ids-long-loading--checked__circle-v5151", q = "ids-long-loading--checked__check-v5151", s = {
+const P = "ids-long-loading--root-v5170", V = "ids-long-loading--panel-v5170", B = "ids-long-loading--dots-v5170", E = "ids-long-loading--check-list-v5170", R = "ids-long-loading--check-list-item-v5170", T = "ids-long-loading--check-list-item__done-v5170", U = "ids-long-loading--checked-v5170", $ = "ids-long-loading--checked__circle-v5170", q = "ids-long-loading--checked__check-v5170", 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-BMFBqvXJ.js";
+import { ah as n } from "../../../LoadingSuspense-BjzbePWa.js";
 import "../../../components/Col/Col.js";
 import "../../../components/Divider/Divider.js";
 import "../../../components/Card/Card.js";
 import "../../../index-2QXL0WYc.js";
-import "../../../Loading.module-DUh3NIWC.js";
+import "../../../Loading.module-PM8ehb0Z.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-DUh3NIWC.js";
+import { l as n } from "../../../Loading.module-PM8ehb0Z.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-v5151", P = "ids-start-up-loading--progress-v5151", h = {
+const H = "ids-start-up-loading--root-v5170", P = "ids-start-up-loading--progress-v5170", 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-BMFBqvXJ.js";
+import { af as d } from "../../../LoadingSuspense-BjzbePWa.js";
 import "../../../index-2QXL0WYc.js";
 import "react";
 import "../../../components/Text/Text.js";
-import "../../../Loading.module-DUh3NIWC.js";
+import "../../../Loading.module-PM8ehb0Z.js";
 export {
   d as ValidateLoading
 };

package/dist/patterns/Loading/index.js

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

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

@@ -56,6 +56,12 @@ export interface AutocompleteSearchHookProps {
      * Initial options data set, shown when the input is empty.
      */
     initialOptions?: LabelValueMeta[];
+    /**
+     * Minimum number of characters required before triggering async search. Only applies to searchable options (function).
+     * Below this threshold, no search will be triggered and no loading state will be shown.
+     * @default 1
+     */
+    minSearchLength?: number;
     /**
      * Options data set, shown when the input is not empty.
      */
@@ -91,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;
@@ -104,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';
-export declare const useAutocompleteSearch: ({ debounceThreshold, initialOptions, options, query, }: AutocompleteSearchHookProps) => AutocompleteSearchHookReturn;
+/**
+ * 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/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, ...restProps }: IressSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+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;

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' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps, 'close'> {
+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, 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.
      */
@@ -97,7 +101,7 @@ export interface IressSlideoutProviderProps extends PropsWithChildren {
      * If you are rendering a slideout inside a micro-frontend, using `push` mode and `eleToPush` is targetting an element in the parent app, you will need to set this to `true` to ensure the styles are injected into the parent app.
      * This will ensure the slideout is positioned correctly and the element is pushed correctly.
      */
-    injectPushStyles?: boolean;
+    injectPushStyles?: boolean | string;
 }
 export interface IressSlideoutContextValue {
     container?: FloatingUIContainer;

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;