@snack-uikit/fields 0.28.0 → 0.29.0

package/src/components/FieldText/FieldText.tsx

@@ -1,14 +1,16 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, ReactElement, useMemo, useRef } from 'react';
+import { forwardRef, ReactElement, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 
 import { InputPrivate, InputPrivateProps, SIZE, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useCopyButton, useValueControl } from '../../hooks';
+import { useCopyButton, usePostfix, usePostfixButton, usePrefix, usePrefixButton, useValueControl } from '../../hooks';
+import { Button } from '../../types';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
+import { getContainerVariant } from './helpers';
 
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
   Pick<
@@ -43,6 +45,12 @@ type FieldTextOwnProps = {
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
+  /** Произвольный префикс для поля */
+  prefix?: ReactNode;
+  /** Произвольный постфикс для поля */
+  postfix?: ReactNode;
+  /** Кнопка действия внутри поля */
+  button?: Button;
 };
 
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
@@ -73,9 +81,12 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       showHintIcon,
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
-      prefixIcon,
       error,
       autoComplete,
+      prefixIcon,
+      prefix,
+      postfix,
+      button: buttonProp,
       ...rest
     },
     ref,
@@ -93,6 +104,25 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
     const fieldValidationState = getValidationState({ validationState, error });
 
+    const button: Button | undefined = useMemo(
+      () =>
+        buttonProp
+          ? {
+              ...buttonProp,
+              selection: {
+                ...buttonProp.selection,
+                onChange: value => {
+                  buttonProp.selection?.onChange?.(value);
+                  setTimeout(() => localRef.current?.focus(), 0);
+                },
+              },
+            }
+          : undefined,
+      [buttonProp],
+    );
+
+    const containerVariant = getContainerVariant({ button });
+
     const onClear = () => {
       onChange('');
 
@@ -102,10 +132,47 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
     };
 
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const copyButtonSettings = useCopyButton({
+      copyButtonRef,
+      showCopyButton,
+      size,
+      valueToCopy: value,
+      prefix: typeof prefix === 'string' ? prefix : undefined,
+      postfix: typeof postfix === 'string' ? postfix : undefined,
+    });
+
+    const [isButtonFocused, setIsButtonFocused] = useState(false);
+    const onButtonFocus = useCallback(() => setIsButtonFocused(true), []);
+    const onButtonBlur = useCallback(() => setIsButtonFocused(false), []);
+
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const prefixButtonSettings = usePrefixButton({
+      button,
+      prefixIcon,
+      size,
+      disabled,
+      readonly,
+      onFocus: onButtonFocus,
+      onBlur: onButtonBlur,
+    });
+
+    const postfixSettings = usePostfix({ postfix, disabled });
+    const postfixButtonSettings = usePostfixButton({
+      button,
+      size,
+      disabled,
+      readonly,
+      onFocus: onButtonFocus,
+      onBlur: onButtonBlur,
+    });
+
+    const { postfixButtons, prefixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
       inputRef: localRef,
-      buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+      postfixButtons: useMemo(
+        () => [clearButtonSettings, copyButtonSettings, postfixSettings, postfixButtonSettings],
+        [clearButtonSettings, copyButtonSettings, postfixSettings, postfixButtonSettings],
+      ),
+      prefixButtons: useMemo(() => [prefixButtonSettings, prefixSettings], [prefixButtonSettings, prefixSettings]),
       readonly,
       submitKeys: ['Enter', 'Space', 'Tab'],
     });
@@ -134,10 +201,11 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
           validationState={fieldValidationState}
           disabled={disabled}
           readonly={readonly}
-          variant={CONTAINER_VARIANT.SingleLine}
+          variant={containerVariant}
           inputRef={localRef}
-          prefix={prefixIcon}
-          postfix={buttons}
+          prefix={prefixButtons}
+          postfix={postfixButtons}
+          disableFocus={isButtonFocused}
         >
           <InputPrivate
             ref={mergeRefs(ref, localRef)}

