@iress-oss/ids-components 6.0.0-alpha.4 → 6.0.0-alpha.6

package/dist/{Provider-8wS70V56.js → Provider-BPeo5YfI.js}

@@ -10,7 +10,7 @@ import "./components/Toaster/hooks/useToaster.js";
 import "./components/Toaster/Toaster.styles.js";
 import "./components/Toaster/components/Toast/Toast.styles.js";
 import "./components/Slideout/Slideout.styles.js";
-import "./index-CZ9ot38T.js";
+import "./index-aTLA1VIV.js";
 import "./components/Slideout/hooks/useSlideout.js";
 import { IressSlideoutProvider as d } from "./components/Slideout/SlideoutProvider.js";
 import { createPortal as y } from "react-dom";

package/dist/components/Field/Field.styles.js

@@ -35,7 +35,11 @@ const o = e({
       mb: "spacing.1"
     },
     labelContainer: {},
-    fieldContainer: {}
+    fieldContainer: {
+      "& .ids-popover__content": {
+        zIndex: "100"
+      }
+    }
   },
   variants: {
     horizontal: {

package/dist/components/Input/Input.styles.js

@@ -1,5 +1,5 @@
 import { s as r } from "../../sva-OmxClA9g.js";
-const o = r({
+const t = r({
   slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
   base: {
     wrapper: {
@@ -49,7 +49,8 @@ const o = r({
     formControl: {
       borderWidth: 0,
       borderRadius: "radius.system.form",
-      padding: "spacing.2",
+      paddingInline: "spacing.2",
+      paddingBlock: "spacing.1",
       backgroundColor: "colour.neutral.10",
       textStyle: "typography.body.md",
       color: "colour.neutral.80",
@@ -204,5 +205,5 @@ const o = r({
   defaultVariants: {}
 });
 export {
-  o as input
+  t as input
 };

package/dist/components/Progress/Progress.js

@@ -6,7 +6,7 @@ import { progress as y } from "./Progress.styles.js";
 import { s as n } from "../../factory-oPXoMw9H.js";
 import { s as b } from "../../is-valid-prop-Ce0wiweq.js";
 import { GlobalCSSClass as x } from "../../enums.js";
-import { t as C } from "../../index-CZ9ot38T.js";
+import { t as C } from "../../index-aTLA1VIV.js";
 const V = ({
   borderRadius: e,
   className: p,

package/dist/components/Provider/Provider.js

@@ -10,11 +10,11 @@ import "../Toaster/hooks/useToaster.js";
 import "../Toaster/Toaster.styles.js";
 import "../Toaster/components/Toast/Toast.styles.js";
 import "../Slideout/Slideout.styles.js";
-import "../../index-CZ9ot38T.js";
+import "../../index-aTLA1VIV.js";
 import "../Slideout/hooks/useSlideout.js";
 import "../Slideout/SlideoutProvider.js";
 import "react-dom";
-import { I as h } from "../../Provider-8wS70V56.js";
+import { I as h } from "../../Provider-BPeo5YfI.js";
 export {
   h as IressProvider
 };

package/dist/components/Provider/index.js

@@ -1,4 +1,4 @@
-import { I as o } from "../../Provider-8wS70V56.js";
+import { I as o } from "../../Provider-BPeo5YfI.js";
 export {
   o as IressProvider
 };

package/dist/components/RichSelect/components/SelectOptions.js

@@ -1,9 +1,9 @@
-import { jsx as s, jsxs as F, Fragment as W } from "react/jsx-runtime";
-import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
+import { jsx as s, jsxs as y, Fragment as W } from "react/jsx-runtime";
+import { getValueAsEvent as F } from "../../../helpers/form/getValueAsEvent.js";
 import { useCallback as O, useRef as j, useId as k, useEffect as P } from "react";
 import { IressSelectSearch as $ } from "../SelectSearch/SelectSearch.js";
 import { toArray as D } from "../../../helpers/formatting/toArray.js";
-import { IressSelectMenu as y } from "../SelectMenu/SelectMenu.js";
+import { IressSelectMenu as E } from "../SelectMenu/SelectMenu.js";
 import { IressAlert as T } from "../../Alert/Alert.js";
 import "../../Alert/Alert.styles.js";
 import { IressSelectSearchInput as z } from "../SelectSearchInput/SelectSearchInput.js";
@@ -15,19 +15,19 @@ import "../../Menu/MenuItem/MenuItem.js";
 import "../../Popover/hooks/usePopover.js";
 const H = ({
   minSearchLength: e,
-  multiSelect: n,
-  onChange: a,
+  multiSelect: r,
+  onChange: i,
   query: I,
   results: o,
   shouldShowInstructions: d,
   shouldShowNoResults: c,
   value: t
 }) => /* @__PURE__ */ s(
-  y,
+  E,
   {
-    heading: n ? "Search results" : void 0,
+    heading: r ? "Search results" : void 0,
     items: o,
-    multiSelect: n,
+    multiSelect: r,
     noResults: (() => {
       if (I) {
         if (d)
@@ -36,18 +36,18 @@ const H = ({
           return "No results found";
       }
     })(),
-    onChange: a,
+    onChange: i,
     selected: t,
-    hideSelectedItems: n
+    hideSelectedItems: r
   }
-), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ F(W, { children: [
+), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ y(W, { children: [
   "An unknown error occurred.",
   /* @__PURE__ */ s("br", {}),
   " Please contact support if the error persists."
 ] }) }) : null, K = ({
   autoHighlight: e,
-  error: n,
-  loading: a,
+  error: r,
+  loading: i,
   minSearchLength: I,
   multiSelect: o,
   onChange: d,
@@ -56,62 +56,62 @@ const H = ({
   results: f,
   setQuery: p,
   show: A,
-  value: i,
+  value: l,
   shouldShowInstructions: R,
   shouldShowNoResults: S
 }) => {
-  const r = D(i).map(
-    (l) => {
-      const { formattedLabel: g, ...b } = l;
-      return b;
+  const n = D(l).map(
+    (a) => {
+      const { formattedLabel: g, ...N } = a;
+      return N;
     }
-  ), u = !n && (!!f?.length || t && !a), m = !!r.length && o, N = u && m, h = j(null), x = k();
+  ), u = !r && (!!f?.length || t && !i), m = !!n.length && o, v = u && m, h = j(null), x = k();
   P(() => {
     A || p?.("");
   }, [A, p]);
-  const v = m ? r.length + 1 : 0;
-  return /* @__PURE__ */ F(
+  const M = m ? n.length + 1 : 0;
+  return /* @__PURE__ */ y(
     $,
     {
       activator: /* @__PURE__ */ s(
         z,
         {
           "aria-label": "Search",
-          loading: a,
-          onChange: (l) => p?.(l.target.value),
+          loading: i,
+          onChange: (a) => p?.(a.target.value),
           ref: h,
           placeholder: "Search and select",
           value: t
         }
       ),
       autoHighlight: e,
-      focusStartIndex: e ? t && u ? v : m ? 1 : 0 : void 0,
+      focusStartIndex: e ? t && u ? M : m ? 1 : 0 : void 0,
       children: [
         m && /* @__PURE__ */ s(
-          y,
+          E,
           {
             "aria-labelledby": x,
             heading: /* @__PURE__ */ s(
               B,
               {
                 clearAll: !0,
-                onClearAll: (l) => {
-                  c?.(l), h.current?.focus();
+                onClearAll: (a) => {
+                  c?.(a), h.current?.focus();
                 },
-                children: /* @__PURE__ */ F("h2", { id: x, children: [
+                children: /* @__PURE__ */ y("h2", { id: x, children: [
                   "Selected (",
-                  r.length,
+                  n.length,
                   ")"
                 ] })
               }
             ),
-            items: r,
+            items: n,
             multiSelect: o,
             onChange: d,
-            selected: i
+            selected: l
           }
         ),
-        N && /* @__PURE__ */ s(G, {}),
+        v && /* @__PURE__ */ s(G, {}),
         u && /* @__PURE__ */ s(
           H,
           {
@@ -120,19 +120,19 @@ const H = ({
             onChange: d,
             query: t,
             results: f,
-            value: i,
+            value: l,
             shouldShowInstructions: R,
             shouldShowNoResults: S
           }
         ),
-        /* @__PURE__ */ s(J, { error: n })
+        /* @__PURE__ */ s(J, { error: r })
       ]
     }
   );
 }, oe = ({
   autoHighlight: e,
-  debouncedQuery: n,
-  error: a,
+  debouncedQuery: r,
+  error: i,
   initialOptions: I,
   loading: o,
   minSearchLength: d,
@@ -141,36 +141,38 @@ const H = ({
   options: f,
   query: p,
   renderOptions: A,
-  results: i,
+  results: l,
   setQuery: R,
   setShow: S,
-  setValue: r,
+  setValue: n,
   show: u,
   shouldShowInstructions: m,
-  shouldShowNoResults: N,
+  shouldShowNoResults: v,
   value: h
 }) => {
-  const x = typeof f == "function", v = I ?? (x ? [] : f), M = i.length ? i : v, C = O(
+  const x = typeof f == "function", M = I ?? (x ? [] : f), C = l.length ? l : M, b = O(
     (g) => {
-      r(g), t?.(E(g), g), c || S(!1);
+      n(g), t?.(F(g), g), c || S(!1);
     },
-    [S, r, t, c]
-  ), l = O(
+    [S, n, t, c]
+  ), a = O(
     (g) => {
       g.stopPropagation();
-      const b = [];
-      r(b), t?.(E([]), b);
+      const N = [];
+      n(N), t?.(F([]), N);
     },
-    [r, t]
+    [n, t]
   );
   return A ? A({
     close: () => S(!1),
-    debouncedQuery: n,
-    error: a,
+    debouncedQuery: r,
+    error: i,
+    handleClear: a,
+    handleMenuChange: b,
     loading: o,
     query: p,
-    results: M,
-    setValue: r,
+    results: C,
+    setValue: n,
     setQuery: R,
     show: u,
     value: h
@@ -178,28 +180,27 @@ const H = ({
     K,
     {
       autoHighlight: e,
-      error: a,
+      error: i,
       loading: o,
       minSearchLength: d,
       multiSelect: c,
-      onChange: C,
-      onClear: l,
+      onChange: b,
+      onClear: a,
       query: p,
-      results: i,
+      results: l,
       setQuery: R,
       show: u,
       value: h,
       shouldShowInstructions: m,
-      shouldShowNoResults: N
+      shouldShowNoResults: v
     }
   ) : /* @__PURE__ */ s(
-    y,
+    E,
     {
-      items: M,
+      items: C,
       multiSelect: c,
-      onChange: C,
-      selected: h,
-      selectedFirst: !0
+      onChange: b,
+      selected: h
     }
   );
 };

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-CZ9ot38T.js";
+import { t as p } from "../../../index-aTLA1VIV.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/constants.js

@@ -1,4 +1,4 @@
-const t = "6.0.0-alpha.4", e = {
+const t = "6.0.0-alpha.6", e = {
   /**
    * Extra small breakpoint, for mobile devices
    */

package/dist/{index-CZ9ot38T.js → index-aTLA1VIV.js}

@@ -444,7 +444,7 @@ const s = {
     variable: "var(--spacing-button\\.block)"
   },
   "spacing.field.footer": {
-    value: "calc(var(--iress-typography-base-size, .875rem) * 2.35)",
+    value: "calc(var(--iress-typography-base-size, .875rem) * 2)",
     variable: "var(--spacing-field\\.footer)"
   },
   "spacing.slider.tick": {

package/dist/main.js

@@ -62,7 +62,7 @@ import { IressInputPopover as Ce } from "./components/Popover/InputPopover/Input
 import { usePopoverItem as Ge } from "./components/Popover/hooks/usePopoverItem.js";
 import { IressProgress as _e } from "./components/Progress/Progress.js";
 import { progress as Re } from "./components/Progress/Progress.styles.js";
-import { I as Fe } from "./Provider-8wS70V56.js";
+import { I as Fe } from "./Provider-BPeo5YfI.js";
 import { IressRadio as Pe } from "./components/Radio/Radio.js";
 import { radio as De } from "./components/Radio/Radio.styles.js";
 import { IressRadioGroup as Oe, RadioGroupContext as Ve, getRadioGroupContext as ye } from "./components/RadioGroup/RadioGroup.js";

package/dist/patterns/Form/FormField/FormField.js

@@ -1,17 +1,17 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useContext as I, useRef as M, useMemo as d, useEffect as E } from "react";
-import { a as x } from "../../../index.esm-BiUTGNH8.js";
-import { getErrorTypeMessage as _ } from "./helpers/getErrorTypeMessage.js";
-import { FormContext as $ } from "../FormContext.js";
-import { transformCustomRulesToValidateRule as v } from "./helpers/transformCustomRulesToValidateRule.js";
-import { IressField as q } from "../../../components/Field/Field.js";
+import { jsx as I } from "react/jsx-runtime";
+import { useContext as M, useRef as E, useMemo as f, useEffect as x } from "react";
+import { useController as _ } from "react-hook-form";
+import { getErrorTypeMessage as $ } from "./helpers/getErrorTypeMessage.js";
+import { FormContext as v } from "../FormContext.js";
+import { transformCustomRulesToValidateRule as q } from "./helpers/transformCustomRulesToValidateRule.js";
+import { IressField as S } from "../../../components/Field/Field.js";
 import "../../../components/Field/Field.styles.js";
 import "../../../components/Icon/Icon.styles.js";
 import "../../../components/Field/FieldGroup/FieldGroup.styles.js";
 import "../../../components/Label/Label.styles.js";
 import { useFieldRenderProps as T } from "./hooks/useFieldRenderProps.js";
-const G = ({
-  control: f,
+const H = ({
+  control: d,
   defaultValue: p,
   name: r,
   render: n,
@@ -20,47 +20,53 @@ const G = ({
   readOnly: e,
   ...u
 }) => {
-  const o = I($), F = M(null);
+  const o = M(v), F = E(null);
   if (!o)
     throw new Error(
       "IressFormField must be used inside an IressForm. If you need a standalone field, use IressField instead."
     );
-  const m = d(() => {
+  const m = f(() => {
     if (!e)
-      return s ? v(s) : void 0;
-  }, [e, s]), { field: c, fieldState: t } = x({
-    control: f,
+      return s ? q(s) : void 0;
+  }, [e, s]), { field: c, formState: g, fieldState: t } = _({
+    control: d,
     defaultValue: p,
     name: r,
     rules: m,
     shouldUnregister: l
-  }), i = d(
-    () => t.error ? _(
+  }), i = f(
+    () => t.error ? $(
       t.error?.message,
       t.error?.type,
       s
     ) : "",
     [t.error, s]
   );
-  E(() => {
+  x(() => {
     e ? o.setErrorMessage(r, "") : o.setErrorMessage(r, i);
   }, [i, o, r, e]);
   const a = T(c, F);
-  return /* @__PURE__ */ g(
-    q,
+  return /* @__PURE__ */ I(
+    S,
     {
       errorMessages: i && !e ? [{ message: i }] : void 0,
       readOnly: e,
       required: !!m?.required,
       htmlFor: `${o.id}__${r}`,
       ...u,
-      children: n({
-        ...a,
-        id: `${o.id}__${r}`
-      })
+      children: n(
+        {
+          ...a,
+          id: `${o.id}__${r}`
+        },
+        {
+          formState: g,
+          fieldState: t
+        }
+      )
     }
   );
 };
 export {
-  G as IressFormField
+  H as IressFormField
 };

package/dist/patterns/Form/FormField/FormFieldset.js

@@ -1,6 +1,6 @@
 import { jsx as F } from "react/jsx-runtime";
 import { useContext as c, useRef as g, useMemo as I, useEffect as M } from "react";
-import { a as x } from "../../../index.esm-BiUTGNH8.js";
+import { useController as x } from "react-hook-form";
 import { getErrorTypeMessage as E } from "./helpers/getErrorTypeMessage.js";
 import "../../../components/Label/Label.styles.js";
 import "../../../components/Field/Field.styles.js";

package/dist/patterns/Form/HookForm/HookForm.js

@@ -1,6 +1,6 @@
 import { jsx as f, jsxs as E } from "react/jsx-runtime";
 import { forwardRef as J, useState as U, useRef as m, useCallback as n, useImperativeHandle as K, useEffect as V, useMemo as L } from "react";
-import { F as W } from "../../../index.esm-BiUTGNH8.js";
+import { FormProvider as W } from "react-hook-form";
 import { useIdIfNeeded as X } from "../../../hooks/useIdIfNeeded.js";
 import { IressFormValidationSummary as Y } from "../FormValidationSummary/FormValidationSummary.js";
 import { s as Z } from "../../../factory-oPXoMw9H.js";
@@ -20,7 +20,7 @@ const _ = ({
   updateErrorSummaryOnSubmit: s,
   ...g
 }, h) => {
-  const a = X({ id: g.id }), [r, i] = U({}), c = m({}), v = m(null), M = m(null), { handleSubmit: x, reset: q, formState: z } = o, { isValid: H, isSubmitted: I } = z, [C, N] = U(!1), R = n(
+  const i = X({ id: g.id }), [r, a] = U({}), c = m({}), v = m(null), M = m(null), { handleSubmit: x, reset: q, formState: z } = o, { isValid: H, isSubmitted: I } = z, [C, N] = U(!1), R = n(
     (e) => {
       F?.(e), v.current?.focus(), s && N(!0);
     },
@@ -28,7 +28,7 @@ const _ = ({
   ), j = n(
     (e) => {
       x((t) => {
-        u?.(t), i({}), c.current = {};
+        u?.(t), a({}), c.current = {};
       }, R)(e);
     },
     [R, x, u]
@@ -53,7 +53,7 @@ const _ = ({
         }),
         {}
       );
-      s ? k(() => Q) : i(() => Q);
+      s ? k(() => Q) : a(() => Q);
     },
     [
       r,
@@ -70,16 +70,16 @@ const _ = ({
   })), V(() => {
     p?.(H);
   }, [H, p]), V(() => {
-    s && C && I && (i(() => c.current), N(!1));
+    s && C && I && (a(() => c.current), N(!1));
   }, [s, C, I]);
   const A = L(
     () => ({
-      id: a,
+      id: i,
       errorMessages: r,
       setErrorMessage: P,
       setFocusOnError: w
     }),
-    [r, a, P, w]
+    [r, i, P, w]
   );
   return /* @__PURE__ */ f($.Provider, { value: A, children: /* @__PURE__ */ f(W, { ...o, children: /* @__PURE__ */ E(
     Z.form,
@@ -87,7 +87,7 @@ const _ = ({
       ...g,
       className: y(b, O.Form),
       "data-testid": d,
-      id: a,
+      id: i,
       noValidate: !0,
       onSubmit: j,
       ref: M,

package/dist/patterns/Form/components/LongForm.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { u as L } from "../../../index.esm-BiUTGNH8.js";
+import { useForm as L } from "react-hook-form";
 import { forwardRef as y, useMemo as z } from "react";
 import { IressText as B } from "../../../components/Text/Text.js";
 import { form as C } from "../Form.styles.js";
@@ -10,9 +10,9 @@ import "../../../components/Panel/Panel.styles.js";
 import "../../../components/Inline/Inline.styles.js";
 import { IressInline as R } from "../../../components/Inline/Inline.js";
 const T = ({
-  actions: a,
+  actions: c,
   alert: m,
-  children: c,
+  children: a,
   className: l,
   criteriaMode: f,
   context: d,
@@ -20,9 +20,9 @@ const T = ({
   delayError: p,
   footer: t,
   heading: o,
-  mode: u = "onBlur",
+  mode: g = "onBlur",
   panelStyle: n = { bg: "alt" },
-  progressive: g,
+  progressive: u,
   resetOptions: F,
   resolver: N,
   reValidateMode: x = "onChange",
@@ -37,8 +37,8 @@ const T = ({
     context: d,
     defaultValues: h,
     delayError: p,
-    mode: u,
-    progressive: g,
+    mode: g,
+    progressive: u,
     resetOptions: F,
     resolver: N,
     reValidateMode: x,
@@ -64,7 +64,7 @@ const T = ({
             className: r.header,
             children: [
               H,
-              /* @__PURE__ */ e("div", { className: r.actions, children: a })
+              /* @__PURE__ */ e("div", { className: r.actions, children: c })
             ]
           }
         ),
@@ -75,7 +75,7 @@ const T = ({
             className: i(r.children, n.className),
             children: [
               m,
-              c
+              a
             ]
           }
         ),

package/dist/patterns/Form/components/ShortForm.js

@@ -1,5 +1,5 @@
 import { jsx as H, jsxs as I } from "react/jsx-runtime";
-import { u as b } from "../../../index.esm-BiUTGNH8.js";
+import { useForm as b } from "react-hook-form";
 import { forwardRef as g, useMemo as w } from "react";
 import { form as C } from "../Form.styles.js";
 import { IressHookForm as E } from "../HookForm/HookForm.js";
@@ -17,9 +17,9 @@ const R = ({
   heading: o,
   mode: i = "onSubmit",
   progressive: u,
-  resetOptions: a,
-  resolver: h,
-  reValidateMode: p = "onChange",
+  resetOptions: h,
+  resolver: p,
+  reValidateMode: a = "onChange",
   shouldUseNativeValidation: F,
   shouldUnregister: l,
   values: x,
@@ -32,9 +32,9 @@ const R = ({
     delayError: c,
     mode: i,
     progressive: u,
-    resetOptions: a,
-    resolver: h,
-    reValidateMode: p,
+    resetOptions: h,
+    resolver: p,
+    reValidateMode: a,
     shouldFocusError: !r,
     shouldUseNativeValidation: F,
     shouldUnregister: l,