@iress-oss/ids-components 6.0.0-alpha.26 → 6.0.0-alpha.28

package/dist/{Button-DNFXX5JD.js → Button-BFMrbk9D.js}

@@ -1,26 +1,26 @@
-import { jsxs as N, Fragment as O, jsx as n } from "react/jsx-runtime";
-import { forwardRef as j, useId as M, useRef as R, useMemo as d, useCallback as E, useImperativeHandle as T } from "react";
-import { IressSpinner as A } from "./components/Spinner/Spinner.js";
+import { jsxs as O, Fragment as j, jsx as n } from "react/jsx-runtime";
+import { forwardRef as M, useId as R, useRef as E, useMemo as d, useCallback as T, useImperativeHandle as A } from "react";
+import { IressSpinner as K } from "./components/Spinner/Spinner.js";
 import "./components/Spinner/Spinner.styles.js";
 import { GlobalCSSClass as b } from "./enums.js";
 import "./components/ButtonGroup/ButtonGroup.js";
 import "./components/ButtonGroup/ButtonGroup.styles.js";
-import { useButtonGroupItem as K } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
-import { s as L } from "./is-valid-prop-C5D641yn.js";
-import { m as W, a as D, s as z, i as J, c as Q } from "./css-DVJ-ALYD.js";
-import { c as U } from "./cx-DN21T1EH.js";
-import { c as X } from "./create-recipe-BDTG8O8S.js";
+import { useButtonGroupItem as L } from "./components/ButtonGroup/hooks/useButtonGroupItem.js";
+import { s as W } from "./is-valid-prop-C5D641yn.js";
+import { m as D, a as z, s as J, i as Q, c as U } from "./css-DVJ-ALYD.js";
+import { c as X } from "./cx-DN21T1EH.js";
+import { c as Y } from "./create-recipe-BDTG8O8S.js";
 import "./components/Popover/Popover.js";
 import "./components/Popover/Popover.styles.js";
 import "./components/Popover/InputPopover/InputPopover.js";
-import { usePopover as Y } from "./components/Popover/hooks/usePopover.js";
+import { usePopover as Z } from "./components/Popover/hooks/usePopover.js";
 import "./components/Popover/hooks/useFloatingPopover.js";
-import { IressIcon as Z } from "./components/Icon/Icon.js";
+import { IressIcon as $ } from "./components/Icon/Icon.js";
 import "./components/Icon/Icon.styles.js";
 import "./components/Icon/IconProvider.js";
-import { IressTooltip as $ } from "./components/Tooltip/Tooltip.js";
+import { IressTooltip as oo } from "./components/Tooltip/Tooltip.js";
 import "./components/Tooltip/Tooltip.styles.js";
