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

package/dist/patterns/Shadow/Shadow.js

@@ -1,7 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as b, useRef as _, useState as y, useEffect as g, useImperativeHandle as h } from "react";
 import { createPortal as f } from "react-dom";
-import { i as w, I as k } from "../../Provider-8wS70V56.js";
+import { i as w, I as k } from "../../Provider-BPeo5YfI.js";
 const z = `@layer reset, base, tokens, recipes, utilities;
 
 @layer reset{
@@ -337,7 +337,7 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     --spacing-xl: var(--iress-spacing-10, calc(10 * var(--iress-spacing-100, .25rem)));
     --spacing-button\\.inline: calc((var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25) + var(--iress-spacing-2, calc(2 * var(--iress-spacing-100, .25rem))));
     --spacing-button\\.block: calc(var(--iress-radius-system--button-top-left, var(--iress-radius-075, calc(0.75 * 1rem))) * 0.25);
-    --spacing-field\\.footer: calc(var(--iress-typography-base-size, .875rem) * 2.35);
+    --spacing-field\\.footer: calc(var(--iress-typography-base-size, .875rem) * 2);
     --spacing-slider\\.tick: calc((calc(var(--iress-typography-base-size, .875rem) * (10 / 14)) - calc(var(--iress-typography-base-size, .875rem) * (5 / 14))) / 2);
     --z-index-100: 100;
     --z-index-200: 200;
@@ -3070,6 +3070,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     border-width: 0;
 }
 
+  .px_spacing\\.2 {
+    padding-inline: var(--spacing-spacing\\.2);
+}
+
   .flex_auto {
     flex: 1 1 auto;
 }
@@ -3082,10 +3086,6 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     margin-block: var(--spacing-spacing\\.2);
 }
 
-  .px_spacing\\.2 {
-    padding-inline: var(--spacing-spacing\\.2);
-}
-
   .px_md {
     padding-inline: var(--spacing-md);
 }
@@ -7427,6 +7427,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     z-index: -1;
 }
 
+  .\\[\\&_\\.ids-popover__content\\]\\:z_100 .ids-popover__content {
+    z-index: var(--z-index-100);
+}
+
   :where([dir=rtl], :dir(rtl)) .rtl\\:selectChevronRtl_true:after {
     content: '';
     width: calc(var(--iress-typography-base-size, .875rem) * 0.5);

package/dist/src/components/RichSelect/RichSelect.d.ts

@@ -1,4 +1,5 @@
 import { ForwardedRef, ReactElement, ChangeEvent, ReactNode } from 'react';
+import { IressSelectMenuProps } from '../RichSelect';
 import { AutocompleteSearchHookProps } from '../Autocomplete';
 import { IressSelectActivatorProps } from './components/SelectActivator';
 import { SelectHiddenInputRenderProps } from './components/SelectHiddenInput';
@@ -7,6 +8,7 @@ import { ControlledValue } from '../../hooks';
 import { FormattedLabelValueMeta, LabelValueMeta, ReactHookFormCompatibleRef } from '../../interfaces';
 import { FloatingUIAligns } from '../../types';
 import { IressPopoverProps, PopoverRef } from '../Popover';
+import { IressButtonProps } from '../Button';
 export interface IressRichSelectProps<TMultiple extends boolean = false> extends Omit<AutocompleteSearchHookProps, 'query'>, Omit<IressPopoverProps, 'activator' | 'children' | 'contentClassName' | 'defaultShow' | 'defaultValue' | 'disabledAutoToggle' | 'onChange' | 'matchActivatorWidth' | 'show' | 'width'>, Pick<IressSelectActivatorProps, 'append' | 'prepend' | 'selectedOptionsText'> {
     /**
      * Sets the alignment of the dropdown relative to the activator element.
@@ -133,6 +135,14 @@ export interface SelectOptionsRenderProps<TMultiple extends boolean = false> ext
      * The query value that was used to filter the items (may be different from query).
      */
     debouncedQuery: string;
+    /**
+     * Clears the current selection in the menu.
+     */
+    handleClear: IressButtonProps['onClick'] & IressButtonProps['onKeyDown'];
+    /**
+     * When the menu selection changes, this will set the value and close the menu.
+     */
+    handleMenuChange: IressSelectMenuProps<TMultiple>['onChange'];
     /**
      * The query value to filter items by and create search results.
      */

package/dist/src/components/RichSelect/components/SelectOptions.d.ts

@@ -1,5 +1,5 @@
 import { IressRichSelectProps, SelectOptionsRenderProps } from '../RichSelect';
-interface SelectOptionsProps<TMultiple extends boolean = false> extends Pick<IressRichSelectProps<TMultiple>, 'autoHighlight' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps<TMultiple>, 'close'> {
+interface SelectOptionsProps<TMultiple extends boolean = false> extends Pick<IressRichSelectProps<TMultiple>, 'autoHighlight' | 'minSearchLength' | 'multiSelect' | 'onChange' | 'options' | 'renderOptions' | 'value' | 'initialOptions'>, Omit<SelectOptionsRenderProps<TMultiple>, 'close' | 'handleClear' | 'handleMenuChange'> {
     setShow: (show: boolean) => void;
     shouldShowInstructions?: boolean;
     shouldShowNoResults?: boolean;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Control, ControllerRenderProps, FieldPath, FieldPathValue, FieldValues, UseControllerProps } from 'react-hook-form';
+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'> {
@@ -22,7 +22,7 @@ export interface IressFormFieldProps<T extends FieldValues = FieldValues, TName
      * 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>) => ReactNode;
+    render: (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)
@@ -47,6 +47,19 @@ export interface FormFieldRenderProps<T extends FieldValues> extends ControllerR
      */
     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.