@snack-uikit/fields 0.19.3-preview-34ffedb5.0 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.20.0 (2024-04-26)
+
+
+### Bug Fixes
+
+* **FF-4714:** remove nonexistent classname ([e45ee61](https://github.com/cloud-ru-tech/snack-uikit/commit/e45ee611a4c0ed5038dc4d7e0058c7719232d747))
+
+
+### Features
+
+* **FF-4714:** add asyncValueGetter property ([2267477](https://github.com/cloud-ru-tech/snack-uikit/commit/22674774d3845c3cc77369b153afb3c9e13e5e0d))
+
+
+
+
+
 ## 0.19.2 (2024-04-25)
 
 

package/README.md

@@ -252,7 +252,7 @@ const [isOpen, setIsOpen] = useState(false);
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| onDataRequest | `() => Promise<void>` | - | Свойство позволяет грузить данные в поле по требованию |
+| asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
 | value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | disabled | `boolean` | - | Является ли поле деактивированным |

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

@@ -16,7 +16,7 @@ type FieldSecureOwnProps = {
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
     /** Свойство позволяет грузить данные в поле по требованию */
-    onDataRequest?(): Promise<void>;
+    asyncValueGetter?(): Promise<string>;
 };
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{

package/dist/components/FieldSecure/FieldSecure.js

@@ -30,7 +30,7 @@ import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldSecure = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, onDataRequest } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error", "onDataRequest"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, asyncValueGetter } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter"]);
     const localRef = useRef(null);
     const copyButtonRef = useRef(null);
     const hideButtonRef = useRef(null);
@@ -49,26 +49,34 @@ export const FieldSecure = forwardRef((_a, ref) => {
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
     const fieldValidationState = getValidationState({ validationState, error });
-    const handleDataRequest = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!isDataRequested && onDataRequest) {
+    const getAsyncValue = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isDataRequested && asyncValueGetter) {
             setIsLoading(true);
             try {
-                yield onDataRequest();
+                const asyncValue = yield asyncValueGetter();
                 setIsDataRequested(true);
-                return true;
+                onChange(asyncValue);
+                return {
+                    success: true,
+                    value: asyncValue,
+                };
             }
             catch (e) {
-                return false;
+                return {
+                    success: false,
+                };
             }
             finally {
                 setIsLoading(false);
             }
         }
-        return true;
+        return {
+            success: true,
+        };
     });
     const toggleHidden = () => {
-        handleDataRequest().then(isSuccess => {
-            if (isSuccess) {
+        getAsyncValue().then(({ success }) => {
+            if (success) {
                 setHidden(!hidden);
                 if (!readonly) {
                     runAfterRerender(() => {
@@ -85,7 +93,7 @@ export const FieldSecure = forwardRef((_a, ref) => {
         showCopyButton,
         size,
         valueToCopy: value,
-        onDataRequest: handleDataRequest,
+        onValueRequest: getAsyncValue,
         disabled: isLoading,
     });
     const hideButtonSettings = useHideButton({

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -134,7 +134,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                                             minWidth: value
                                                 ? Math.min((_b = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : BASE_MIN_WIDTH, (_d = (_c = inputPlugRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : BASE_MIN_WIDTH)
                                                 : '100%',
-                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn(styles.input, {
+                                        }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : '', readonly: !searchable || readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
                                                 [styles.readonlyCursor]: !searchable,
                                             }) }) })] }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
             } })) })));

package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.d.ts

@@ -1,12 +1,13 @@
 import { KeyboardEventHandler, MouseEventHandler } from 'react';
 import { ButtonSize } from '@snack-uikit/input-private';
+import { AsyncValueRequest } from '../../types';
 type ButtonCopyValueProps = {
     size: ButtonSize;
     valueToCopy?: string;
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     tabIndex?: number;
-    onDataRequest?(): Promise<boolean>;
+    onValueRequest?(): AsyncValueRequest;
     disabled?: boolean;
 };
 export declare const ButtonCopyValue: import("react").ForwardRefExoticComponent<ButtonCopyValueProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.js

@@ -3,29 +3,29 @@ import copyToClipboard from 'copy-to-clipboard';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { getIcon } from './helpers';
 import styles from './styles.module.css';
-export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onDataRequest, disabled }, ref) => {
+export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onValueRequest, disabled }, ref) => {
     const [isChecked, setIsChecked] = useState(false);
     const timerId = useRef();
-    const openTooltip = () => setIsChecked(true);
     const closeTooltip = () => setIsChecked(false);
+    const handleCopy = (event, asyncValue) => {
+        const value = asyncValue || valueToCopy;
+        value && copyToClipboard(value, { format: 'text/plain' });
+        setIsChecked(true);
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeTooltip, 2000);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
     const handleClick = event => {
-        const handleCopy = () => {
-            valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
-            openTooltip();
-            clearTimeout(timerId.current);
-            timerId.current = setTimeout(closeTooltip, 2000);
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        };
         event.stopPropagation();
-        if (onDataRequest) {
-            onDataRequest().then(isSuccess => {
-                if (isSuccess) {
-                    handleCopy();
+        if (onValueRequest) {
+            onValueRequest().then(({ success, value }) => {
+                if (success) {
+                    handleCopy(event, value);
                 }
             });
         }
         else {
-            handleCopy();
+            handleCopy(event);
         }
     };
     useEffect(() => () => {

package/dist/hooks/useCopyButton.d.ts

@@ -1,12 +1,13 @@
 import { RefObject } from 'react';
 import { ButtonProps, Size } from '@snack-uikit/input-private';
+import { AsyncValueRequest } from '../types';
 type UseCopyButtonProps = {
     copyButtonRef: RefObject<HTMLButtonElement>;
     showCopyButton: boolean;
     valueToCopy: string;
     size: Size;
-    onDataRequest?(): Promise<boolean>;
+    onValueRequest?(): AsyncValueRequest;
     disabled?: boolean;
 };
-export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onDataRequest, disabled, }: UseCopyButtonProps): ButtonProps;
+export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, }: UseCopyButtonProps): ButtonProps;
 export {};

package/dist/hooks/useCopyButton.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
 import { ButtonCopyValue } from '../helperComponents';
-export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onDataRequest, disabled, }) {
+export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onValueRequest, disabled, }) {
     return useMemo(() => ({
         id: 'copy',
         ref: copyButtonRef,
         show: showCopyButton,
-        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: valueToCopy, onDataRequest: onDataRequest, disabled: disabled }))),
-    }), [copyButtonRef, disabled, onDataRequest, showCopyButton, size, valueToCopy]);
+        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: valueToCopy, onValueRequest: onValueRequest, disabled: disabled }))),
+    }), [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy]);
 }