-const I = {}, oo = [
+const I = {}, ro = [
   {
     mode: "primary",
     status: "danger",
@@ -383,7 +383,7 @@ const I = {}, oo = [
       }
     }
   }
-], ro = [
+], so = [
   [
     "root",
     "button__root"
@@ -400,8 +400,9 @@ const I = {}, oo = [
     "spinner",
     "button__spinner"
   ]
-], so = /* @__PURE__ */ ro.map(([o, c]) => [o, X(c, I, J(oo, o))]), eo = W((o = {}) => Object.fromEntries(so.map(([c, r]) => [c, r.recipeFn(o)]))), S = [
+], eo = /* @__PURE__ */ so.map(([o, c]) => [o, Y(c, I, Q(ro, o))]), to = D((o = {}) => Object.fromEntries(eo.map(([c, r]) => [c, r.recipeFn(o)]))), S = [
   "active",
+  "compact",
   "fluid",
   "inButtonGroup",
   "iconOnly",
@@ -409,7 +410,7 @@ const I = {}, oo = [
   "mode",
   "noWrap",
   "status"
-], to = (o) => ({ ...I, ...D(o) }), co = /* @__PURE__ */ Object.assign(eo, {
+], co = (o) => ({ ...I, ...z(o) }), no = /* @__PURE__ */ Object.assign(to, {
   __recipe__: !1,
   __name__: "button",
   raw: (o) => o,
@@ -419,6 +420,9 @@ const I = {}, oo = [
     active: [
       "true"
     ],
+    compact: [
+      "true"
+    ],
     fluid: [
       "true",
       "xs",
@@ -455,67 +459,69 @@ const I = {}, oo = [
     ]
   },
   splitVariantProps(o) {
-    return z(o, S);
+    return J(o, S);
   },
-  getVariantProps: to
-}), no = ({
+  getVariantProps: co
+}), ao = ({
   active: o,
   append: c,
   children: r,
   className: x,
+  compact: k,
   element: u,
   fluid: f,
   icon: l,
   loading: s = !1,
   mode: g = "secondary",
   prepend: y,
-  noWrap: k = !1,
+  noWrap: F = !1,
   onClick: v,
-  status: F,
-  value: B,
+  status: B,
+  value: G,
   ..._
-}, G) => {
-  const i = M(), P = B ?? (typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? r : void 0), V = Y(), m = R(null), e = K({ value: P }), q = d(() => e ? e.active ? "primary" : "tertiary" : g, [e, g]), t = co({
+}, P) => {
+  const i = R(), V = G ?? (typeof r == "string" || typeof r == "number" || typeof r == "boolean" ? r : void 0), q = Z(), m = E(null), e = L({ value: V }), N = d(() => e ? e.active ? "primary" : "tertiary" : g, [e, g]), t = no({
     active: (
       // eslint-disable-next-line react-hooks/refs -- ref needed for forwarding
-      o ?? V?.isActiveActivator(m.current)
+      o ?? q?.isActiveActivator(m.current)
     ),
+    compact: k,
     fluid: f === !0 ? "true" : f,
     inButtonGroup: !!e,
-    mode: q,
+    mode: N,
     iconOnly: !!l,
     loading: !!s,
-    noWrap: k,
-    status: F
+    noWrap: F,
+    status: B
   }), [h, a] = d(
-    () => L(_),
+    () => W(_),
     [_]
-  ), C = E(
+  ), C = T(
     (p) => {
       s || (v?.(p), e?.toggle());
     },
     [e, s, v]
   ), w = d(
     () => ({
-      children: /* @__PURE__ */ N(O, { children: [
+      children: /* @__PURE__ */ O(j, { children: [
         y && !s && /* @__PURE__ */ n("span", { className: t.prepend, children: y }),
         !!s && /* @__PURE__ */ n(
-          A,
+          K,
           {
             className: t.spinner,
             id: i,
             screenreaderText: s === !0 ? "Loading" : s
           }
         ),
-        l ? /* @__PURE__ */ n(Z, { name: l }) : r,
+        l ? /* @__PURE__ */ n($, { name: l }) : r,
         c && /* @__PURE__ */ n("span", { className: t.append, children: c })
       ] }),
-      className: U(
+      className: X(
         x,
         b.FormElement,
         b.FormElementInner,
         t.root,
-        Q(h),
+        U(h),
         b.Button
       ),
       onClick: C
@@ -536,14 +542,14 @@ const I = {}, oo = [
       t.spinner
     ]
   );
-  T(G, () => m.current);
+  A(P, () => m.current);
   const H = d(
     () => u ?? (a.href ? "a" : "button"),
     [u, a.href]
   );
   if (l && r) {
     const p = String(r);
-    return /* @__PURE__ */ n($, { tooltipText: p, children: /* @__PURE__ */ n(
+    return /* @__PURE__ */ n(oo, { tooltipText: p, children: /* @__PURE__ */ n(
       H,
       {
         "aria-label": p,
@@ -567,9 +573,9 @@ const I = {}, oo = [
       ref: m
     }
   );
-}, ao = j(no);
-ao.displayName = "IressButton";
+}, lo = M(ao);
+lo.displayName = "IressButton";
 export {
-  ao as I,
-  co as b
+  lo as I,
+  no as b
 };

package/dist/components/Alert/Alert.d.ts

@@ -1,8 +1,8 @@
 import { IressIconProps } from '../Icon';
 import { IressTextProps } from '../Text';
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 import { Statuses } from '../../types';
-import { IressButtonProps, IressCloseButtonProps } from '../Button';
+import { IressButtonProps } from '../Button';
 export interface IressAlertButtonProps extends Omit<IressButtonProps, 'mode' | 'status'> {
     mode?: 'secondary' | 'tertiary';
 }
@@ -19,11 +19,15 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
     /**
      * If true, the alert will be dismissed and unrendered from the DOM. Use for uncontrolled dismissal of the alert, where the component manages its own dismissed state internally.
      **/
-    defaultDismissed?: boolean;
+    defaultClosed?: boolean;
     /**
      * If true, the alert will be dismissed and unrendered from the DOM. Use for controlled dismissal of the alert, where the parent component manages the dismissed state and passes it down via this prop.
      **/
-    dismissed?: boolean;
+    closed?: boolean;
+    /**
+     * Optional override for the default close button label "Close".
+     */
+    closeLabel?: string;
     /**
      * Buttons and controls for the alert.
      * @deprecated Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.
@@ -48,12 +52,12 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
      * If set to `false`, no icon will be displayed.
      * If not provided, the icon will be determined by the `status` prop.
      **/
-    onDismiss?: IressCloseButtonProps['onClick'];
+    onClose?: (e?: MouseEvent<HTMLButtonElement>) => void;
     /**
      * Alert type - danger, info, success or warning.
      * @default info
      */
-    status?: Statuses;
+    status?: Statuses | 'neutral';
     /**
      * Variants of the alert, allowing it to be styled differently based on where its used in the application.
      * - Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
@@ -62,6 +66,6 @@ export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
     variant?: 'sidebar' | 'full-width';
 }
 export declare const IressAlert: {
-    ({ actions, children, className, defaultDismissed, dismissed: dismissedProp, footer, heading, icon: iconProp, multiLine, onDismiss, status, variant, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    ({ actions, children, className, defaultClosed, closed: closedProp, closeLabel, footer, heading, icon: iconProp, multiLine, onClose, status, variant, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/dist/components/Alert/Alert.js

@@ -1,94 +1,96 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { useMemo as E, createElement as V } from "react";
-import { IressIcon as _ } from "../Icon/Icon.js";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useMemo as V, createElement as _ } from "react";
+import { IressIcon as F } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
 import "../Icon/IconProvider.js";
 import { IressText as u } from "../Text/Text.js";
 import { propagateTestid as I } from "../../helpers/utility/propagateTestid.js";
-import { alert as A } from "./Alert.styles.js";
-import { c as F } from "../../css-DVJ-ALYD.js";
-import { c as C } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as G } from "../../enums.js";
-import { I as M } from "../../Button-DNFXX5JD.js";
-import { IressCloseButton as O } from "../Button/CloseButton/CloseButton.js";
-import { useControlledState as R } from "../../hooks/useControlledState.js";
-import { s as $ } from "../../is-valid-prop-C5D641yn.js";
-const q = {
+import { alert as x } from "./Alert.styles.js";
+import { c as G } from "../../css-DVJ-ALYD.js";
+import { c as A } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as M } from "../../enums.js";
+import { I as O } from "../../Button-BFMrbk9D.js";
+import { IressCloseButton as R } from "../Button/CloseButton/CloseButton.js";
+import { useControlledState as $ } from "../../hooks/useControlledState.js";
+import { s as q } from "../../is-valid-prop-C5D641yn.js";
+const z = {
   danger: "cancel",
   info: "info",
   success: "check_circle",
-  warning: "error"
-}, z = ({
+  warning: "error",
+  neutral: "info"
+}, D = ({
   actions: n,
-  children: x,
-  className: y,
-  defaultDismissed: g,
-  dismissed: S,
+  children: y,
+  className: C,
+  defaultClosed: g,
+  closed: S,
+  closeLabel: T,
   footer: d,
   heading: t,
-  icon: l,
+  icon: c,
   multiLine: p = !1,
-  onDismiss: f,
+  onClose: f,
   status: s = "info",
   variant: a,
-  ...m
+  ...i
 }) => {
-  const b = !!f, N = !!n?.length, c = !!d || N, e = A({ hasFooter: c, multiLine: p, status: s, variant: a }), v = A.raw({ hasFooter: c, multiLine: p, status: s, variant: a }), [T, k] = $(m), { value: w, setValue: j } = R({
+  const b = !!f, N = !!n?.length, m = !!d || N, e = x({ hasFooter: m, multiLine: p, status: s, variant: a }), v = x.raw({ hasFooter: m, multiLine: p, status: s, variant: a }), [k, w] = q(i), { value: j, setValue: B } = $({
     component: "IressAlert",
     defaultValue: g,
-    propName: "dismissed",
+    propName: "closed",
     value: S
-  }), h = E(() => {
-    if (l === !1)
+  }), h = V(() => {
+    if (c === !1)
       return null;
-    const r = l ?? q[s];
+    const r = c ?? z[s];
     return /* @__PURE__ */ o(
-      _,
+      F,
       {
         name: r,
         screenreaderText: `${s}: `,
         className: e.icon
       }
     );
-  }, [e.icon, l, s]);
-  return w ? null : /* @__PURE__ */ i(
+  }, [e.icon, c, s]);
+  return j ? null : /* @__PURE__ */ l(
     u,
     {
-      className: C(
-        y,
-        F(v.alert, T),
-        G.Alert
+      className: A(
+        C,
+        G(v.alert, k),
+        M.Alert
       ),
-      ...k,
+      ...w,
       children: [
         a !== "sidebar" && h,
-        /* @__PURE__ */ i("div", { className: e.wrapper, children: [
+        /* @__PURE__ */ l("div", { className: e.wrapper, children: [
           t && /* @__PURE__ */ o(
             "div",
             {
               className: e.heading,
-              "data-testid": I(m["data-testid"], "heading"),
-              children: typeof t == "string" ? /* @__PURE__ */ i(u, { element: "h2", className: e.heading, children: [
+              "data-testid": I(i["data-testid"], "heading"),
+              children: typeof t == "string" ? /* @__PURE__ */ l(u, { element: "h2", className: e.heading, children: [
                 a === "sidebar" && h,
                 " ",
                 t
               ] }) : t
             }
           ),
-          /* @__PURE__ */ o("div", { className: e.children, children: x }),
-          c && /* @__PURE__ */ i(
+          /* @__PURE__ */ o("div", { className: e.children, children: y }),
+          m && /* @__PURE__ */ l(
             "div",
             {
               className: e.footer,
-              "data-testid": I(m["data-testid"], "footer"),
+              "data-testid": I(i["data-testid"], "footer"),
               children: [
-                N && /* @__PURE__ */ o("div", { className: e.footerActions, children: n?.map((r, B) => /* @__PURE__ */ V(
-                  M,
+                N && /* @__PURE__ */ o("div", { className: e.footerActions, children: n?.map((r, E) => /* @__PURE__ */ _(
+                  O,
                   {
                     ...r,
-                    className: C(r.className, e.action),
+                    className: A(r.className, e.action),
                     status: s,
-                    key: B
+                    key: E
                   }
                 )) }),
                 d
@@ -97,19 +99,20 @@ const q = {
           )
         ] }),
         b && /* @__PURE__ */ o(
-          O,
+          R,
           {
             className: e.dismiss,
             onClick: (r) => {
-              f?.(r), j(!0);
-            }
+              f?.(r), B(!0);
+            },
+            screenreaderText: T
           }
         )
       ]
     }
   );
 };
-z.displayName = "IressAlert";
+D.displayName = "IressAlert";
 export {
-  z as IressAlert
+  D as IressAlert
 };

package/dist/components/Alert/Alert.styles.d.ts

@@ -173,6 +173,48 @@ export declare const alert: import('../../styled-system/types').SlotRecipeRuntim
                 };
             };
         };
+        neutral: {
+            alert: {
+                backgroundColor: "colour.neutral.20";
+                color: "colour.neutral.90";
+                borderColor: "colour.neutral.90";
+            };
+            heading: {
+                color: "colour.neutral.90";
+            };
+            children: {
+                color: "colour.neutral.90";
+            };
+            icon: {
+                color: "colour.neutral.90";
+            };
+            dismiss: {
+                color: "colour.neutral.90";
+                _hover: {
+                    bg: "colour.neutral.30";
+                    borderColor: "colour.neutral.30";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.neutral.70";
+                    borderColor: "colour.neutral.70";
+                    color: "colour.neutral.20";
+                    _hover: {
+                        bg: "colour.neutral.80";
+                        borderColor: "colour.neutral.80";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colour.neutral.70}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+                '&.button__root--mode_tertiary': {
+                    _hover: {
+                        bg: "colour.neutral.30";
+                    };
+                };
+            };
+        };
     };
     variant: {
         sidebar: {

package/dist/components/Alert/Alert.styles.js

@@ -74,7 +74,8 @@ const e = o({
     },
     dismiss: {
       marginLeft: "auto",
-      my: "-spacing.2"
+      my: "-spacing.2",
+      mr: "-spacing.1"
     }
   },
   variants: {
@@ -251,6 +252,48 @@ const e = o({
             }
           }
         }
+      },
+      neutral: {
+        alert: {
+          backgroundColor: "colour.neutral.20",
+          color: "colour.neutral.90",
+          borderColor: "colour.neutral.90"
+        },
+        heading: {
+          color: "colour.neutral.90"
+        },
+        children: {
+          color: "colour.neutral.90"
+        },
+        icon: {
+          color: "colour.neutral.90"
+        },
+        dismiss: {
+          color: "colour.neutral.90",
+          _hover: {
+            bg: "colour.neutral.30",
+            borderColor: "colour.neutral.30"
+          }
+        },
+        action: {
+          "&.button__root--mode_secondary": {
+            bg: "colour.neutral.70",
+            borderColor: "colour.neutral.70",
+            color: "colour.neutral.20",
+            _hover: {
+              bg: "colour.neutral.80",
+              borderColor: "colour.neutral.80"
+            },
+            _active: {
+              boxShadow: "color-mix(in srgb, {colour.neutral.70}, transparent 80%) 0px 0px 0px 3px"
+            }
+          },
+          "&.button__root--mode_tertiary": {
+            _hover: {
+              bg: "colour.neutral.30"
+            }
+          }
+        }
       }
     },
     variant: {

package/dist/components/Autocomplete/components/AutocompleteInstructions.js

@@ -1,6 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
 import { IressPanel as s } from "../../Panel/Panel.js";
-import "../../Panel/Panel.styles.js";
 const e = ({
   minSearchLength: t
 }) => {

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

@@ -24,7 +24,7 @@ export interface AutocompleteSearchHookProps {
     /**
      * Options data set, shown when the input is not empty.
      */
-    options?: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
+    options: LabelValueMeta[] | ((query: string) => Promise<LabelValueMeta[]>);
     /**
      * The query value to filter items by and create search results.
      */

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

@@ -33,6 +33,10 @@ export interface InternalButtonProps<C extends ElementType | undefined = undefin
      * 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.

package/dist/components/Button/Button.js

@@ -9,7 +9,7 @@ import "../ButtonGroup/hooks/useButtonGroupItem.js";
 import "../../is-valid-prop-C5D641yn.js";
 import "../../css-DVJ-ALYD.js";
 import "../../cx-DN21T1EH.js";
-import { I as q } from "../../Button-DNFXX5JD.js";
+import { I as q } from "../../Button-BFMrbk9D.js";
 import "../Popover/Popover.js";
 import "../Popover/Popover.styles.js";
 import "../Popover/InputPopover/InputPopover.js";

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

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { I as m } from "../../../Button-DNFXX5JD.js";
+import { I as m } from "../../../Button-BFMrbk9D.js";
 import { forwardRef as a } from "react";
 import { c as l } from "../../../cx-DN21T1EH.js";
 import { GlobalCSSClass as i } from "../../../enums.js";
@@ -7,16 +7,17 @@ const f = a(
   ({
     className: o,
     screenreaderText: s = "Close button",
-    ...t
-  }, r) => /* @__PURE__ */ e(
+    ...r
+  }, t) => /* @__PURE__ */ e(
     m,
     {
-      ...t,
+      borderRadius: "50%",
+      ...r,
       "aria-label": s,
       className: l(o, i.CloseButton),
       mode: "muted",
       icon: "close",
-      ref: r
+      ref: t
     }
   )
 );

package/dist/components/Button/index.js

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