package/src/components/FieldText/helpers.tsx

@@ -0,0 +1,13 @@
+import { Button, ContainerVariant } from '../../types';
+
+export function getContainerVariant({ button }: { button?: Button }): ContainerVariant {
+  if (button?.variant === 'before') {
+    return 'single-line-container-button-before';
+  }
+
+  if (button?.variant === 'after') {
+    return 'single-line-container-button-after';
+  }
+
+  return 'single-line-container';
+}

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -111,9 +111,12 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
 
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
       inputRef: localRef,
-      buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+      postfixButtons: useMemo(
+        () => [clearButtonSettings, copyButtonSettings],
+        [clearButtonSettings, copyButtonSettings],
+      ),
       readonly,
       submitKeys: ['Enter', 'Space', 'Tab'],
     });
@@ -147,7 +150,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
           variant={CONTAINER_VARIANT.MultiLine}
           style={{ '--max-rows': maxRows, '--min-rows': minRows }}
           inputRef={localRef}
-          postfix={<span className={styles.postfix}>{buttons}</span>}
+          postfix={<span className={styles.postfix}>{postfixButtons}</span>}
         >
           <Scroll
             className={styles.scrollContainer}

package/src/constants.ts

@@ -7,5 +7,12 @@ export const VALIDATION_STATE = {
 
 export const CONTAINER_VARIANT = {
   SingleLine: 'single-line-container',
+  SingleLineButtonBefore: 'single-line-container-button-before',
+  SingleLineButtonAfter: 'single-line-container-button-after',
   MultiLine: 'multi-line-container',
 } as const;
+
+export const BUTTON_VARIANT = {
+  Before: 'before',
+  After: 'after',
+} as const;

package/src/helperComponents/ButtonField/ButtonField.tsx

@@ -0,0 +1,73 @@
+import cn from 'classnames';
+import { FocusEventHandler, forwardRef, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+
+import { Divider } from '@snack-uikit/divider';
+import { Size } from '@snack-uikit/input-private';
+
+import { getArrowIcon } from '../../components/FieldSelect/utils';
+import { ButtonVariant } from '../../types';
+import styles from './styles.module.scss';
+
+export type ButtonFieldProps = {
+  size: Size;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onFocus?: FocusEventHandler<HTMLButtonElement>;
+  onBlur?: FocusEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  disabled?: boolean;
+  hasArrow?: boolean;
+  arrowOpen?: boolean;
+  content?: ReactNode;
+  variant: ButtonVariant;
+  className?: string;
+};
+
+export const ButtonField = forwardRef<HTMLButtonElement, ButtonFieldProps>(
+  (
+    {
+      size,
+      tabIndex = 0,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onBlur,
+      disabled,
+      content,
+      hasArrow = false,
+      arrowOpen = false,
+      variant,
+      className,
+    },
+    ref,
+  ) => {
+    const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open: arrowOpen });
+
+    return (
+      <button
+        className={cn(className, styles.buttonField)}
+        data-size={size}
+        data-variant={variant}
+        data-arrow-open={arrowOpen || undefined}
+        data-disabled={disabled || undefined}
+        onClick={disabled ? undefined : onClick}
+        onKeyDown={disabled ? undefined : onKeyDown}
+        onFocus={disabled ? undefined : onFocus}
+        onBlur={disabled ? undefined : onBlur}
+        data-test-id='button-field'
+        ref={ref}
+        tabIndex={tabIndex}
+        type='button'
+        disabled={disabled}
+      >
+        {variant === 'after' && <Divider orientation='vertical' className={styles.divider} />}
+
+        <div className={styles.content}>{content}</div>
+
+        {hasArrow && <ArrowIcon size={arrowIconSize} />}
+
+        {variant === 'before' && <Divider orientation='vertical' className={styles.divider} />}
+      </button>
+    );
+  },
+);

package/src/helperComponents/ButtonField/index.ts