package/dist/types.d.ts

@@ -2,3 +2,7 @@ import { ValueOf } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
+export type AsyncValueRequest = Promise<{
+    success: boolean;
+    value?: string;
+}>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.19.3-preview-34ffedb5.0",
+  "version": "0.20.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "7c21433a0f290c78176650374b137e2abafced96"
+  "gitHead": "b6f9b6606011158a035e9e49ef8df194e74bf070"
 }

package/src/components/FieldSecure/FieldSecure.tsx

@@ -15,6 +15,7 @@ import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
+import { AsyncValueRequest } from '../../types';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 
@@ -47,7 +48,7 @@ type FieldSecureOwnProps = {
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
   /** Свойство позволяет грузить данные в поле по требованию */
-  onDataRequest?(): Promise<void>;
+  asyncValueGetter?(): Promise<string>;
 };
 
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
@@ -80,7 +81,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       validationState = VALIDATION_STATE.Default,
       prefixIcon,
       error,
-      onDataRequest,
+      asyncValueGetter,
       ...rest
     },
     ref,
@@ -88,44 +89,58 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
     const localRef = useRef<HTMLInputElement>(null);
     const copyButtonRef = useRef<HTMLButtonElement>(null);
     const hideButtonRef = useRef<HTMLButtonElement>(null);
+
     const [isDataRequested, setIsDataRequested] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+
     const [value = '', onChange] = useValueControl<string>({
       value: valueProp,
       defaultValue: '',
       onChange: onChangeProp,
     });
+
     const [hidden = true, setHidden] = useValueControl<boolean>({
       value: hiddenProp,
       defaultValue: true,
       onChange: onHiddenChange,
     });
+
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
 
     const fieldValidationState = getValidationState({ validationState, error });
 
