@snack-uikit/fields 0.23.3 → 0.23.5-preview-b0cb52bd.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.23.4 (2024-07-29)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.14.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.23.3 (2024-07-19)
 
 ### Only dependencies have been changed

package/README.md

@@ -317,7 +317,7 @@ FieldStepper в основном предназначен для работы с
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | locale | `Locale` | new Intl.Locale('ru-RU') | Текущая локаль календаря |
-| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
+| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |

package/dist/components/FieldDate/FieldDate.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -24,22 +23,22 @@ type FieldDateOwnProps = {
 } & Pick<CalendarProps, 'buildCellProps'>;
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
 export declare const FieldDate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & {
     /** Открыт date-picker */
-    open?: boolean | undefined;
+    open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
     /** Колбек смены значения */
     onChange?(value: string): void;
     /** Отображение кнопки копирования */
-    showCopyButton?: boolean | undefined;
+    showCopyButton?: boolean;
     /**
      * Отображение кнопки Очистки поля
      * @default true
      */
-    showClearButton?: boolean | undefined;
+    showClearButton?: boolean;
     /** Текущая локаль календаря */
-    locale?: Intl.Locale | undefined;
+    locale?: Intl.Locale;
 } & Pick<CalendarProps, "buildCellProps"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldDecorator/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldDecoratorProps } from './FieldDecorator';
 export declare function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, caption, hint, disabled, showHintIcon, size, validationState, className, }: T): {
     error: string | undefined;

package/dist/components/FieldSecure/FieldSecure.d.ts

@@ -20,6 +20,6 @@ type FieldSecureOwnProps = {
 };
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldSelect/FieldSelect.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { FieldSelectProps } from './types';
 export declare const FieldSelect: import("react").ForwardRefExoticComponent<FieldSelectProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -1,27 +1,26 @@
-/// <reference types="react" />
 import { SelectedOptionFormatter } from './types';
 export declare const FieldSelectMultiple: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
-    loading?: boolean | undefined;
+    loading?: boolean;
 } & {
-    removeByBackspace?: boolean | undefined;
+    removeByBackspace?: boolean;
 } & Omit<import("@snack-uikit/list").SelectionMultipleState, "mode"> & Omit<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop?: import("./types").OptionProps[] | undefined;
-    pinBottom?: import("./types").OptionProps[] | undefined;
-    searchable?: boolean | undefined;
-    showCopyButton?: boolean | undefined;
-    showClearButton?: boolean | undefined;
-    readonly?: boolean | undefined;
-    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    footer?: import("react").ReactNode;
-    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
-    search?: import("./types").SearchState | undefined;
-    autocomplete?: boolean | undefined;
-    addOptionByEnter?: boolean | undefined;
-    open?: boolean | undefined;
+    pinTop?: import("./types").OptionProps[];
+    pinBottom?: import("./types").OptionProps[];
+    searchable?: boolean;
+    showCopyButton?: boolean;
+    showClearButton?: boolean;
+    readonly?: boolean;
+    prefixIcon?: import("react").ReactElement;
+    footer?: import("@snack-uikit/list").DroplistProps["footer"];
+    widthStrategy?: import("@snack-uikit/list").DroplistProps["widthStrategy"];
+    search?: import("./types").SearchState;
+    autocomplete?: boolean;
+    addOptionByEnter?: boolean;
+    open?: boolean;
     onOpenChange?(open: boolean): void;
-    selectedOptionFormatter?: SelectedOptionFormatter | undefined;
+    selectedOptionFormatter?: SelectedOptionFormatter;
 } & Pick<import("@snack-uikit/list").DroplistProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -1,25 +1,24 @@
-/// <reference types="react" />
 import { SelectedOptionFormatter } from './types';
 export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
-    loading?: boolean | undefined;
+    loading?: boolean;
 } & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & {
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop?: import("./types").OptionProps[] | undefined;
-    pinBottom?: import("./types").OptionProps[] | undefined;
-    searchable?: boolean | undefined;
-    showCopyButton?: boolean | undefined;
-    showClearButton?: boolean | undefined;
-    readonly?: boolean | undefined;
-    prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    footer?: import("react").ReactNode;
-    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
-    search?: import("./types").SearchState | undefined;
-    autocomplete?: boolean | undefined;
-    addOptionByEnter?: boolean | undefined;
-    open?: boolean | undefined;
+    pinTop?: import("./types").OptionProps[];
+    pinBottom?: import("./types").OptionProps[];
+    searchable?: boolean;
+    showCopyButton?: boolean;
+    showClearButton?: boolean;
+    readonly?: boolean;
+    prefixIcon?: import("react").ReactElement;
+    footer?: import("@snack-uikit/list").DroplistProps["footer"];
+    widthStrategy?: import("@snack-uikit/list").DroplistProps["widthStrategy"];
+    search?: import("./types").SearchState;
+    autocomplete?: boolean;
+    addOptionByEnter?: boolean;
+    open?: boolean;
     onOpenChange?(open: boolean): void;
-    selectedOptionFormatter?: SelectedOptionFormatter | undefined;
+    selectedOptionFormatter?: SelectedOptionFormatter;
 } & Pick<import("@snack-uikit/list").DroplistProps, "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/hooks.d.ts

@@ -25,9 +25,9 @@ export declare function useSearchInput({ value, onChange, defaultValue, selected
     selectedOptionFormatter: SelectedOptionFormatter;
 }): {
     inputValue: string;
-    setInputValue: (value: any, ...args: any[]) => any;
+    setInputValue: (value: any, ...args: any[]) => ReturnType<Handler> | void;
     prevInputValue: import("react").MutableRefObject<string>;
-    onInputValueChange: (value: any, ...args: any[]) => any;
+    onInputValueChange: (value: any, ...args: any[]) => ReturnType<Handler> | void;
     updateInputValue: (selectedItem?: ItemWithId) => void;
 };
 export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWithId) => (e?: MouseEvent<HTMLButtonElement>) => void;

