@snack-uikit/fields 0.8.3-preview-85c5f47b.0

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -0,0 +1,171 @@
+import mergeRefs from 'merge-refs';
+import { ChangeEvent, forwardRef, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Size, useButtonNavigation, useClearButton } from '@snack-uikit/input-private';
+import { Scroll } from '@snack-uikit/scroll';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ContainerVariant, ValidationState } from '../../constants';
+import { FieldContainerPrivate, TextArea, TextAreaProps } from '../../helperComponents';
+import { useCopyButton } from '../../hooks';
+import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
+import styles from './styles.module.scss';
+
+type InputProps = Pick<Partial<TextAreaProps>, 'value'> &
+  Pick<TextAreaProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+
+type WrapperProps = Pick<
+  FieldDecoratorProps,
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'hint'
+  | 'size'
+  | 'validationState'
+  | 'showHintIcon'
+  | 'labelTooltipPlacement'
+>;
+
+type FieldTextAreaOwnProps = {
+  /** Максимальное кол-во строк, до которого размер поля может быть увеличен */
+  maxRows?: number;
+  /** Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) */
+  resizable?: boolean;
+  /** Колбек смены значения */
+  onChange?(value: string, e?: ChangeEvent<HTMLTextAreaElement>): void;
+  /** Показывать ли кнопку Копировать для поля (актуально только для `readonly = true`) */
+  showCopyButton?: boolean;
+  /** Можно ли вводить больше разрешённого кол-ва символов */
+  allowMoreThanMaxLength?: boolean;
+};
+
+export type FieldTextAreaProps = WithSupportProps<FieldTextAreaOwnProps & InputProps & WrapperProps>;
+
+const ForwardedFieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>(
+  (
+    {
+      id,
+      name,
+      value: valueProp,
+      placeholder,
+      maxLength,
+      maxRows,
+      disabled = false,
+      resizable = false,
+      readonly = false,
+      showCopyButton: showCopyButtonProp = true,
+      allowMoreThanMaxLength = true,
+      showHintIcon,
+      onChange: onChangeProp,
+      onFocus,
+      onBlur,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      hint,
+      size = Size.S,
+      validationState = ValidationState.Default,
+      ...rest
+    },
+    ref,
+  ) => {
+    const localRef = useRef<HTMLTextAreaElement>(null);
+    const clearButtonRef = useRef<HTMLButtonElement>(null);
+    const copyButtonRef = useRef<HTMLButtonElement>(null);
+    const isResizable = !readonly && !disabled && resizable;
+    const [value, onChange] = useUncontrolledProp(valueProp, '', onChangeProp);
+    const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
+    const showClearButton = Boolean(value) && !disabled && !readonly;
+
+    const onClear = () => {
+      onChange('');
+
+      if (required) {
+        localRef.current?.focus();
+      }
+    };
+
+    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
+    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
+    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+      inputRef: localRef,
+      buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab'],
+    });
+
+    return (
+      <FieldDecorator
+        className={className}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
+        labelFor={id}
+        required={required}
+        length={maxLength ? { max: maxLength, current: value.length } : undefined}
+        hint={hint}
+        disabled={disabled}
+        readonly={readonly}
+        showHintIcon={showHintIcon}
+        size={size}
+        validationState={validationState}
+        {...extractSupportProps(rest)}
+      >
+        <FieldContainerPrivate
+          className={styles.container}
+          size={size}
+          validationState={validationState}
+          disabled={disabled}
+          readonly={readonly}
+          data-resizable={isResizable || undefined}
+          variant={ContainerVariant.MultiLine}
+          style={{ '--max-rows': maxRows }}
+          inputRef={localRef}
+          postfix={<span className={styles.postfix}>{buttons}</span>}
+        >
+          <Scroll
+            className={styles.scrollContainer}
+            size={Scroll.sizes.S}
+            barHideStrategy={Scroll.barHideStrategies.Never}
+            resize={isResizable ? Scroll.resizes.Vertical : Scroll.resizes.None}
+            data-test-id='field-textarea__scroll-area'
+          >
+            <TextArea
+              className={styles.textarea}
+              data-size={size}
+              value={value}
+              onChange={onChange}
+              placeholder={placeholder}
+              disabled={disabled}
+              readonly={readonly}
+              id={id}
+              name={name}
+              ref={mergeRefs(ref, localRef)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onKeyDown={onInputKeyDown}
+              tabIndex={inputTabIndex}
+              maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
+              data-test-id='field-textarea__input'
+            />
+          </Scroll>
+        </FieldContainerPrivate>
+      </FieldDecorator>
+    );
+  },
+);
+
+export const FieldTextArea = ForwardedFieldTextArea as typeof ForwardedFieldTextArea & {
+  sizes: typeof Size;
+  validationStates: typeof ValidationState;
+  labelTooltipPlacements: typeof Tooltip.placements;
+};
+
+FieldTextArea.sizes = Size;
+FieldTextArea.validationStates = ValidationState;
+FieldTextArea.labelTooltipPlacements = Tooltip.placements;

