@snack-uikit/fields 0.36.3 → 0.36.5-preview-c8fb5dcc.0

package/src/components/FieldDate/FieldDate.tsx

@@ -1,5 +1,15 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  KeyboardEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { Calendar, CalendarProps } from '@snack-uikit/calendar';
@@ -66,6 +76,8 @@ type FieldDateOwnProps = {
    */
   showClearButton?: boolean;
   mode: Mode;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 } & Pick<CalendarProps, 'buildCellProps'> &
   (
     | {
@@ -105,6 +117,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
       error,
       mode,
       onCopyButtonClick,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -307,6 +320,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         size={size}
         error={error}
         validationState={fieldValidationState}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <Dropdown

package/src/components/FieldDecorator/FieldDecorator.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 
 import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -25,49 +25,54 @@ export type FieldDecoratorProps = WithSupportProps<
     FooterProps
 >;
 
-export function FieldDecorator({
-  children,
-  className,
-  label,
-  labelTooltip,
-  required,
-  labelFor,
-  caption,
-  length,
-  hint,
-  disabled,
-  readonly,
-  showHintIcon,
-  labelTooltipPlacement,
-  size = SIZE.S,
-  error,
-  validationState = VALIDATION_STATE.Default,
-  ...rest
-}: FieldDecoratorProps) {
-  const isFieldActive = !disabled && !readonly;
-  const fieldValidationState = getValidationState({ validationState, error });
+export const FieldDecorator = forwardRef<HTMLDivElement, FieldDecoratorProps>(
+  (
+    {
+      children,
+      className,
+      label,
+      labelTooltip,
+      required,
+      labelFor,
+      caption,
+      length,
+      hint,
+      disabled,
+      readonly,
+      showHintIcon,
+      labelTooltipPlacement,
+      size = SIZE.S,
+      error,
+      validationState = VALIDATION_STATE.Default,
+      ...rest
+    },
+    ref,
+  ) => {
+    const isFieldActive = !disabled && !readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
 
-  return (
-    <div className={cn(styles.decorator, className)} {...extractSupportProps(rest)} data-size={size}>
-      {label && (
-        <Header
-          labelTooltipPlacement={labelTooltipPlacement}
-          required={required}
-          label={label}
-          labelTooltip={labelTooltip}
-          labelFor={labelFor}
-          caption={caption}
+    return (
+      <div className={cn(styles.decorator, className)} {...extractSupportProps(rest)} data-size={size} ref={ref}>
+        {label && (
+          <Header
+            labelTooltipPlacement={labelTooltipPlacement}
+            required={required}
+            label={label}
+            labelTooltip={labelTooltip}
+            labelFor={labelFor}
+            caption={caption}
+            size={size}
+          />
+        )}
+        {children}
+        <Footer
+          length={isFieldActive ? length : undefined}
+          hint={error || hint}
+          showHintIcon={showHintIcon}
           size={size}
+          validationState={isFieldActive ? fieldValidationState : VALIDATION_STATE.Default}
         />
-      )}
-      {children}
-      <Footer
-        length={isFieldActive ? length : undefined}
-        hint={error || hint}
-        showHintIcon={showHintIcon}
-        size={size}
-        validationState={isFieldActive ? fieldValidationState : VALIDATION_STATE.Default}
-      />
-    </div>
-  );
-}
+      </div>
+    );
+  },
+);

package/src/components/FieldSecure/FieldSecure.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, ReactElement, useMemo, useRef, useState } from 'react';
+import { ForwardedRef, forwardRef, ReactElement, useMemo, useRef, useState } from 'react';
 
 import {
   InputPrivate,
@@ -55,6 +55,8 @@ type FieldSecureOwnProps = {
   prefixIcon?: ReactElement;
   /** Свойство позволяет грузить данные в поле по требованию */
   asyncValueGetter?(): Promise<string>;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
@@ -91,6 +93,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       asyncValueGetter,
       autoComplete,
       onCopyButtonClick,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -205,6 +208,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
         size={size}
         error={error}
         validationState={fieldValidationState}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -53,6 +53,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     resetSearchOnOptionSelection = true,
     onOpenChange,
     selectedOptionFormatter = defaultSelectedOptionFormatter,
+    decoratorRef,
     ...rest
   } = props;
   const localRef = useRef<HTMLInputElement>(null);
@@ -180,6 +181,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
       {...extractSupportProps(rest)}
       {...extractFieldDecoratorProps(props)}
       validationState={fieldValidationState}
+      ref={decoratorRef}
     >
       <Droplist
         {...extractListProps(props)}

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -60,6 +60,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     selectedOptionFormatter = defaultSelectedOptionFormatter,
     enableFuzzySearch = true,
     onCopyButtonClick,
+    decoratorRef,
     ...rest
   } = props;
   const localRef = useRef<HTMLInputElement>(null);
@@ -196,6 +197,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
       {...extractSupportProps(rest)}
       {...extractFieldDecoratorProps(props)}
       validationState={fieldValidationState}
+      ref={decoratorRef}
     >
       <Droplist
         {...extractListProps(props)}

package/src/components/FieldSelect/types.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import { ForwardedRef, ReactElement, ReactNode } from 'react';
 
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import {
@@ -135,6 +135,9 @@ type FiledSelectCommonProps = WithSupportProps<{
   onOpenChange?(open: boolean): void;
 
   selectedOptionFormatter?: SelectedOptionFormatter;
+
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 }> &
   Pick<
     DroplistProps,

package/src/components/FieldSlider/FieldSlider.tsx

@@ -1,6 +1,7 @@
 import mergeRefs from 'merge-refs';
 import {
   FocusEvent,
+  ForwardedRef,
   forwardRef,
   KeyboardEvent,
   ReactElement,
@@ -54,6 +55,8 @@ type FieldSliderOwnProps = {
   prefix?: ReactNode;
   /** Произвольный постфикс для поля */
   postfix?: ReactNode;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
@@ -106,6 +109,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       postfixIcon,
       prefix,
       postfix,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -280,6 +284,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
         showHintIcon={showHintIcon}
         readonly={readonly}
         size={size}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate

package/src/components/FieldStepper/FieldStepper.tsx

@@ -3,6 +3,7 @@ import mergeRefs from 'merge-refs';
 import {
   ChangeEvent,
   FocusEvent,
+  ForwardedRef,
   forwardRef,
   KeyboardEventHandler,
   MouseEvent,
@@ -59,6 +60,8 @@ type FieldStepperOwnProps = {
   prefix?: ReactNode;
   /** Произвольный постфикс для поля */
   postfix?: ReactNode;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
@@ -111,6 +114,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       error,
       prefix,
       postfix,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -223,6 +227,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
         size={size}
         validationState={fieldValidationState}
         error={error}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <Tooltip

package/src/components/FieldText/FieldText.tsx

@@ -1,5 +1,6 @@
 import mergeRefs from 'merge-refs';
 import {
+  ForwardedRef,
   forwardRef,
   KeyboardEventHandler,
   ReactElement,
@@ -72,6 +73,8 @@ type FieldTextOwnProps = {
   postfix?: ReactNode;
   /** Кнопка действия внутри поля */
   button?: Button;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
@@ -111,6 +114,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       button: buttonProp,
       onPaste,
       onKeyDown,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -224,6 +228,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
         size={size}
         validationState={fieldValidationState}
         error={error}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { ChangeEvent, forwardRef, useMemo, useRef } from 'react';
+import { ChangeEvent, ForwardedRef, forwardRef, useMemo, useRef } from 'react';
 
 import { SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { Scroll } from '@snack-uikit/scroll';
@@ -50,6 +50,8 @@ type FieldTextAreaOwnProps = {
   showClearButton?: boolean;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
@@ -85,6 +87,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
       onCopyButtonClick,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -147,6 +150,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
         size={size}
         error={error}
         validationState={fieldValidationState}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate

package/src/components/FieldTime/FieldTime.tsx

@@ -1,5 +1,15 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, MouseEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+  FocusEvent,
+  ForwardedRef,
+  forwardRef,
+  KeyboardEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { TimePicker, TimePickerProps } from '@snack-uikit/calendar';
@@ -61,6 +71,8 @@ type FieldTimeOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
+  /** Ref для корневой обертки компонента */
+  decoratorRef?: ForwardedRef<HTMLDivElement>;
 };
 
 export type FieldTimeProps = WithSupportProps<FieldTimeOwnProps & InputProps & WrapperProps>;
@@ -113,6 +125,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(
       validationState = VALIDATION_STATE.Default,
       error,
       onCopyButtonClick,
+      decoratorRef,
       ...rest
     },
     ref,
@@ -290,6 +303,7 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(
         size={size}
         error={error}
         validationState={fieldValidationState}
+        ref={decoratorRef}
         {...extractSupportProps(rest)}
       >
         <Dropdown

package/src/helperComponents/ButtonFieldList/ButtonFieldList.tsx

@@ -11,7 +11,7 @@ import styles from './styles.module.scss';
 type ButtonFieldListProps = Omit<ButtonFieldProps, 'arrowOpen' | 'hasArrow'> & NativeDroplistProps;
 
 export const ButtonFieldList = forwardRef<HTMLButtonElement, ButtonFieldListProps>(
-  ({ items, selection, open, onOpenChange, ...rest }, ref) => {
+  ({ items, selection, open, onOpenChange, search, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
     const placement = getPlacement(rest);
 
@@ -23,6 +23,7 @@ export const ButtonFieldList = forwardRef<HTMLButtonElement, ButtonFieldListProp
         open={isOpen}
         onOpenChange={setIsOpen}
         closeDroplistOnItemClick={true}
+        search={search}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         triggerElemRef={ref}

package/src/types/allFields.ts

@@ -13,7 +13,7 @@ export type ButtonVariant = ValueOf<typeof BUTTON_VARIANT>;
 
 export type AsyncValueRequest = Promise<{ success: boolean; value?: string }>;
 
-export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange'> & {
+export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange' | 'search'> & {
   selection?: Omit<SelectionSingleState, 'mode'>;
 };