package/dist/components/FieldSelect/utils/getArrowIcon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from '@snack-uikit/input-private';
 export declare function getArrowIcon({ size, open }: {
     size: Size;

package/dist/components/FieldSelect/utils/updateItems.d.ts

@@ -24,7 +24,7 @@ export declare function updateMultipleItems({ options, value, selectedItems, }:
 }): {
     selectedItems: undefined;
     items: (import("@snack-uikit/list/dist/components/Items").Item & {
-        appearance?: import("@snack-uikit/tag/dist/types").Appearance | undefined;
+        appearance?: import("@snack-uikit/tag").TagProps["appearance"];
     })[];
 } | {
     selectedItems: ItemWithId[];

package/dist/components/FieldSlider/FieldSlider.d.ts

@@ -16,6 +16,6 @@ type FieldSliderOwnProps = {
 };
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
 export declare const FieldSlider: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & FieldSliderOwnProps & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur"> & Pick<SliderComponentProps, "onChange" | "value" | "range" | "tipFormatter"> & Required<Pick<SliderComponentProps, "max" | "min" | "step" | "marks">> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldSlider/FieldSlider.js

@@ -14,7 +14,7 @@ import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
-import { extractSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useEventHandler } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
@@ -113,7 +113,10 @@ export const FieldSlider = forwardRef((_a, ref) => {
         const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
         handleChange(mark);
     };
-    const handleTextValueChange = () => {
+    const handleTextValueChange = useEventHandler(() => {
+        if (range) {
+            return;
+        }
         const parsedValue = parseInt(textFieldInputValue);
         const actualMinByMark = parseInt(String(getMarkValue(min)));
         const actualMin = Number.isNaN(actualMinByMark) ? min : actualMinByMark;
@@ -127,7 +130,7 @@ export const FieldSlider = forwardRef((_a, ref) => {
         else {
             handleNonEqualMarksSliderChange(textFieldNumValue);
         }
-    };
+    });
     const onTextFieldBlur = (e) => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
         handleTextValueChange();
@@ -142,8 +145,6 @@ export const FieldSlider = forwardRef((_a, ref) => {
     }, [value, textInputFormatter]);
     useEffect(() => {
         handleTextValueChange();
-        // update value only when marks, min or max are changed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [marks, min, max]);
+    }, [marks, min, max, handleTextValueChange]);
     return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, postfix: postfixIcon, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
 });

package/dist/components/FieldStepper/FieldStepper.d.ts

@@ -16,6 +16,6 @@ type FieldStepperOwnProps = {
 };
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
 export declare const FieldStepper: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & FieldStepperOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldText/FieldText.d.ts

@@ -19,6 +19,6 @@ type FieldTextOwnProps = {
 };
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldTextArea/FieldTextArea.d.ts

@@ -25,6 +25,6 @@ type FieldTextAreaOwnProps = {
 };
 export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
 export declare const FieldTextArea: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & FieldTextAreaOwnProps & Pick<Partial<TextAreaProps>, "value"> & Pick<TextAreaProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/hooks/useValueControl.d.ts

@@ -3,5 +3,5 @@ type UseValueControl<TValue> = {
     onChange?(value: TValue): void;
     defaultValue?: TValue;
 };
-export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => any];
+export declare function useValueControl<TValue>({ value, onChange, defaultValue }: UseValueControl<TValue>): readonly [TValue | undefined, (value: any, ...args: any[]) => ReturnType<import("uncontrollable").Handler> | void];
 export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.23.3",
+  "version": "0.23.5-preview-b0cb52bd.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,7 +37,7 @@
     "@snack-uikit/dropdown": "0.2.4",
     "@snack-uikit/icons": "0.22.0",
     "@snack-uikit/input-private": "3.1.4",
-    "@snack-uikit/list": "0.14.1",
+    "@snack-uikit/list": "0.14.2",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/slider": "0.1.15",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4c153b54a2902cf20883d85b4dc753344313c6cb"
+  "gitHead": "0c025d82c687785f267d371b4c50b36037bcc0cc"
 }

package/src/components/FieldSlider/FieldSlider.tsx

@@ -13,7 +13,7 @@ import {
 
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { Slider, SliderProps as SliderComponentProps } from '@snack-uikit/slider';
-import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, useEventHandler, WithSupportProps } from '@snack-uikit/utils';
 
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
@@ -212,7 +212,11 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       handleChange(mark);
     };
 
-    const handleTextValueChange = () => {
+    const handleTextValueChange = useEventHandler(() => {
+      if (range) {
+        return;
+      }
+
       const parsedValue = parseInt(textFieldInputValue);
       const actualMinByMark = parseInt(String(getMarkValue(min)));
       const actualMin = Number.isNaN(actualMinByMark) ? min : actualMinByMark;
@@ -228,7 +232,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       } else {
         handleNonEqualMarksSliderChange(textFieldNumValue);
       }
-    };
+    });
 
     const onTextFieldBlur = (e: FocusEvent<HTMLInputElement, Element>) => {
       onBlur?.(e);
@@ -247,9 +251,7 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
 
     useEffect(() => {
       handleTextValueChange();
-      // update value only when marks, min or max are changed
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [marks, min, max]);
+    }, [marks, min, max, handleTextValueChange]);
 
     return (
       <FieldDecorator