package/src/components/FieldTextArea/index.ts

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

package/src/components/FieldTextArea/styles.module.scss

@@ -0,0 +1,41 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+
+$sizes: 's', 'm', 'l';
+$padding-right: (
+  's': $fields-buttons-s,
+  'm': $fields-buttons-m,
+  'l': $fields-buttons-m,
+);
+
+.container {
+  --max-rows: 1000;
+  --min-rows: 3;
+  --horizontal-scroll-bar-height: 4px;
+
+  .scrollContainer {
+    min-height: calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
+    max-height: calc(var(--max-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
+  }
+
+  &[data-resizable] .scrollContainer {
+    height: calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --row-height: #{simple-var($theme-variables, 'sans', 'body', $size, 'line-height')};
+
+      .textarea {
+        overflow: hidden;
+        padding-right: calc(simple-var($padding-right, $size, 'width') + simple-var($fields-scroll-bar-width, 'width'));
+      }
+
+      .postfix {
+        position: absolute;
+        top: simple-var($fields, 'multi-line-container', $size, 'padding-top');
+        right: calc(simple-var($fields, 'multi-line-container', $size, 'padding-right') + simple-var($fields-scroll-bar-width, 'width'));
+      }
+    }
+  }
+}
+

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './FieldDecorator';
+export * from './FieldText';
+export * from './FieldTextArea';
+export * from './FieldSecure';
+export * from './FieldDate';
+export * from './FieldSelect';

package/src/constants.ts

@@ -0,0 +1,11 @@
+export enum ValidationState {
+  Default = 'default',
+  Error = 'error',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export enum ContainerVariant {
+  SingleLine = 'single-line-container',
+  MultiLine = 'multi-line-container',
+}

package/src/helperComponents/ButtonCopyValue/ButtonCopyValue.tsx

@@ -0,0 +1,55 @@
+import copyToClipboard from 'copy-to-clipboard';
+import { forwardRef, KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { ButtonSize } from '@snack-uikit/input-private';
+
+import { getIcon } from './helpers';
+import styles from './styles.module.scss';
+
+type ButtonCopyValueProps = {
+  size: ButtonSize;
+  valueToCopy?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+};
+export const ButtonCopyValue = forwardRef<HTMLButtonElement, ButtonCopyValueProps>(
+  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick }, 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 => {
+      event.stopPropagation();
+      valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
+      openTooltip();
+      clearTimeout(timerId.current);
+      timerId.current = setTimeout(closeTooltip, 2000);
+      onClick?.(event);
+    };
+
+    useEffect(
+      () => () => {
+        closeTooltip();
+        clearTimeout(timerId.current);
+      },
+      [],
+    );
+
+    return (
+      <button
+        className={styles.buttonCopyValue}
+        data-size={size}
+        onClick={handleClick}
+        data-test-id='button-copy-value'
+        ref={ref}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
+        type='button'
+      >
+        {getIcon({ size, isChecked })}
+      </button>
+    );
+  },
+);

package/src/helperComponents/ButtonCopyValue/helpers.tsx

@@ -0,0 +1,19 @@
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+import { ButtonSize } from '@snack-uikit/input-private';
+
+type GetIconProps = {
+  size: ButtonSize;
+  isChecked: boolean;
+};
+
+export function getIcon({ size, isChecked }: GetIconProps) {
+  switch (size) {
+    case ButtonSize.S: {
+      return isChecked ? <CheckSVG size={16} /> : <CopySVG size={16} />;
+    }
+    case ButtonSize.M:
+    default: {
+      return isChecked ? <CheckSVG size={24} /> : <CopySVG size={24} />;
+    }
+  }
+}

package/src/helperComponents/ButtonCopyValue/index.ts

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

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

@@ -0,0 +1,5 @@
+@import "../../styles.module";
+
+.buttonCopyValue {
+  @include button-styles();
+}

package/src/helperComponents/ButtonHideValue/ButtonHideValue.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, KeyboardEventHandler, MouseEventHandler } from 'react';
+
+import { EyeClosedSVG, EyeSVG } from '@snack-uikit/icons';
+import { ButtonSize } from '@snack-uikit/input-private';
+
+import styles from './styles.module.scss';
+
+type ButtonHideValueProps = {
+  size: ButtonSize;
+  hidden?: boolean;
+  disabled?: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+};
+
+export const ButtonHideValue = forwardRef<HTMLButtonElement, ButtonHideValueProps>(
+  ({ size, onClick, hidden, disabled, tabIndex = -1, onKeyDown }, ref) => {
+    const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+      if (disabled) {
+        return;
+      }
+
+      event.stopPropagation();
+      onClick(event);
+    };
+
+    return (
+      <button
+        className={styles.buttonHideValue}
+        data-size={size}
+        data-disabled={disabled || undefined}
+        disabled={disabled}
+        onClick={handleClick}
+        data-test-id='button-hide-value'
+        ref={ref}
+        onKeyDown={onKeyDown}
+        type='button'
+        tabIndex={disabled ? -1 : tabIndex}
+      >
+        {hidden ? (
+          <>
+            {size === ButtonSize.S && <EyeClosedSVG size={16} />}
+            {size === ButtonSize.M && <EyeClosedSVG />}
+          </>
+        ) : (
+          <>
+            {size === ButtonSize.S && <EyeSVG size={16} />}
+            {size === ButtonSize.M && <EyeSVG />}
+          </>
+        )}
+      </button>
+    );
+  },
+);