@@ -0,0 +1 @@
+export * from './ButtonField';

package/src/helperComponents/ButtonField/styles.module.scss

@@ -0,0 +1,57 @@
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields";
+
+$variants: 'before', 'after';
+$sizes: 's', 'm', 'l';
+
+.buttonField {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  margin: 0;
+  padding: 0;
+
+  color: $sys-neutral-text-support;
+
+  background-color: transparent;
+  border: none;
+
+  @each $variant in $variants {
+    &[data-variant='#{$variant}'] {
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          @include composite-var($fields, 'button-field', $variant, $size);
+        }
+      }
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
+  }
+
+  &:focus-visible, &[data-arrow-open] {
+    @include outline-var($container-focused-s);
+
+    background: color-on-background-with-opacity($sys-neutral-accent-default, $sys-neutral-background1-level, $opacity-a008);
+    outline-color: $sys-primary-accent-default;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: $opacity-a056;
+    background-color: transparent;
+  }
+}
+
+.divider {
+  align-self: stretch;
+  height: auto;
+}
+
+.content {
+  display: inline-flex;
+}

package/src/helperComponents/ButtonFieldList/ButtonFieldList.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Droplist } from '@snack-uikit/list';
+
+import { NativeDroplistProps } from '../../types';
+import { ButtonField, ButtonFieldProps } from '../ButtonField';
+import { getPlacement } from './helpers';
+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) => {
+    const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
+    const placement = getPlacement(rest);
+
+    return (
+      <Droplist
+        data-test-id='button-field-list'
+        items={items}
+        selection={{ mode: 'single', ...selection }}
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        closeDroplistOnItemClick={true}
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        triggerElemRef={ref}
+        size={rest.size}
+        placement={placement}
+      >
+        <ButtonField {...rest} hasArrow={true} arrowOpen={isOpen} className={styles.triggerClassName} />
+      </Droplist>
+    );
+  },
+);

package/src/helperComponents/ButtonFieldList/helpers.tsx

@@ -0,0 +1,13 @@
+import { DroplistProps } from '@snack-uikit/list';
+
+import { ButtonVariant } from '../../types';
+
+export function getPlacement({ variant }: { variant?: ButtonVariant }): DroplistProps['placement'] {
+  if (variant === 'before') {
+    return 'bottom-start';
+  }
+
+  if (variant === 'after') {
+    return 'bottom-end';
+  }
+}

package/src/helperComponents/ButtonFieldList/index.ts

@@ -0,0 +1 @@
+export * from './ButtonFieldList';

package/src/helperComponents/ButtonFieldList/styles.module.scss

@@ -0,0 +1,5 @@
+@import "@snack-uikit/figma-tokens/build/scss/styles-theme-variables";
+
+.triggerClassName {
+  --offset: #{$space-drop-list-drop-offset};
+}

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, RefObject } from 'react';
+import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from 'react';
 
 import { Size } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
@@ -17,10 +17,11 @@ export type FieldContainerPrivateProps = WithSupportProps<{
   disabled: boolean;
   readonly: boolean;
   focused?: boolean;
+  disableFocus?: boolean;
   selectable?: boolean;
   style?: CSSProperties;
-  prefix?: ReactElement;
-  postfix?: ReactElement;
+  prefix?: ReactNode;
+  postfix?: ReactNode;
   inputRef: RefObject<HTMLElement>;
 }>;
 
