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

package/dist/patterns/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,221 @@
+import { jsx as r, jsxs as p, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as j, useRef as k, useImperativeHandle as q, useMemo as v, useState as Q } from "react";
+import { c as cr } from "../../css-DVJ-ALYD.js";
+import { c as mr } from "../../cx-DN21T1EH.js";
+import { dropdownMenu as L } from "./DropdownMenu.styles.js";
+import { s as pr } from "../../is-valid-prop-C5D641yn.js";
+import { propagateTestid as y } from "../../helpers/utility/propagateTestid.js";
+import { useControlledState as lr } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as ur } from "../../hooks/useIdIfNeeded.js";
+import { GlobalCSSClass as dr } from "../../enums.js";
+import "../../Autocomplete-BRMDwwwT.js";
+import "../../components/Autocomplete/Autocomplete.styles.js";
+import { useAutocompleteSearch as fr } from "../../components/Autocomplete/hooks/useAutocompleteSearch.js";
+import { IressSelectMenu as hr } from "../../components/Select/SelectMenu/SelectMenu.js";
+import { IressPopover as gr } from "../../components/Popover/Popover.js";
+import "../../components/Popover/Popover.styles.js";
+import "../../components/Popover/InputPopover/InputPopover.js";
+import "../../components/Popover/hooks/useFloatingPopover.js";
+import { usePopoverItem as vr } from "../../components/Popover/hooks/usePopoverItem.js";
+import { IressIcon as H } from "../../components/Icon/Icon.js";
+import "../../components/Icon/Icon.styles.js";
+import "../../components/Icon/IconProvider.js";
+import { IressDivider as yr } from "../../components/Divider/Divider.js";
+import "../../components/Divider/Divider.styles.js";
+import { IressStyled as O } from "../../components/Styled/Styled.js";
+import { toArray as Ir } from "../../helpers/formatting/toArray.js";
+import { I as wr } from "../../Button-C0p8bEXn.js";
+import "../../components/Button/CloseButton/CloseButton.js";
+import { useDropdownMenuFlags as Sr } from "./hooks/useDropdownMenuFlags.js";
+import "../../components/Select/SelectBody/SelectBody.js";
+import "../../components/Select/SelectCreate/SelectCreate.js";
+import "../../components/Select/SelectHeading/SelectHeading.js";
+import "../../components/Select/SelectLabel/SelectLabel.js";
+import "../../components/Select/SelectSearch/SelectSearch.js";
+import { IressSelectSearchInput as Cr } from "../../components/Select/SelectSearchInput/SelectSearchInput.js";
+import "../../components/Select/SelectTags/SelectTags.js";
+import "../../components/Select/Select.styles.js";
+import "../../components/Select/components/NativeSelect.styles.js";
+const br = L.raw(), t = L(), Nr = j(
+  (I, w) => {
+    const n = k(null), { isActiveInPopover: o, ...l } = vr();
+    return q(w, () => n.current), /* @__PURE__ */ r(
+      wr,
+      {
+        ...I,
+        ...l,
+        className: t.reset,
+        mode: "quaternary",
+        ref: (S) => {
+          n.current = S, l?.ref?.(n.current);
+        }
+      }
+    );
+  }
+), Mr = ({
+  align: I = "bottom-start",
+  container: w,
+  className: n,
+  "data-testid": o,
+  defaultSelected: l,
+  debounceThreshold: S,
+  footer: V,
+  header: W,
+  label: a,
+  id: _,
+  initialOptions: $,
+  inputProps: G = {
+    clearable: !0,
+    prepend: /* @__PURE__ */ r(H, { name: "search" })
+  },
+  limitDesktop: z = 12,
+  limitMobile: E = 6,
+  multiSelect: i,
+  onChange: J,
+  onReset: K,
+  options: c,
+  searchable: M,
+  searchNoResultsText: C,
+  selected: U,
+  selectedOptionsText: D = " ({{numOptions}})",
+  visibleResetButton: u,
+  ...P
+}, X) => {
+  const R = ur({ id: _ }), A = `${R}-sr-text`, x = k(null), F = v(
+    () => M ?? typeof c == "function",
+    [c, M]
+  ), Y = {
+    clearable: !0,
+    prepend: /* @__PURE__ */ r(H, { name: "search" }),
+    ...G
+  }, { value: d, setValue: Z } = lr({
+    component: "IressDropdownMenu",
+    defaultValue: l,
+    value: U
+  }), [B, b] = Q(""), [f, m] = Q(!1), [T, rr] = v(
+    () => pr(P),
+    [P]
+  ), er = (e) => {
+    b(e.target.value);
+  }, tr = () => {
+    b("");
+  }, or = (e) => {
+    e && (J?.(e), Z(e), i || m(!1));
+  }, sr = () => {
+    K?.(), i || m(!1);
+  };
+  q(X, () => ({
+    ...x.current,
+    clearSearch: () => b("")
+  }));
+  const {
+    debouncedQuery: nr,
+    loading: h,
+    results: s,
+    shouldShowInstructions: Pr,
+    shouldShowDebounceWaiting: Rr,
+    shouldShowNoResults: Ar
+  } = fr({
+    debounceThreshold: S,
+    initialOptions: $ ?? (typeof c == "function" ? void 0 : c),
+    options: c,
+    query: B
+  }), g = Sr({
+    debouncedQuery: nr,
+    loading: h,
+    results: s,
+    searchable: F,
+    visibleResetButton: u
+  }), ar = v(() => {
+    const e = Ir(d);
+    return i ? /* @__PURE__ */ p(N, { children: [
+      a,
+      D.replace(
+        "{{numOptions}}",
+        e.length.toString()
+      )
+    ] }) : e[0]?.label ?? a;
+  }, [d, i, a, D]), ir = v(() => h ? "loading" : f && !s.length ? C : f && s.length ? `${s.length} results` : a, [a, h, s.length, C, f]);
+  return /* @__PURE__ */ p(N, { children: [
+    /* @__PURE__ */ p(
+      gr,
+      {
+        matchActivatorWidth: !0,
+        ...rr,
+        activator: /* @__PURE__ */ r(
+          "button",
+          {
+            "aria-describedby": A,
+            "data-testid": y(
+              o,
+              "activator-button__button"
+            ),
+            id: A,
+            onClick: () => m(!0),
+            className: cr(br.activator, T),
+            children: ar
+          }
+        ),
+        align: I,
+        className: mr(n, t.root, dr.Filter),
+        container: w,
+        contentStyle: { className: t.popoverContent },
+        "data-testid": o,
+        id: R,
+        show: f,
+        onActivated: () => m(!0),
+        onDeactivated: () => m(!1),
+        ref: x,
+        type: "listbox",
+        children: [
+          W,
+          g.showHeader && /* @__PURE__ */ p(N, { children: [
+            /* @__PURE__ */ p(O, { className: t.searchHeader, children: [
+              F && /* @__PURE__ */ r(
+                Cr,
+                {
+                  ...Y,
+                  role: "searchbox",
+                  className: t.searchInput,
+                  "data-testid": y(o, "input"),
+                  loading: h,
+                  onChange: er,
+                  onClear: tr
+                }
+              ),
+              u && d && /* @__PURE__ */ r(
+                Nr,
+                {
+                  "data-testid": y(o, "reset-button"),
+                  onClick: sr,
+                  children: typeof u == "string" ? u : "Reset filter"
+                }
+              )
+            ] }),
+            g.showResults && /* @__PURE__ */ r(yr, {})
+          ] }),
+          g.showResults && /* @__PURE__ */ r(
+            hr,
+            {
+              className: t.optionList,
+              "data-testid": y(o, "menu"),
+              items: s,
+              limitDesktop: z,
+              limitMobile: E,
+              multiSelect: i,
+              onChange: or,
+              selected: d
+            }
+          ),
+          g.showNoResults && /* @__PURE__ */ r("div", { className: t.noResults, children: C }),
+          V
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(O, { srOnly: !0, children: ir })
+  ] });
+}, Dr = j(Mr);
+Dr.displayName = "IressDropdownMenu";
+export {
+  Dr as IressDropdownMenu
+};

package/dist/patterns/DropdownMenu/DropdownMenu.styles.d.ts

@@ -0,0 +1 @@
+export declare const dropdownMenu: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "reset" | "activator" | "popoverContent" | "optionList" | "noResults" | "searchHeader" | "searchInput" | "optionContent" | "optionMeta" | "optionMetaText", {}>;

package/dist/patterns/DropdownMenu/DropdownMenu.styles.js

@@ -0,0 +1,75 @@
+import { s as t } from "../../sva-CsHRIRDW.js";
+const e = t({
+  slots: [
+    "root",
+    "activator",
+    "searchHeader",
+    "searchInput",
+    "optionList",
+    "optionContent",
+    "optionMeta",
+    "optionMetaText",
+    "reset",
+    "noResults",
+    "popoverContent"
+  ],
+  base: {
+    root: {},
+    activator: {
+      appearance: "none",
+      color: "colour.neutral.90",
+      bg: "colour.neutral.10",
+      border: "input",
+      pl: "spacing.3",
+      pr: "spacing.8",
+      textStyle: "typography.body.md.medium",
+      minHeight: "input.height",
+      borderRadius: "radius.system.form",
+      cursor: "pointer",
+      focusable: "select-activator",
+      display: "inline-flex",
+      gap: "spacing.2",
+      alignItems: "center",
+      position: "relative",
+      selectChevron: !0,
+      _rtl: {
+        selectChevronRtl: !0,
+        pr: "spacing.3",
+        pl: "spacing.8"
+      }
+    },
+    searchHeader: {},
+    searchInput: {},
+    optionList: {
+      _empty: {
+        display: "none"
+      }
+    },
+    optionContent: {
+      flex: "[1 1 auto]",
+      flexDirection: "column"
+    },
+    optionMeta: {
+      display: "block"
+    },
+    optionMetaText: {
+      fontWeight: "normal",
+      color: "colour.neutral.60"
+    },
+    reset: {
+      minHeight: "auto",
+      m: "spacing.2"
+    },
+    noResults: {},
+    popoverContent: {
+      maxHeight: "overlay.sm",
+      scrollable: "y",
+      maxWidth: "[none]"
+    }
+  },
+  variants: {},
+  compoundVariants: []
+});
+export {
+  e as dropdownMenu
+};

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.d.ts

@@ -0,0 +1,7 @@
+import { AutocompleteSearchHookReturn } from '../../../components/Autocomplete';
+import { IressDropdownMenuProps } from '../DropdownMenu';
+export declare const useDropdownMenuFlags: ({ debouncedQuery, loading, results, searchable, visibleResetButton, }: Omit<AutocompleteSearchHookReturn, "clearError" | "error" | "startSearch" | "stopSearch"> & Pick<IressDropdownMenuProps, "searchable" | "visibleResetButton">) => {
+    showHeader: string | boolean | undefined;
+    showNoResults: string | false;
+    showResults: boolean;
+};

package/dist/patterns/DropdownMenu/hooks/useDropdownMenuFlags.js

@@ -0,0 +1,25 @@
+import { useMemo as n } from "react";
+const e = ({
+  debouncedQuery: t,
+  loading: h,
+  results: o,
+  searchable: s,
+  visibleResetButton: w
+}) => {
+  const g = n(
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    () => s || w,
+    [s, w]
+  ), m = n(() => !!o.length, [o]), p = n(
+    () => o.length === 0 && !h && t,
+    [t, h, o.length]
+  );
+  return {
+    showHeader: g,
+    showNoResults: p,
+    showResults: m
+  };
+};
+export {
+  e as useDropdownMenuFlags
+};

package/dist/patterns/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropdownMenu';
+export * from './DropdownMenu.styles';

package/dist/patterns/DropdownMenu/index.js

@@ -0,0 +1,6 @@
+import { IressDropdownMenu as e } from "./DropdownMenu.js";
+import { dropdownMenu as p } from "./DropdownMenu.styles.js";
+export {
+  e as IressDropdownMenu,
+  p as dropdownMenu
+};

package/dist/patterns/Form/Form.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { FormRef } from './HookForm/HookForm';
+import { LongFormProps } from './components/LongForm';
+import { ShortFormProps } from './components/ShortForm';
+export type IressFormProps<T extends FieldValues, TContext = object> = LongFormProps<T, TContext> | ShortFormProps<T, TContext>;
+export declare const IressForm: (<T extends FieldValues>(props: IressFormProps<T> & {
+    ref?: Ref<FormRef<T>>;
+}) => React.ReactElement) & {
+    displayName: "IressForm";
+};

package/dist/patterns/Form/Form.js

@@ -1,13 +1,11 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { u as F, a, b as u, c as n } from "../../index.esm-B6vzbp0e.js";
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
 import { LongForm as i } from "./components/LongForm.js";
 import { ShortForm as f } from "./components/ShortForm.js";
-const c = ({ pattern: e, ...o }, m) => e === "long" ? /* @__PURE__ */ t(i, { ...o, ref: m }) : /* @__PURE__ */ t(f, { ...o, ref: m }), d = s(c), r = d;
-r.useFieldArray = F;
-r.useForm = a;
-r.useFormContext = u;
-r.useWatch = n;
+const s = ({ pattern: t, ...r }, o) => t === "long" ? /* @__PURE__ */ m(i, { ...r, ref: o }) : /* @__PURE__ */ m(f, { ...r, ref: o });
+s.displayName = "IressForm";
+const n = e(s);
+n.displayName = "IressForm";
 export {
-  r as IressForm
+  n as IressForm
 };

package/dist/patterns/Form/Form.styles.d.ts

@@ -0,0 +1,30 @@
+export declare const form: import('../../styled-system/types').SlotRecipeRuntimeFn<"children" | "footer" | "header" | "root" | "actions", {
+    pattern: {
+        long: {
+            actions: {
+                ml: "auto";
+                textAlign: "right";
+            };
+            footer: {
+                mt: "md";
+            };
+            header: {
+                position: "sticky";
+                top: "none";
+                bg: "colour.neutral.10";
+                zIndex: "100";
+                py: "md";
+            };
+        };
+        short: {};
+    };
+    sticky: {
+        true: {
+            header: {
+                position: "sticky";
+                top: "[0]";
+                zIndex: "200";
+            };
+        };
+    };
+}>;

package/dist/patterns/Form/Form.styles.js

@@ -1,4 +1,4 @@
-import { s as t } from "../../sva-OmxClA9g.js";
+import { s as t } from "../../sva-CsHRIRDW.js";
 const r = t({
   slots: ["root", "actions", "header", "footer", "children"],
   base: {

package/dist/patterns/Form/FormContext.js

@@ -1,7 +1,8 @@
 import { createContext as o } from "react";
-const e = o(
+const t = o(
   void 0
 );
+t.displayName = "FormContext";
 export {
-  e as FormContext
+  t as FormContext
 };

package/dist/patterns/Form/FormField/FormField.d.ts

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react';
+import { Control, ControllerFieldState, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, UseControllerProps, UseFormStateReturn } from 'react-hook-form';
+import { CustomRules } from './helpers/transformCustomRulesToValidateRule';
+import { IressFieldProps } from '../../../components/Field';
+export interface IressFormFieldProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> extends Omit<IressFieldProps, 'children' | 'htmlFor' | 'required'>, Omit<UseControllerProps<T, FieldPath<T>>, 'disabled'> {
+    /**
+     * React Hook Form control object. It is used to register the field with the form.
+     * It is automatically provided when used inside an `IressForm`, but it can be overridden if you are using a custom form control.
+     * @see https://react-hook-form.com/ts#Control
+     */
+    control?: Control<T>;
+    /**
+     * A default value for the field. Although this is provided here as it is part of the React Hook Form API, it is recommended to set the default value in the form's `defaultValues` prop, to ensure the form is correctly initialised.
+     */
+    defaultValue?: FieldPathValue<T, TName>;
+    /**
+     * Name of the field. It is used to identify the field in the form. It must be unique within the form.
+     */
+    name: FieldPath<T>;
+    /**
+     * Render function to provide the control for the field.
+     * To ensure the field is correctly registered with the form, the control must be passed as props to the rendered component.
+     * (eg. `render={field => <IressInput {...field} />}`)
+     */
+    render: (field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>) => ReactNode;
+    /**
+     * Render function to allow you to render supplementary content alongside the field, with access to the field props and state.
+     * This can be useful for rendering custom components that need to interact with the form state, such as character counters, password strength meters, or custom validation messages.
+     * (eg. `renderSupplementary={{ value } => <CharCount value={value} />}`)
+     */
+    renderSupplementary?: (field: FormFieldRenderProps<T>, state: FormFieldRenderState<T>) => ReactNode;
+    /**
+     * Validation rules, including: required, min, max, minLength, maxLength, pattern, validate
+     * @see https://react-hook-form.com/api/useform/register)
+     */
+    rules?: CustomRules<T>;
+    /**
+     * Input will be unregistered after unmount and defaultValues will be removed as well (it will not be stored in the form state).
+     * @see https://react-hook-form.com/docs/usecontroller
+     */
+    shouldUnregister?: boolean;
+    /**
+     * Text to be displayed instead of input field.
+     */
+    readOnly?: boolean;
+}
+/**
+ * Props for the `IressFormField` `render` prop.
+ */
+export interface FormFieldRenderProps<T extends FieldValues> extends ControllerRenderProps<T, FieldPath<T>> {
+    /**
+     * ID of the field. It is automatically generated based on the name of the field and its parent form.
+     */
+    id: string;
+}
+/**
+ * Props for the `IressFormField` `render` prop, second argument.
+ */
+export interface FormFieldRenderState<T extends FieldValues> {
+    /**
+     * State of the field.
+     */
+    fieldState?: ControllerFieldState;
+    /**
+     * State of the form.
+     */
+    formState?: UseFormStateReturn<T>;
+}
+/**
+ * A `IressField` wrapper that can show error message and label automatically inside an `IressForm`.
+ * It uses the `useController` hook from `react-hook-form` for form management.
+ */
+export declare const IressFormField: {
+    <T extends FieldValues>({ control, defaultValue, name, render, renderSupplementary, rules: withCustomRules, shouldUnregister, supplementary, readOnly, ...fieldProps }: IressFormFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

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

package/dist/patterns/Form/FormField/FormFieldset.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { Control, FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
+import { IressFieldGroupProps } from '../../../components/Field';
+import { CustomRules } from './helpers/transformCustomRulesToValidateRule';
+import { FormFieldRenderProps } from './FormField';
+export interface IressFormFieldsetProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> extends Omit<IressFieldGroupProps, 'children' | 'htmlFor' | 'required' | 'join' | 'inline'>, Omit<UseControllerProps<T, FieldPath<T>>, 'disabled'> {
+    /**
+     * React Hook Form control object. It is used to register the field with the form.
+     * It is automatically provided when used inside an `IressForm`, but it can be overridden if you are using a custom form control.
+     * @see https://react-hook-form.com/ts#Control
+     */
+    control?: Control<T>;
+    /**
+     * A default value for the field. Although this is provided here as it is part of the React Hook Form API, it is recommended to set the default value in the form's `defaultValues` prop, to ensure the form is correctly initialised.
+     */
+    defaultValue?: FieldPathValue<T, TName>;
+    /**
+     * Name of the field. It is used to identify the field in the form. It must be unique within the form.
+     */
+    name: FieldPath<T>;
+    /**
+     * Render function to provide the control for the field.
+     */
+    render: (field: FormFieldRenderProps<T>) => ReactNode;
+    /**
+     * Validation rules, including: required, min, max, minLength, maxLength, pattern, validate
+     * @see https://react-hook-form.com/api/useform/register
+     */
+    rules?: CustomRules<T>;
+    /**
+     * Input will be unregistered after unmount and defaultValues will be removed as well (it will not be stored in the form state).
+     * @see https://react-hook-form.com/docs/usecontroller
+     */
+    shouldUnregister?: boolean;
+}
+/**
+ * A `IressFieldGroup` wrapper that can show error message and legend automatically inside an `IressForm`.
+ * It uses the `useController` hook from `react-hook-form` for form management.
+ */
+export declare const IressFormFieldset: {
+    <TFieldValues extends FieldValues>({ control, defaultValue, name, render, rules: withCustomRules, shouldUnregister, ...fieldGroupProps }: IressFormFieldsetProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};