package/src/helperComponents/ButtonHideValue/index.ts

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

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

@@ -0,0 +1,5 @@
+@import "../../styles.module";
+
+.buttonHideValue {
+  @include button-styles();
+}

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -0,0 +1,78 @@
+import cn from 'classnames';
+import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, RefObject } from 'react';
+
+import { Size } from '@snack-uikit/input-private';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ContainerVariant, ValidationState } from '../../constants';
+import styles from './styles.module.scss';
+
+export type FieldContainerPrivateProps = WithSupportProps<{
+  className?: string;
+  children: ReactNode;
+  size: Size;
+  validationState: ValidationState;
+  variant: ContainerVariant;
+  disabled: boolean;
+  readonly: boolean;
+  focused?: boolean;
+  selectable?: boolean;
+  style?: CSSProperties;
+  prefix?: ReactElement;
+  postfix?: ReactElement;
+  inputRef: RefObject<HTMLElement>;
+  onMouseDown?: MouseEventHandler<HTMLElement>;
+}>;
+
+export function FieldContainerPrivate({
+  className,
+  children,
+  size,
+  validationState,
+  variant,
+  disabled,
+  readonly,
+  focused,
+  selectable,
+  style,
+  prefix,
+  postfix,
+  inputRef,
+  onMouseDown,
+  ...rest
+}: FieldContainerPrivateProps) {
+  const handleContainerClick: MouseEventHandler<HTMLDivElement> = () => {
+    if (disabled) {
+      return;
+    }
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div
+      className={cn(className, styles.container)}
+      style={style}
+      data-size={size}
+      data-validation={disabled || readonly ? ValidationState.Default : validationState}
+      data-variant={variant}
+      data-disabled={disabled || undefined}
+      data-readonly={readonly || undefined}
+      data-focused={focused || undefined}
+      data-selectable={selectable || undefined}
+      data-test-id='field-container-private'
+      onClick={handleContainerClick}
+      onMouseDown={onMouseDown}
+      role='textbox'
+      tabIndex={-1}
+      {...extractSupportProps(rest)}
+    >
+      {prefix && (
+        <span className={styles.prefix} data-test-id='field-container-private__prefix-icon'>
+          {prefix}
+        </span>
+      )}
+      {children}
+      {postfix && <span className={styles.postfix}>{postfix}</span>}
+    </div>
+  );
+}

