@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Autocomplete/hooks/useAutocompleteSearch.js

@@ -1,174 +1,193 @@
-import { useRef as f, useState as R, useCallback as p, useEffect as _, useMemo as L } from "react";
-import { searchLabelValues as U } from "../../../helpers/label-value/searchLabelValues.js";
-import { highlightQueryInLabelValue as I } from "../../../helpers/label-value/highlightQueryInLabelValue.js";
-function V(e, n, u, c) {
-  var a = this, t = f(null), l = f(0), s = f(0), r = f(null), d = f([]), h = f(), m = f(), T = f(e), E = f(!0);
-  T.current = e;
-  var v = typeof window < "u", g = !n && n !== 0 && v;
+import { useRef as d, useState as T, useCallback as v, useMemo as V, useEffect as U } from "react";
+import { searchLabelValues as B } from "../../../helpers/label-value/searchLabelValues.js";
+import { highlightQueryInLabelValue as C } from "../../../helpers/label-value/highlightQueryInLabelValue.js";
+function G(e, r, s, u) {
+  var i = this, c = d(null), n = d(0), l = d(0), t = d(null), o = d([]), h = d(), f = d(), E = d(e), S = d(!0), p = d(), m = d();
+  E.current = e;
+  var R = typeof window < "u", y = !r && r !== 0 && R;
   if (typeof e != "function") throw new TypeError("Expected a function");
-  n = +n || 0;
-  var w = !!(u = u || {}).leading, A = !("trailing" in u) || !!u.trailing, S = "maxWait" in u, O = "debounceOnServer" in u && !!u.debounceOnServer, b = S ? Math.max(+u.maxWait || 0, n) : null;
-  _(function() {
-    return E.current = !0, function() {
-      E.current = !1;
-    };
-  }, []);
-  var M = L(function() {
-    var x = function(o) {
-      var i = d.current, y = h.current;
-      return d.current = h.current = null, l.current = o, s.current = s.current || o, m.current = T.current.apply(y, i);
-    }, D = function(o, i) {
-      g && cancelAnimationFrame(r.current), r.current = g ? requestAnimationFrame(o) : setTimeout(o, i);
-    }, H = function(o) {
-      if (!E.current) return !1;
-      var i = o - t.current;
-      return !t.current || i >= n || i < 0 || S && o - l.current >= b;
-    }, Q = function(o) {
-      return r.current = null, A && d.current ? x(o) : (d.current = h.current = null, m.current);
-    }, F = function o() {
-      var i = Date.now();
-      if (w && s.current === l.current && N(), H(i)) return Q(i);
-      if (E.current) {
-        var y = n - (i - t.current), k = S ? Math.min(y, b - (i - l.current)) : y;
-        D(o, k);
+  r = +r || 0;
+  var b = !!(s = s || {}).leading, F = !("trailing" in s) || !!s.trailing, L = !!s.flushOnExit && F, D = "maxWait" in s, _ = "debounceOnServer" in s && !!s.debounceOnServer, H = D ? Math.max(+s.maxWait || 0, r) : null, M = V(function() {
+    var w = function(a) {
+      var g = o.current, A = h.current;
+      return o.current = h.current = null, n.current = a, l.current = l.current || a, f.current = E.current.apply(A, g);
+    }, O = function(a, g) {
+      y && cancelAnimationFrame(t.current), t.current = y ? requestAnimationFrame(a) : setTimeout(a, g);
+    }, N = function(a) {
+      if (!S.current) return !1;
+      var g = a - c.current;
+      return !c.current || g >= r || g < 0 || D && a - n.current >= H;
+    }, k = function(a) {
+      return t.current = null, F && o.current ? w(a) : (o.current = h.current = null, f.current);
+    }, Q = function a() {
+      var g = Date.now();
+      if (b && l.current === n.current && I(), N(g)) return k(g);
+      if (S.current) {
+        var A = r - (g - c.current), x = D ? Math.min(A, H - (g - n.current)) : A;
+        O(a, x);
       }
-    }, N = function() {
-      c && c({});
+    }, I = function() {
+      u && u({});
     }, W = function() {
-      if (v || O) {
-        var o = Date.now(), i = H(o);
-        if (d.current = [].slice.call(arguments), h.current = a, t.current = o, i) {
-          if (!r.current && E.current) return l.current = t.current, D(F, n), w ? x(t.current) : m.current;
-          if (S) return D(F, n), x(t.current);
+      if (R || _) {
+        var a, g = Date.now(), A = N(g);
+        if (o.current = [].slice.call(arguments), h.current = i, c.current = g, L && !p.current && (p.current = function() {
+          var x;
+          ((x = global.document) == null ? void 0 : x.visibilityState) === "hidden" && m.current.flush();
+        }, (a = global.document) == null || a.addEventListener == null || a.addEventListener("visibilitychange", p.current)), A) {
+          if (!t.current && S.current) return n.current = c.current, O(Q, r), b ? w(c.current) : f.current;
+          if (D) return O(Q, r), w(c.current);
         }
-        return r.current || D(F, n), m.current;
+        return t.current || O(Q, r), f.current;
       }
     };
     return W.cancel = function() {
-      var o = r.current;
-      o && (g ? cancelAnimationFrame(r.current) : clearTimeout(r.current)), l.current = 0, d.current = t.current = h.current = r.current = null, o && c && c({});
+      var a = t.current;
+      a && (y ? cancelAnimationFrame(t.current) : clearTimeout(t.current)), n.current = 0, o.current = c.current = h.current = t.current = null, a && u && u({});
     }, W.isPending = function() {
-      return !!r.current;
+      return !!t.current;
     }, W.flush = function() {
-      return r.current ? Q(Date.now()) : m.current;
+      return t.current ? k(Date.now()) : f.current;
     }, W;
-  }, [w, S, n, b, A, g, v, O, c]);
-  return M;
+  }, [b, D, r, H, F, L, y, R, _, u]);
+  return m.current = M, U(function() {
+    return S.current = !0, function() {
+      var w;
+      L && m.current.flush(), p.current && ((w = global.document) == null || w.removeEventListener == null || w.removeEventListener("visibilitychange", p.current), p.current = null), S.current = !1;
+    };
+  }, [L]), M;
 }
-function B(e, n) {
-  return e === n;
+function P(e, r) {
+  return e === r;
 }
-function C(e, n, u) {
-  var c = B, a = f(e), t = R({})[1], l = V(p(function(r) {
-    a.current = r, t({});
-  }, [t]), n, u, t), s = f(e);
-  return c(s.current, e) || (l(e), s.current = e), [a.current, l];
+function j(e, r, s) {
+  var u = P, i = d(e), c = T({})[1], n = G(v(function(t) {
+    i.current = t, c({});
+  }, [c]), r, s, c), l = d(e);
+  return u(l.current, e) || (n(e), l.current = e), [i.current, n];
 }
-const G = 500, P = 1, j = (e) => e instanceof Error && e.message ? e.message : typeof e == "string" ? e : !0, z = () => {
-  const [e, n] = R(!1), [u, c] = R(!1), [a, t] = R([]), [l, s] = R(!1), r = p(() => {
-    t([]), n(!1), c(!1), s(!1);
-  }, []), d = p(
-    (g, w) => {
-      t(
-        g.map(
-          (A) => I(A, w)
+const z = 500, J = 1, K = (e) => e instanceof Error && e.message ? e.message : typeof e == "string" ? e : !0, X = () => {
+  const [e, r] = T(!1), [s, u] = T(!1), [i, c] = T([]), [n, l] = T(!1), t = v(() => {
+    c([]), r(!1), u(!1), l(!1);
+  }, []), o = v(
+    (m, R) => {
+      c(
+        m.map(
+          (y) => C(y, R)
         )
-      ), c(!1), n(!1);
+      ), u(!1), r(!1);
     },
     []
-  ), h = p((g) => {
-    t([]), c(g), n(!1);
-  }, []), m = p(() => {
-    c(!1);
-  }, []), T = p((g) => {
-    n(g);
-  }, []), E = p((g) => {
-    s(g);
-  }, []), v = p(() => {
-    c(!1);
+  ), h = v((m) => {
+    c([]), u(m), r(!1);
+  }, []), f = v(() => {
+    u(!1);
+  }, []), E = v((m) => {
+    r(m);
+  }, []), S = v((m) => {
+    l(m);
+  }, []), p = v(() => {
+    u(!1);
   }, []);
   return {
     loading: e,
-    error: u,
-    results: a,
-    hasSearched: l,
-    reset: r,
-    updateWithResults: d,
+    error: s,
+    results: i,
+    hasSearched: n,
+    reset: t,
+    updateWithResults: o,
     updateWithError: h,
-    clearError: m,
-    setLoadingState: T,
-    setSearched: E,
-    clearErrorState: v
+    clearError: f,
+    setLoadingState: E,
+    setSearched: S,
+    clearErrorState: p
   };
-}, J = (e, n) => {
-  const u = f(""), c = p((s) => u.current === s, []), a = p((s) => {
-    u.current = s;
-  }, []), t = p(
-    async (s, r, d) => {
-      if (c(r)) return;
-      const h = ++n.current;
-      if (a(r), r.length >= d) {
+}, Y = (e, r) => {
+  const s = d(""), u = v((l) => s.current === l, []), i = v((l) => {
+    s.current = l;
+  }, []), c = v(
+    async (l, t, o, h = !1) => {
+      if (u(t) && !h) return;
+      const f = ++r.current;
+      if (i(t), t.length >= o || h) {
         e.setLoadingState(!0), e.clearErrorState();
         try {
-          const m = await s(r);
-          if (h !== n.current) return;
-          e.setSearched(!0), e.updateWithResults(m, r);
-        } catch (m) {
-          if (h !== n.current) return;
+          const E = await l(t);
+          if (f !== r.current) return;
+          e.setSearched(!0), e.updateWithResults(E, t);
+        } catch (E) {
+          if (f !== r.current) return;
           e.setSearched(!0), e.updateWithError(
-            j(m)
+            K(E)
           );
         }
       } else
         e.reset();
     },
-    [e, c, a, n]
-  ), l = p(
-    (s, r, d) => {
-      if (!c(r))
-        if (a(r), r.length >= d) {
+    [e, u, i, r]
+  ), n = v(
+    (l, t, o, h = !1) => {
+      if (!(u(t) && !h))
+        if (i(t), t.length >= o || h) {
           e.setSearched(!0);
-          const h = U(r, s);
-          e.updateWithResults(h, r);
+          const f = B(t, l);
+          e.updateWithResults(f, t);
         } else
           e.reset();
     },
-    [e, c, a]
+    [e, u, i]
   );
   return {
-    handleAsync: t,
-    handleSync: l
+    handleAsync: c,
+    handleSync: n
   };
-}, Z = ({
-  debounceThreshold: e = G,
-  initialOptions: n = [],
-  minSearchLength: u = P,
-  options: c = [],
-  query: a = ""
+}, rr = ({
+  debounceThreshold: e = z,
+  disabled: r = !1,
+  initialOptions: s = [],
+  minSearchLength: u = J,
+  options: i = [],
+  query: c = ""
 }) => {
-  const t = z(), l = f(0), s = J(t, l), [r] = C(a, e);
-  return _(() => {
-    if (typeof c == "function") {
-      s.handleAsync(
-        c,
-        r,
-        u
-      );
-      return;
-    }
-    s.handleSync(c, r, u);
-  }, [r, c, u, s]), {
-    clearError: t.clearError,
-    debouncedQuery: r,
-    error: t.error,
-    loading: t.loading,
-    shouldShowInstructions: a.length < u,
-    shouldShowDebounceWaiting: a.length >= u && r.length < u && !t.loading && !t.hasSearched,
-    shouldShowNoResults: t.hasSearched && !t.loading && t.results.length === 0 && r.length >= u,
-    results: r ? t.results : n ?? [],
-    stopSearch: t.reset
+  const n = X(), l = d(0), t = Y(n, l), [o] = j(c, e), h = v(
+    (E = !1) => {
+      if (!r) {
+        if (typeof i == "function") {
+          t.handleAsync(
+            i,
+            o,
+            u,
+            E
+          );
+          return;
+        }
+        t.handleSync(
+          i,
+          o,
+          u,
+          E
+        );
+      }
+    },
+    [r, o, u, i, t]
+  );
+  U(() => {
+    r || h();
+  }, [r, h]);
+  let f;
+  return r ? f = Array.isArray(i) ? i : s ?? [] : n.results.length ? f = n.results : o.length ? f = [] : f = s ?? [], {
+    clearError: n.clearError,
+    debouncedQuery: o,
+    error: n.error,
+    loading: r ? !1 : n.loading,
+    shouldShowInstructions: !r && c.length < u && !n.results.length && !s?.length,
+    shouldShowDebounceWaiting: !r && c.length >= u && o.length < u && !n.loading && !n.hasSearched,
+    shouldShowNoResults: !r && n.hasSearched && !n.loading && n.results.length === 0 && c.length >= u,
+    results: f,
+    startSearch: h,
+    stopSearch: n.reset
   };
 };
 export {
-  Z as useAutocompleteSearch
+  rr as useAutocompleteSearch
 };

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import { a as t } from "../../Autocomplete-C5ubHBTi.js";
+import { a as t } from "../../Autocomplete-BRMDwwwT.js";
 import { autoComplete as m } from "./Autocomplete.styles.js";
 import { useAutocompleteSearch as a } from "./hooks/useAutocompleteSearch.js";
 export {

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,103 @@
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { Breakpoints } from '../../types';
+import { ButtonGroupItemProps } from '../ButtonGroup';
+import { IressCSSProps, IressTestProps } from '../../interfaces';
+import { MaterialSymbol } from 'material-symbols';
+export type ButtonElement<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = C extends ElementType ? C : THref extends string ? 'a' : 'button';
+export type ButtonRef<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = ComponentPropsWithRef<ButtonElement<C, THref>>['ref'];
+export type ButtonInstance<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = Exclude<Parameters<Exclude<ButtonRef<C, THref>, undefined>>[0], null>;
+export interface ButtonRenderProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> {
+    /**
+     * Used to describe the expected action of this button.
+     */
+    children?: ReactNode;
+    /**
+     * The classes to be applied to the button.
+     */
+    className?: string;
+    /**
+     * Handles the selection of the menu item.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+}
+export interface InternalButtonProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> extends IressCSSProps, IressTestProps, ButtonGroupItemProps {
+    /**
+     * Sets the active state of the button, usually used to indicate the button has activated a modal, popover or slideout.
+     */
+    active?: boolean;
+    /**
+     * Content for the append slot.
+     */
+    append?: ReactNode;
+    /**
+     * Content is placed between prepend and append if provided. Used to describe the expected action of this button.
+     */
+    children?: ReactNode;
+    /**
+     * Makes the button more compact by reducing padding and font size. Used for buttons with icon only or when space is limited.
+     */
+    compact?: boolean;
+    /**
+     * Change the component that will be rendered as the button, used for third-party libraries that require a specific element type.
+     * By default, it will render a button or an anchor tag based on the `href` prop.
+     */
+    element?: C;
+    /**
+     * If `true`, the button will stretch to fill it's container. The prop is responsive, so you can set the breakpoint(s) at which the button will be fluid.
+     *
+     * All breakpoints: `fluid={true}`
+     * Up to a specific breakpoint: `fluid="md"`
+     */
+    fluid?: true | Breakpoints;
+    /**
+     * Contains a URL or a URL fragment that the hyperlink points to.
+     * If this property is set, an anchor tag will be rendered.
+     */
+    href?: THref;
+    /**
+     * The icon to be displayed in the button. If provided, the icon will be displayed and the `children` will be used as screen reader text (although you can explicitly override this with `aria-label`)
+     */
+    icon?: MaterialSymbol;
+    /**
+     * When true, button is in loading state. If provided a string, will be used as the loading text for screen readers.
+     */
+    loading?: boolean | string;
+    /**
+     * Style of the button.
+     * - Primary: Used for the main action on a page. Usually only used once per screen.
+     * - Secondary: Used for secondary actions on a page, often an action on multiple `IressPanel`s. Can used multiple times per screen.
+     * - Tertiary: Used for tertiary actions on a page, often the secondary action on multiple `IressPanel`s. Can used multiple times per screen.
+     * - Quaternary: Used for less prominent actions, often used for preference toggles (eg. Collapse all).
+     * - Muted: Used for less prominent actions, often used inline with headings. They are mainly used with icons only.
+     *
+     * **Migrating to version 6**
+     * - `link` mode has been removed. If it is an action, use the `tertiary` mode. If it is a link inside a paragraph, use the new `IressLink` component instead.
+     * - `danger` has been removed. Please use the `status` prop instead.
+     * - `positive` and `success` have been removed. Please use the `status` prop instead.
+     */
+    mode?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'muted';
+    /**
+     * Emitted when the menu item is clicked.
+     */
+    onClick?: MouseEventHandler<ButtonInstance<C, THref>>;
+    /**
+     * Content for the prepend slot.
+     */
+    prepend?: ReactNode;
+    /**
+     * Prevents text wrapping if set to true.
+     */
+    noWrap?: boolean;
+    /**
+     * An optional status to assign to the button.
+     * - `success`: Indicates a successful or positive action.
+     * - `danger`: Indicates a dangerous or potentially negative action.
+     */
+    status?: 'success' | 'danger';
+}
+export type IressButtonProps<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined> = Omit<ComponentPropsWithoutRef<ButtonElement<C, THref>>, keyof InternalButtonProps<C, THref>> & InternalButtonProps<C, THref>;
+export declare const IressButton: (<C extends ElementType | undefined = undefined, THref extends string | undefined = undefined>(props: IressButtonProps<C, THref> & {
+    ref?: ButtonRef<C, THref>;
+}) => ReactElement) & {
+    displayName: "IressButton";
+};

package/dist/components/Button/Button.js

@@ -3,14 +3,23 @@ import "react";
 import "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
 import "../../enums.js";
+import "../ButtonGroup/ButtonGroup.js";
 import "../ButtonGroup/ButtonGroup.styles.js";
-import "../../css-fGu_jDvv.js";
-import "../../cx-DN21T1EH.js";
-import "../../is-valid-prop-Ce0wiweq.js";
-import "../ButtonGroup/ButtonGroupProvider.js";
 import "../ButtonGroup/hooks/useButtonGroupItem.js";
-import { I as B } from "../../Button-mmhMLwp9.js";
+import "../../is-valid-prop-C5D641yn.js";
+import "../../css-DVJ-ALYD.js";
+import "../../cx-DN21T1EH.js";
+import { I as q } from "../../Button-C0p8bEXn.js";
+import "../Popover/Popover.js";
+import "../Popover/Popover.styles.js";
+import "../Popover/InputPopover/InputPopover.js";
 import "../Popover/hooks/usePopover.js";
+import "../Popover/hooks/useFloatingPopover.js";
+import "../Icon/Icon.js";
+import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
+import "../Tooltip/Tooltip.js";
+import "../Tooltip/Tooltip.styles.js";
 export {
-  B as IressButton
+  q as IressButton
 };

package/dist/components/Button/CloseButton/CloseButton.js

@@ -1,27 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { I as e } from "../../../Button-mmhMLwp9.js";
-import { IressIcon as a } from "../../Icon/Icon.js";
-import "../../Icon/Icon.styles.js";
-import { forwardRef as i } from "react";
+import { jsx as e } from "react/jsx-runtime";
+import { I as m } from "../../../Button-C0p8bEXn.js";
+import { forwardRef as a } from "react";
 import { c as l } from "../../../cx-DN21T1EH.js";
-import { GlobalCSSClass as n } from "../../../enums.js";
-const p = i(
+import { GlobalCSSClass as i } from "../../../enums.js";
+const f = a(
   ({
-    className: r,
+    className: o,
     screenreaderText: s = "Close button",
-    ...t
-  }, m) => /* @__PURE__ */ o(
-    e,
+    ...r
+  }, t) => /* @__PURE__ */ e(
+    m,
     {
-      ...t,
-      className: l(r, n.CloseButton),
-      mode: "tertiary",
-      ref: m,
-      children: /* @__PURE__ */ o(a, { name: "times", screenreaderText: s })
+      borderRadius: "50%",
+      ...r,
+      "aria-label": s,
+      className: l(o, i.CloseButton),
+      mode: "muted",
+      icon: "close",
+      ref: t
     }
   )
 );
-p.displayName = "IressCloseButton";
+f.displayName = "IressCloseButton";
 export {
-  p as IressCloseButton
+  f as IressCloseButton
 };

package/dist/components/Button/index.js

@@ -1,4 +1,4 @@
-import { I as s, b as r } from "../../Button-mmhMLwp9.js";
+import { I as s, b as r } from "../../Button-C0p8bEXn.js";
 import { IressCloseButton as n } from "./CloseButton/CloseButton.js";
 export {
   s as IressButton,

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,38 @@
+import { ControlledValue } from '../../hooks';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { ReactNode } from 'react';
+export interface IressButtonGroupProps<T = FormControlValue, TMultiple extends boolean = false> extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content of the button group, usually multiple `IressButton`.
+     */
+    children?: ReactNode;
+    /**
+     * Initially selected value, use for uncontrolled components.
+     */
+    defaultSelected?: ControlledValue<T, TMultiple>;
+    /**
+     * Hides the label if set; label will still be read out by screen readers.
+     */
+    hiddenLabel?: boolean;
+    /**
+     * Sets the label text for the button group.
+     * If passed an element, it will render the element with an id, to ensure its connection to the button group.
+     */
+    label: ReactNode;
+    /**
+     * Allows multiple buttons to be selected.
+     */
+    multiple?: TMultiple;
+    /**
+     * Called when a user activates one of its children buttons.
+     */
+    onChange?: (newValue?: ControlledValue<T, TMultiple>) => void;
+    /**
+     * Selected value, use for controlled components.
+     */
+    selected?: ControlledValue<T, TMultiple>;
+}
+export declare const IressButtonGroup: {
+    <T = FormControlValue, TMultiple extends boolean = false>({ children, className, "data-testid": dataTestId, defaultSelected, hiddenLabel, label, multiple, onChange, selected, ...restProps }: IressButtonGroupProps<T, TMultiple>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};