-    const handleDataRequest = async (): Promise<boolean> => {
-      if (!isDataRequested && onDataRequest) {
+    const getAsyncValue = async (): AsyncValueRequest => {
+      if (!isDataRequested && asyncValueGetter) {
         setIsLoading(true);
 
         try {
-          await onDataRequest();
+          const asyncValue = await asyncValueGetter();
+
           setIsDataRequested(true);
-          return true;
+          onChange(asyncValue);
+
+          return {
+            success: true,
+            value: asyncValue,
+          };
         } catch (e) {
-          return false;
+          return {
+            success: false,
+          };
         } finally {
           setIsLoading(false);
         }
       }
 
-      return true;
+      return {
+        success: true,
+      };
     };
 
     const toggleHidden = () => {
-      handleDataRequest().then(isSuccess => {
-        if (isSuccess) {
+      getAsyncValue().then(({ success }) => {
+        if (success) {
           setHidden(!hidden);
 
           if (!readonly) {
@@ -143,9 +158,10 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       showCopyButton,
       size,
       valueToCopy: value,
-      onDataRequest: handleDataRequest,
+      onValueRequest: getAsyncValue,
       disabled: isLoading,
     });
+
     const hideButtonSettings = useHideButton({
       hideButtonRef,
       showHideButton,
@@ -154,6 +170,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       hidden,
       disabled: disabled || isLoading,
     });
+
     const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
       inputRef: localRef,
       buttons: useMemo(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -242,7 +242,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
                       data-test-id='field-select__input'
                       onKeyDown={handleOnKeyDown(onKeyDown)}
                       onBlur={handleBlur}
-                      className={cn(styles.input, {
+                      className={cn({
                         [styles.readonlyCursor]: !searchable,
                       })}
                     />

package/src/helperComponents/ButtonCopyValue/ButtonCopyValue.tsx

@@ -1,8 +1,9 @@
 import copyToClipboard from 'copy-to-clipboard';
-import { forwardRef, KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { forwardRef, KeyboardEventHandler, MouseEvent, MouseEventHandler, useEffect, useRef, useState } from 'react';
 
 import { ButtonSize } from '@snack-uikit/input-private';
 
+import { AsyncValueRequest } from '../../types';
 import { getIcon } from './helpers';
 import styles from './styles.module.scss';
 
@@ -12,35 +13,41 @@ type ButtonCopyValueProps = {
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   tabIndex?: number;
-  onDataRequest?(): Promise<boolean>;
+  onValueRequest?(): AsyncValueRequest;
   disabled?: boolean;
 };
+
 export const ButtonCopyValue = forwardRef<HTMLButtonElement, ButtonCopyValueProps>(
-  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onDataRequest, disabled }, ref) => {
+  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onValueRequest, disabled }, ref) => {
     const [isChecked, setIsChecked] = useState(false);
     const timerId = useRef<ReturnType<typeof setTimeout>>();
-    const openTooltip = () => setIsChecked(true);
+
     const closeTooltip = () => setIsChecked(false);
 
-    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
-      const handleCopy = () => {
-        valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
-        openTooltip();
-        clearTimeout(timerId.current);
-        timerId.current = setTimeout(closeTooltip, 2000);
-        onClick?.(event);
-      };
+    const handleCopy = (event: MouseEvent<HTMLButtonElement>, asyncValue?: string) => {
+      const value = asyncValue || valueToCopy;
+
+      value && copyToClipboard(value, { format: 'text/plain' });
 
+      setIsChecked(true);
+
+      clearTimeout(timerId.current);
+      timerId.current = setTimeout(closeTooltip, 2000);
+
+      onClick?.(event);
+    };
+
+    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
       event.stopPropagation();
 
-      if (onDataRequest) {
-        onDataRequest().then(isSuccess => {
-          if (isSuccess) {
-            handleCopy();
+      if (onValueRequest) {
+        onValueRequest().then(({ success, value }) => {
+          if (success) {
+            handleCopy(event, value);
           }
         });
       } else {
-        handleCopy();
+        handleCopy(event);
       }
     };
 

package/src/hooks/useCopyButton.tsx

@@ -3,13 +3,14 @@ import { RefObject, useMemo } from 'react';
 import { BUTTON_SIZE_MAP, ButtonProps, Size } from '@snack-uikit/input-private';
 
 import { ButtonCopyValue } from '../helperComponents';
+import { AsyncValueRequest } from '../types';
 
 type UseCopyButtonProps = {
   copyButtonRef: RefObject<HTMLButtonElement>;
   showCopyButton: boolean;
   valueToCopy: string;
   size: Size;
-  onDataRequest?(): Promise<boolean>;
+  onValueRequest?(): AsyncValueRequest;
   disabled?: boolean;
 };
 
@@ -18,7 +19,7 @@ export function useCopyButton({
   showCopyButton,
   size,
   valueToCopy,
-  onDataRequest,
+  onValueRequest,
   disabled,
 }: UseCopyButtonProps): ButtonProps {
   return useMemo(
@@ -31,11 +32,11 @@ export function useCopyButton({
           {...props}
           size={BUTTON_SIZE_MAP[size]}
           valueToCopy={valueToCopy}
-          onDataRequest={onDataRequest}
+          onValueRequest={onValueRequest}
           disabled={disabled}
         />
       ),
     }),
-    [copyButtonRef, disabled, onDataRequest, showCopyButton, size, valueToCopy],
+    [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy],
   );
 }

package/src/types.ts

@@ -5,3 +5,5 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
+
+export type AsyncValueRequest = Promise<{ success: boolean; value?: string }>;