@@ -33,6 +34,7 @@ export function FieldContainerPrivate({
   disabled,
   readonly,
   focused,
+  disableFocus,
   selectable,
   style,
   prefix,
@@ -57,6 +59,7 @@ export function FieldContainerPrivate({
       data-disabled={disabled || undefined}
       data-readonly={readonly || undefined}
       data-focused={focused || undefined}
+      data-disable-focus={disableFocus || undefined}
       data-selectable={selectable || undefined}
       data-test-id='field-container-private'
       onClick={handleContainerClick}

package/src/helperComponents/FieldContainerPrivate/styles.module.scss

@@ -4,7 +4,7 @@
 /* stylelint-disable no-descending-specificity */
 
 $sizes: 's', 'm', 'l';
-$variants: 'single-line-container', 'multi-line-container';
+$variants: 'single-line-container', 'single-line-container-button-before', 'single-line-container-button-after', 'multi-line-container';
 
 @mixin validationState($state, $rainbowColor, $bgDefault) {
   &[data-validation='#{$state}'] {
@@ -16,7 +16,7 @@ $variants: 'single-line-container', 'multi-line-container';
       border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
     }
 
-    &:not([data-readonly]) {
+    &:not([data-readonly]):not([data-disable-focus]) {
       &:focus-within,
       &[data-focused] {
         &:not([data-disabled]) {
@@ -92,13 +92,15 @@ $variants: 'single-line-container', 'multi-line-container';
       border-color: simple-var($sys-neutral-decor-disabled);
     }
 
-    &:focus-within,
-    &[data-focused] {
-      @include outline-var($container-focused-m);
+    &:not([data-disable-focus]) {
+      &:focus-within,
+      &[data-focused] {
+        @include outline-var($container-focused-m);
 
-      background-color: simple-var($sys-neutral-decor-disabled);
-      border-color: simple-var($sys-neutral-decor-disabled);
-      outline: none;
+        background-color: simple-var($sys-neutral-decor-disabled);
+        border-color: simple-var($sys-neutral-decor-disabled);
+        outline: none;
+      }
     }
   }
 
@@ -126,6 +128,9 @@ $variants: 'single-line-container', 'multi-line-container';
 .prefix {
   display: inline-flex;
   flex-shrink: 0;
+  gap: $space-fields-postfix-gap;
+  align-items: center;
+
   color: $sys-neutral-text-disabled;
 }
 
@@ -133,4 +138,5 @@ $variants: 'single-line-container', 'multi-line-container';
   display: inline-flex;
   flex-shrink: 0;
   gap: $space-fields-postfix-gap;
+  align-items: center;
 }

package/src/helperComponents/index.ts

@@ -1,4 +1,6 @@
 export * from './ButtonCopyValue';
+export * from './ButtonField';
+export * from './ButtonFieldList';
 export * from './ButtonHideValue';
 export * from './FieldContainerPrivate';
 export * from './TextArea';

package/src/hooks/index.ts

@@ -1,3 +1,7 @@
 export * from './useCopyButton';
 export * from './useHideButton';
+export * from './usePostfix';
+export * from './usePostfixButton';
+export * from './usePrefix';
+export * from './usePrefixButton';
 export * from './useValueControl';

package/src/hooks/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+
+.prefix {
+  color: $sys-neutral-text-support;
+
+  &[data-disabled] {
+    opacity: $opacity-a056;
+  }
+}
+
+.postfix {
+  color: $sys-neutral-text-support;
+
+  &[data-disabled] {
+    opacity: $opacity-a056;
+  }
+}

package/src/hooks/useCopyButton.tsx

@@ -12,6 +12,8 @@ type UseCopyButtonProps = {
   size: Size;
   onValueRequest?(): AsyncValueRequest;
   disabled?: boolean;
+  prefix?: string;
+  postfix?: string;
 };
 
 export function useCopyButton({
@@ -21,22 +23,25 @@ export function useCopyButton({
   valueToCopy,
   onValueRequest,
   disabled,
+  prefix,
+  postfix,
 }: UseCopyButtonProps): ButtonProps {
   return useMemo(
     () => ({
       id: 'copy',
+      active: true,
       ref: copyButtonRef,
       show: showCopyButton,
       render: props => (
         <ButtonCopyValue
           {...props}
           size={BUTTON_SIZE_MAP[size]}
-          valueToCopy={valueToCopy}
+          valueToCopy={prefix + valueToCopy + postfix}
           onValueRequest={onValueRequest}
           disabled={disabled}
         />
       ),
     }),
-    [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy],
+    [copyButtonRef, disabled, onValueRequest, showCopyButton, size, valueToCopy, prefix, postfix],
   );
 }

package/src/hooks/useHideButton.tsx

@@ -27,6 +27,7 @@ export function useHideButton({
   return useMemo(
     () => ({
       id: 'hide',
+      active: true,
       ref: hideButtonRef,
       show: showHideButton,
       render: props => {

package/src/hooks/usePostfix.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useMemo } from 'react';
+
+import { InactiveItem } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+export function usePostfix({ postfix, disabled }: { postfix?: ReactNode; disabled?: boolean }): InactiveItem {
+  return useMemo(
+    () => ({
+      id: 'postfix',
+      active: false,
+      show: Boolean(postfix),
+      render: props => (
+        <div {...props} className={styles.postfix} data-test-id='field-postfix' data-disabled={disabled || undefined}>
+          {postfix}
+        </div>
+      ),
+    }),
+    [disabled, postfix],
+  );
+}

package/src/hooks/usePostfixButton.tsx

@@ -0,0 +1,74 @@
+import { ReactElement, useMemo, useRef } from 'react';
+
+import { ButtonProps, InactiveItem, Size } from '@snack-uikit/input-private';
+
+import { ButtonField, ButtonFieldList, ButtonFieldProps } from '../helperComponents';
+import { Button } from '../types';
+
+export function usePostfixButton({
+  button,
+  size,
+  postfixIcon,
+  disabled,
+  readonly,
+  onFocus,
+  onBlur,
+}: {
+  button?: Button;
+  size: Size;
+  postfixIcon?: ReactElement;
+  disabled?: boolean;
+  readonly?: boolean;
+} & Pick<ButtonFieldProps, 'onFocus' | 'onBlur'>): ButtonProps {
+  const buttonListRef = useRef<HTMLButtonElement>(null);
+
+  const postfixIconProps: InactiveItem = useMemo(
+    () => ({
+      id: 'postfixIcon',
+      active: false,
+      show: Boolean(postfixIcon && !button),
+      render: () => <>{postfixIcon}</>,
+    }),
+    [button, postfixIcon],
+  );
+
+  const postfixButtonProps: InactiveItem = useMemo(
+    () => ({
+      id: 'postfixButton',
+      active: false,
+      show: Boolean(button && button.variant === 'after'),
+      render: renderProps => {
+        const buttonProps: ButtonFieldProps = {
+          ...renderProps,
+          variant: 'after',
+          size,
+          content: button?.content,
+          disabled: disabled || readonly,
+          onFocus,
+          onBlur,
+        };
+
+        if (button?.items) {
+          return (
+            <ButtonFieldList
+              {...buttonProps}
+              ref={buttonListRef}
+              onClick={() => {
+                setTimeout(() => buttonListRef.current?.focus(), 0);
+              }}
+              items={button.items}
+              selection={button.selection}
+              open={button.open}
+              onOpenChange={button.onOpenChange}
+            />
+          );
+        }
+
+        return <ButtonField {...buttonProps} />;
+      },
+    }),
+    [button, size, disabled, readonly, onFocus, onBlur],
+  );
+
+  return button ? postfixButtonProps : postfixIconProps;
+}

package/src/hooks/usePrefix.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useMemo } from 'react';
+
+import { InactiveItem } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+export function usePrefix({ prefix, disabled }: { prefix?: ReactNode; disabled?: boolean }): InactiveItem {
+  return useMemo(
+    () => ({
+      id: 'prefix',
+      active: false,
+      show: Boolean(prefix),
+      render: props => (
+        <div {...props} data-test-id='field-prefix' className={styles.prefix} data-disabled={disabled || undefined}>
+          {prefix}
+        </div>
+      ),
+    }),
+    [disabled, prefix],
+  );
+}