package/src/helperComponents/FieldContainerPrivate/index.ts

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

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

@@ -0,0 +1,162 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+/* stylelint-disable no-descending-specificity */
+
+$sizes: 's', 'm', 'l';
+$variants: 'single-line-container', 'multi-line-container';
+
+.container {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+
+  border-style: solid;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($fields, 'container', $size);
+
+      &, input, select, textarea, span {
+        @include composite-var($theme-variables, 'sans', 'body', $size);
+
+        cursor: text;
+      }
+
+      @each $variant in $variants {
+        &[data-variant='#{$variant}'] {
+          @include composite-var($fields, $variant, $size);
+        }
+      }
+    }
+  }
+
+  &[data-validation="default"] {
+    background-color: simple-var($sys-neutral-background1-level);
+    border-color: simple-var($sys-neutral-decor-default);
+
+    &:hover {
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-primary-decor-hovered);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include outline-var($container-focused-m);
+
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-primary-accent-default);
+      outline-color: simple-var($sys-primary-decor-activated);
+    }
+  }
+
+  &[data-validation="error"] {
+    background-color: simple-var($sys-red-background1-level);
+    border-color: simple-var($sys-red-decor-default);
+
+    &:hover {
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-red-decor-hovered);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include outline-var($container-focused-m);
+
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-red-accent-default);
+      outline-color: simple-var($sys-red-decor-activated);
+    }
+  }
+
+  &[data-validation="warning"] {
+    background-color: simple-var($sys-yellow-background1-level);
+    border-color: simple-var($sys-yellow-decor-default);
+
+    &:hover {
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-yellow-decor-hovered);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include outline-var($container-focused-m);
+
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-yellow-accent-default);
+      outline-color: simple-var($sys-yellow-decor-activated);
+    }
+  }
+
+  &[data-validation="success"] {
+    background-color: simple-var($sys-green-background1-level);
+    border-color: simple-var($sys-green-decor-default);
+
+    &:hover {
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-green-decor-hovered);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include outline-var($container-focused-m);
+
+      background-color: simple-var($sys-neutral-background2-level);
+      border-color: simple-var($sys-green-accent-default);
+      outline-color: simple-var($sys-green-decor-activated);
+    }
+  }
+
+  &[data-selectable] {
+    &, input, select, textarea, span {
+      cursor: pointer;
+    }
+  }
+
+  &[data-readonly] {
+    &, input, select, textarea, span {
+      cursor: default;
+    }
+
+    &, &:hover {
+      background-color: simple-var($sys-neutral-decor-disabled);
+      border-color: simple-var($sys-neutral-decor-disabled);
+    }
+
+    &: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-color: simple-var($sys-primary-decor-activated);
+    }
+  }
+
+  &[data-disabled] {
+    &, input, select, textarea, span {
+      cursor: not-allowed;
+    }
+
+    &, &:focus-within, &[data-focused], &:hover {
+      background-color: simple-var($sys-neutral-background);
+      border-color: simple-var($sys-neutral-decor-disabled);
+      outline: none;
+    }
+  }
+}
+
+.prefix {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: $sys-neutral-text-disabled;
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: $space-fields-postfix-gap;
+}