@iress-oss/ids-components 6.0.0-alpha.49 → 6.0.0-alpha.50

package/.ai/guides/migration-guides-v6.md

@@ -422,7 +422,8 @@ New component for rendering a standalone radio mark indicator (similar to `Iress
 | `defaultValue`/`onChange`/`value`      | Type-aware based on `multiSelect` — arrays when `true`, single value when `false`                                           |
 | `value`/`defaultValue` accepts strings | Now also accepts a plain string or `FormControlValue` that resolves to the matching option automatically                    |
 | New `multiSelectLimit` prop            | Limits visible selected tags before collapsing to "+N more" summary (default `5`). Display only — does not limit selections |
-| New `native` prop                      | Renders a browser-native select (replaces the old `IressSelect`). Note: still passes `LabelValueMeta` as the value          |
+| New `native` prop                      | Renders a browser-native select (replaces the old `IressSelect`)                                                             |
+| `onChange` signature                   | `onChange(event, value, labelValue)` — `value` is the primitive (`FormControlValue`), `labelValue` is the full `LabelValueMeta` |
 | Grouped items                          | Now supported                                                                                                               |
 | New hover and focus states             | —                                                                                                                           |
 

package/dist/{Autocomplete-C1SPFcaX.js → Autocomplete-B8Ac_bPk.js}

@@ -1,10 +1,10 @@
-import { jsx as l, jsxs as O, Fragment as ge } from "react/jsx-runtime";
+import { jsx as c, jsxs as O, Fragment as ge } from "react/jsx-runtime";
 import { c as x } from "./cx-DN21T1EH.js";
 import { autoComplete as Ee } from "./components/Autocomplete/Autocomplete.styles.js";
 import { IressPopover as Me } from "./components/Popover/Popover.js";
 import "./components/Popover/Popover.styles.js";
 import { IressInputPopover as je } from "./components/Popover/InputPopover/InputPopover.js";
-import { forwardRef as Se, useState as $, useMemo as fe, useEffect as z, useRef as ce, useImperativeHandle as Pe, useCallback as ke } from "react";
+import { forwardRef as Se, useState as $, useMemo as fe, useEffect as z, useRef as le, useImperativeHandle as Pe, useCallback as ke } from "react";
 import "./components/Popover/hooks/useFloatingPopover.js";
 import { IressInput as Ke } from "./components/Input/Input.js";
 import "./components/Input/Input.styles.js";
@@ -30,7 +30,7 @@ import { IressReadonly as Ie } from "./components/Readonly/Readonly.js";
 import "./components/Readonly/Readonly.styles.js";
 import { IressAlert as Je } from "./components/Alert/Alert.js";
 import "./components/Alert/Alert.styles.js";
-import { GlobalCSSClass as le } from "./enums.js";
+import { GlobalCSSClass as ce } from "./enums.js";
 import { SelectActivator as Ue } from "./components/Select/components/SelectActivator.js";
 import { SelectOptions as We } from "./components/Select/components/SelectOptions.js";
 import { SelectHiddenInput as Xe } from "./components/Select/components/SelectHiddenInput.js";
@@ -69,17 +69,17 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
   disabled: p,
   footer: J,
   header: R,
-  id: P,
+  id: k,
   matchActivatorWidth: U = !0,
   multiSelect: y,
-  multiSelectLimit: k,
-  name: K,
+  multiSelectLimit: K,
+  name: Q,
   onChange: L,
   onBlur: I,
   options: n,
   native: d,
   placeholder: T,
-  readOnly: Q,
+  readOnly: q,
   renderHiddenInput: W,
   renderLabel: X,
   renderOptions: Y,
@@ -112,7 +112,7 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
     defaultValue: te,
     multiple: y,
     value: E
-  }), g = ce(null), S = ce(null), u = ce(null), { value: N } = Ze(
+  }), g = le(null), S = le(null), u = le(null), { value: N } = Ze(
     typeof d == "string" ? { xs: !0, [d]: !1 } : { xs: d },
     {
       disabled: !d
@@ -120,11 +120,11 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
   ), {
     append: oe,
     debounceThreshold: ne,
-    initialOptions: q,
-    minSearchLength: B,
-    onActivated: H,
+    initialOptions: B,
+    minSearchLength: H,
+    onActivated: G,
     onDeactivated: D,
-    prepend: c,
+    prepend: l,
     selectedOptionsText: m,
     ...j
   } = ee, {
@@ -138,8 +138,8 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
   } = ye({
     debounceThreshold: ne,
     disabled: !t || !!N,
-    initialOptions: q,
-    minSearchLength: B,
+    initialOptions: B,
+    minSearchLength: H,
     options: n,
     query: v
   });
@@ -159,23 +159,23 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
     focus: () => u.current?.focus(),
     blur: () => u.current?.blur()
   }, [N]), z(() => {
-    t ? H?.() : D?.();
-  }, [H, D, t]);
+    t ? G?.() : D?.();
+  }, [G, D, t]);
   const xe = ke(
     (V) => {
       if (!I) return;
-      const G = V.currentTarget, me = V.relatedTarget;
-      !t && (!me || !G.contains(me)) && I(V), V.stopPropagation();
+      const P = V.currentTarget, me = V.relatedTarget;
+      !t && (!me || !P.contains(me)) && I(V), V.stopPropagation();
     },
     [I, t]
   );
-  if (Q)
-    return /* @__PURE__ */ l(
+  if (q)
+    return /* @__PURE__ */ c(
       Ie,
       {
         value: f(),
         ref: u,
-        variant: Q,
+        variant: q,
         children: re(", ")
       }
     );
@@ -188,17 +188,21 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
       throw new Error(
         "[IressSelect] The native select does not support multiple selection. Please remove the multiSelect prop or use the non-native select."
       );
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ c(
       _e,
       {
-        className: x(r, le.Select),
+        className: x(r, ce.Select),
         "data-testid": j["data-testid"],
         disabled: p,
-        id: P,
-        name: K,
-        onChange: (V, G) => {
-          L?.(V, G), M(
-            G
+        id: k,
+        name: Q,
+        onChange: (V, P) => {
+          L?.(
+            V,
+            P?.value ?? null,
+            P
+          ), M(
+            P
           );
         },
         options: n,
@@ -216,12 +220,12 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
     a(!1), Ne();
   };
   return /* @__PURE__ */ O(ge, { children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       Xe,
       {
         "data-testid": j["data-testid"],
         getValuesString: f,
-        name: K,
+        name: Q,
         renderHiddenInput: W,
         required: Z,
         value: i,
@@ -229,24 +233,24 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
         ref: u
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       Me,
       {
         ...j,
-        activator: /* @__PURE__ */ l(
+        activator: /* @__PURE__ */ c(
           Ue,
           {
             append: oe,
             async: se,
             disabled: p,
             error: ue,
-            id: P,
+            id: k,
             loading: pe,
             multiSelect: y,
-            multiSelectLimit: k,
+            multiSelectLimit: K,
             onChange: L,
             placeholder: T,
-            prepend: c,
+            prepend: l,
             renderLabel: X,
             selectedOptionsText: m,
             setValue: M,
@@ -256,7 +260,7 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
           }
         ),
         align: e,
-        className: x(r, ae.root, le.Select),
+        className: x(r, ae.root, ce.Select),
         contentClassName: x(ae.popoverContent),
         contentStyle: {
           ...j.contentStyle,
@@ -272,15 +276,15 @@ const we = (e) => typeof e == "object" && e !== null && "label" in e, ie = (e, o
         onBlur: xe,
         children: /* @__PURE__ */ O("div", { className: ae.wrapper, children: [
           R,
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ c(
             We,
             {
               autoHighlight: o,
               debouncedQuery: Ae,
               error: ue,
-              initialOptions: q,
+              initialOptions: B,
               loading: pe,
-              minSearchLength: B,
+              minSearchLength: H,
               multiSelect: y,
               onChange: L,
               options: n,
@@ -306,23 +310,23 @@ rt.displayName = "IressSelect";
 const ot = Se(
   ({
     alwaysShowOnFocus: e,
-    append: o = /* @__PURE__ */ l(Ge, { name: "search" }),
+    append: o = /* @__PURE__ */ c(Ge, { name: "search" }),
     autoComplete: r = "off",
     autoSelect: s = !0,
     className: p,
     clearable: J = !0,
     "data-testid": R,
-    debounceThreshold: P,
+    debounceThreshold: k,
     defaultValue: U,
-    errorText: y = /* @__PURE__ */ l(Je, { status: "danger", mb: "none", borderRadius: "radius.system.form", children: "An unknown error occurred. Please contact support if the error persists." }),
-    initialOptions: k,
-    limitDesktop: K = 12,
+    errorText: y = /* @__PURE__ */ c(Je, { status: "danger", mb: "none", borderRadius: "radius.system.form", children: "An unknown error occurred. Please contact support if the error persists." }),
+    initialOptions: K,
+    limitDesktop: Q = 12,
     limitMobile: L = 6,
     minSearchLength: I,
     noResultsText: n,
     onChange: d,
     onClear: T,
-    onFocus: Q,
+    onFocus: q,
     options: W,
     popoverProps: {
       autoHighlight: X = !1,
@@ -349,8 +353,8 @@ const ot = Se(
       shouldShowInstructions: S,
       shouldShowNoResults: u
     } = ye({
-      debounceThreshold: P,
-      initialOptions: k,
+      debounceThreshold: k,
+      initialOptions: K,
       minSearchLength: I,
       options: W,
       query: He(a)
@@ -360,24 +364,24 @@ const ot = Se(
     }, [f.length, w, v, a]), z(() => {
       i && t(!0);
     }, [i]), h)
-      return /* @__PURE__ */ l(Ie, { value: a, variant: h });
-    const N = (c, m) => {
-      d?.(c, m), A(m), C(!!m);
-    }, oe = (c) => {
-      T?.(c), A("");
-    }, ne = (c) => {
-      Q?.(c), k?.length && t(!0);
-    }, q = (c) => {
-      const m = qe(c)?.[0];
+      return /* @__PURE__ */ c(Ie, { value: a, variant: h });
+    const N = (l, m) => {
+      d?.(l, m), A(m), C(!!m);
+    }, oe = (l) => {
+      T?.(l), A("");
+    }, ne = (l) => {
+      q?.(l), K?.length && t(!0);
+    }, B = (l) => {
+      const m = qe(l)?.[0];
       d?.(
         Be(m?.label),
         m?.label,
         m
       ), A(m?.label), t(!1), C(!1);
-    }, B = () => {
+    }, H = () => {
       (!e || !a) && g(), E(), t(!1), a && C(!1);
-    }, H = (c) => {
-      F.onKeyDown?.(c), c.key === "ArrowDown" && (!w || !v) && (f.length || re(!0), C(!0), t(!0));
+    }, G = (l) => {
+      F.onKeyDown?.(l), l.key === "ArrowDown" && (!w || !v) && (f.length || re(!0), C(!0), t(!0));
     }, D = Ee({
       isEmpty: f.length === 0 && !i && !S && !u
     });
@@ -385,7 +389,7 @@ const ot = Se(
       je,
       {
         ...b,
-        activator: /* @__PURE__ */ l(
+        activator: /* @__PURE__ */ c(
           Ke,
           {
             ...F,
@@ -397,7 +401,7 @@ const ot = Se(
             onChange: N,
             onClear: oe,
             onFocus: ne,
-            onKeyDown: H,
+            onKeyDown: G,
             value: a,
             ref: ee
           }
@@ -407,7 +411,7 @@ const ot = Se(
           p,
           b.className,
           D.root,
-          le.Autocomplete
+          ce.Autocomplete
         ),
         contentClassName: x(
           b.contentClassName,
@@ -417,30 +421,30 @@ const ot = Se(
         "data-testid": R,
         minLength: 0,
         onActivated: () => (v || e) && t(!0),
-        onDeactivated: B,
+        onDeactivated: H,
         show: w,
         type: "listbox",
         focusStartIndex: 0,
         children: [
           f.length > 0 && /* @__PURE__ */ O(ge, { children: [
             Z,
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ c(
               ze,
               {
                 changeOnBlur: s,
                 className: x(D.optionList),
                 "data-testid": de(R, "menu"),
                 items: f,
-                limitDesktop: K,
+                limitDesktop: Q,
                 limitMobile: L,
-                onChange: q,
+                onChange: B,
                 selected: { label: te }
               }
             ),
             Y
           ] }),
           i && y,
-          S && !i && /* @__PURE__ */ l(Oe, { minSearchLength: I ?? 1 }),
+          S && !i && /* @__PURE__ */ c(Oe, { minSearchLength: I ?? 1 }),
           u && !i && n
         ]
       }

package/dist/{TableBody-DnTSsbYF.js → TableBody-r9poBt3c.js}

@@ -28,7 +28,7 @@ import "./components/Icon/Icon.styles.js";
 import "./components/Icon/IconProvider.js";
 import "./components/Alert/Alert.js";
 import "./components/Alert/Alert.styles.js";
-import "./Autocomplete-C1SPFcaX.js";
+import "./Autocomplete-B8Ac_bPk.js";
 import "./components/Autocomplete/Autocomplete.styles.js";
 import "./highlightQueryInLabel-Cx7nIoII.js";
 import "./components/ButtonGroup/ButtonGroup.js";

package/dist/components/Autocomplete/Autocomplete.js

@@ -16,7 +16,7 @@ import "../../helpers/form/getFormControlValueAsStringIfDefined.js";
 import "./hooks/useAutocompleteSearch.js";
 import "../Icon/Icon.js";
 import "./components/AutocompleteInstructions.js";
-import { I as J } from "../../Autocomplete-C1SPFcaX.js";
+import { I as J } from "../../Autocomplete-B8Ac_bPk.js";
 import "../Select/SelectBody/SelectBody.js";
 import "../Select/SelectCreate/SelectCreate.js";
 import "../Select/SelectHeading/SelectHeading.js";

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import { I as t } from "../../Autocomplete-C1SPFcaX.js";
+import { I as t } from "../../Autocomplete-B8Ac_bPk.js";
 import { autoComplete as m } from "./Autocomplete.styles.js";
 import { useAutocompleteSearch as s } from "./hooks/useAutocompleteSearch.js";
 export {

package/dist/components/Hide/helpers/normaliseHideValues.js

@@ -1,4 +1,4 @@
-import { B as t } from "../../../Icon.constants-CITIz_Fu.js";
+import { BREAKPOINTS as t } from "../../../constants.js";
 const m = (o = {}) => typeof o == "boolean" ? Object.fromEntries(
   t.map((r) => [r, o])
 ) : t.reduce(

package/dist/components/Icon/Icon.constants.d.ts

@@ -1 +1 @@
-export { MATERIAL_SYMBOLS } from '../../../../theme-preset/src/constants';
+export { MATERIAL_SYMBOLS } from '../../constants';

package/dist/components/Icon/Icon.constants.js

@@ -1,4 +1,4 @@
-import { M as r } from "../../Icon.constants-CITIz_Fu.js";
+import { MATERIAL_SYMBOLS as A } from "../../constants.js";
 export {
-  r as MATERIAL_SYMBOLS
+  A as MATERIAL_SYMBOLS
 };

package/dist/components/Icon/IconProvider.js

@@ -2,7 +2,7 @@ import { jsxs as I, jsx as p } from "react/jsx-runtime";
 import { createContext as h, useState as w, useCallback as x } from "react";
 import { FontLoader as y } from "./components/FontLoader.js";
 import { useDynamicFontSubsetting as L } from "./hooks/useDynamicFontSubsetting.js";
-import { M as s } from "../../Icon.constants-CITIz_Fu.js";
+import { MATERIAL_SYMBOLS as s } from "../../constants.js";
 const F = h(null), $ = ({
   children: n,
   container: i,

package/dist/components/Icon/index.js

@@ -1,10 +1,10 @@
 import { IressIcon as e } from "./Icon.js";
-import { M as I } from "../../Icon.constants-CITIz_Fu.js";
-import { icon as m } from "./Icon.styles.js";
+import { MATERIAL_SYMBOLS as f } from "../../constants.js";
+import { icon as p } from "./Icon.styles.js";
 import { IressIconProvider as t } from "./IconProvider.js";
 export {
   e as IressIcon,
   t as IressIconProvider,
-  I as MATERIAL_SYMBOLS,
-  m as icon
+  f as MATERIAL_SYMBOLS,
+  p as icon
 };

package/dist/components/Select/Select.d.ts

@@ -13,12 +13,12 @@ import { NativeSelectProps } from './components/NativeSelect';
 type SelectValue<TMultiple extends boolean = false, TNative extends boolean | Breakpoints = false> = TNative extends false ? ControlledValue<LabelValueMeta, TMultiple> | ControlledValue<FormControlValue, TMultiple> : LabelValueMeta | FormControlValue;
 type SelectChangeEvent<TMultiple extends boolean = false, TNative extends boolean | Breakpoints = false> = TNative extends false ? (e: ChangeEvent<HTMLElement> & {
     currentTarget: {
-        value?: SelectValue<TMultiple, TNative>;
+        value?: ControlledValue<FormControlValue, TMultiple>;
     };
     target: {
-        value?: SelectValue<TMultiple, TNative>;
+        value?: ControlledValue<FormControlValue, TMultiple>;
     };
-}, value?: SelectValue<TMultiple, TNative>) => void : (e: ChangeEvent<HTMLSelectElement>, value?: SelectValue<TMultiple, TNative>) => void;
+}, value?: ControlledValue<FormControlValue, TMultiple>, labelValue?: ControlledValue<LabelValueMeta, TMultiple>) => void : (e: ChangeEvent<HTMLSelectElement>, value?: ControlledValue<FormControlValue, TMultiple>, labelValue?: ControlledValue<LabelValueMeta, TMultiple>) => void;
 export type SelectRef<TNative extends boolean | Breakpoints = false> = TNative extends false ? Partial<PopoverRef> & ReactHookFormCompatibleRef : ReactHookFormCompatibleRef<HTMLSelectElement>;
 type SelectProps<TNative extends boolean | Breakpoints = false> = TNative extends false ? Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'onChange' | 'matchActivatorWidth' | 'show' | 'width'> & Omit<AutocompleteSearchHookProps, 'disabled' | 'query'> & Pick<IressSelectActivatorProps, 'append' | 'prepend' | 'selectedOptionsText'> : Omit<NativeSelectProps, 'value' | 'onChange' | 'options'>;
 export type IressSelectProps<TMultiple extends boolean = false, TNative extends boolean | Breakpoints = false> = SelectProps<TNative> & {

package/dist/components/Select/Select.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../cx-DN21T1EH.js";
 import "./Select.styles.js";
-import { a as u } from "../../Autocomplete-C1SPFcaX.js";
+import { a as u } from "../../Autocomplete-B8Ac_bPk.js";
 import "../Autocomplete/Autocomplete.styles.js";
 import "../Autocomplete/hooks/useAutocompleteSearch.js";
 import "./components/SelectActivator.js";

package/dist/components/Select/components/SelectActivator.js

@@ -1,71 +1,76 @@
-import { jsx as b } from "react/jsx-runtime";
-import { toArray as p } from "../../../helpers/formatting/toArray.js";
-import { IressSelectLabel as v } from "../SelectLabel/SelectLabel.js";
-import { IressSelectTags as w } from "../SelectTags/SelectTags.js";
-import { getValueAsEvent as g } from "../../../helpers/form/getValueAsEvent.js";
-const E = ({
-  append: l,
-  async: S,
-  id: c,
-  disabled: i,
-  error: u,
+import { jsx as v } from "react/jsx-runtime";
+import { toArray as j } from "../../../helpers/formatting/toArray.js";
+import { IressSelectLabel as w } from "../SelectLabel/SelectLabel.js";
+import { IressSelectTags as E } from "../SelectTags/SelectTags.js";
+import { getValueAsEvent as b } from "../../../helpers/form/getValueAsEvent.js";
+import { toPrimitiveValue as g } from "../helpers/toPrimitiveValue.js";
+const N = ({
+  append: i,
+  async: u,
+  id: l,
+  disabled: m,
+  error: S,
   loading: x,
   multiSelect: y,
   multiSelectLimit: D,
-  onChange: m,
-  placeholder: f,
-  prepend: s,
+  onChange: c,
+  placeholder: s,
+  prepend: f,
   renderLabel: n,
   selectedOptionsText: A,
   setShow: a,
-  setValue: r,
+  setValue: e,
   show: I,
-  value: t
+  value: r
 }) => n ? n({
   close: () => a(!1),
-  disabled: i,
-  error: u,
+  disabled: m,
+  error: S,
   loading: x,
-  setValue: r,
+  setValue: e,
   show: I,
-  value: t
-}) : y ? /* @__PURE__ */ b(
-  w,
+  value: r
+}) : y ? /* @__PURE__ */ v(
+  E,
   {
-    append: l,
-    id: c,
+    append: i,
+    id: l,
     limit: D,
-    onDelete: (o) => {
-      if (!o) return;
-      const e = p(t).filter(
-        (j) => j.label !== o.label
+    onDelete: (t) => {
+      if (!t) return;
+      const o = j(r).filter(
+        (V) => V.label !== t.label
       );
-      r(e), m?.(g(e), e);
+      e(o);
+      const p = g(o);
+      c?.(b(p), p, o);
     },
     onDeleteAll: () => {
-      const o = [];
-      r(o), m?.(g([]), o);
+      const t = [];
+      e(t);
+      const o = g(t);
+      c?.(b(o), o, t);
     },
     onToggleActions: () => a(!1),
-    placeholder: f,
-    prepend: s,
-    selected: t,
+    placeholder: s,
+    prepend: f,
+    selected: r,
     selectedOptionsText: A
   }
-) : /* @__PURE__ */ b(
-  v,
+) : /* @__PURE__ */ v(
+  w,
   {
-    append: l,
-    id: c,
-    disabled: i,
-    placeholder: f,
-    prepend: s,
-    role: S ? void 0 : "combobox",
-    selected: t,
+    append: i,
+    id: l,
+    disabled: m,
+    placeholder: s,
+    prepend: f,
+    role: u ? void 0 : "combobox",
+    selected: r,
     selectedOptionsText: A
   }
 );
-E.displayName = "SelectActivator";
+N.displayName = "SelectActivator";
 export {
-  E as SelectActivator
+  N as SelectActivator
 };