@cloud-ru/uikit-product-mobile-fields 0.11.24

package/src/helperComponents/ButtonCopyValue/ButtonCopyValue.tsx

@@ -0,0 +1,79 @@
+import copyToClipboard from 'copy-to-clipboard';
+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';
+
+type ButtonCopyValueProps = {
+  size: ButtonSize;
+  valueToCopy?: string;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  tabIndex?: number;
+  onValueRequest?(): AsyncValueRequest;
+  disabled?: boolean;
+};
+
+export const ButtonCopyValue = forwardRef<HTMLButtonElement, ButtonCopyValueProps>(
+  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onValueRequest, disabled }, ref) => {
+    const [isChecked, setIsChecked] = useState(false);
+    const timerId = useRef<ReturnType<typeof setTimeout>>();
+
+    const closeTooltip = () => setIsChecked(false);
+
+    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 (onValueRequest) {
+        onValueRequest().then(({ success, value }) => {
+          if (success) {
+            handleCopy(event, value);
+          }
+        });
+      } else {
+        handleCopy(event);
+      }
+    };
+
+    useEffect(
+      () => () => {
+        closeTooltip();
+        clearTimeout(timerId.current);
+      },
+      [],
+    );
+
+    return (
+      <button
+        className={styles.buttonCopyValue}
+        data-size={size}
+        data-disabled={disabled || undefined}
+        onClick={handleClick}
+        data-test-id='button-copy-value'
+        ref={ref}
+        onKeyDown={onKeyDown}
+        tabIndex={tabIndex}
+        type='button'
+        disabled={disabled}
+      >
+        {getIcon({ size, isChecked })}
+      </button>
+    );
+  },
+);

package/src/helperComponents/ButtonCopyValue/helpers.tsx

@@ -0,0 +1,19 @@
+import { CheckSVG, CopySVG } from '@cloud-ru/uikit-product-icons';
+import { BUTTON_SIZE, ButtonSize } from '@snack-uikit/input-private';
+
+type GetIconProps = {
+  size: ButtonSize;
+  isChecked: boolean;
+};
+
+export function getIcon({ size, isChecked }: GetIconProps) {
+  switch (size) {
+    case BUTTON_SIZE.S: {
+      return isChecked ? <CheckSVG size={16} /> : <CopySVG size={16} />;
+    }
+    case BUTTON_SIZE.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 @@
+@use "../../styles.module";
+
+.buttonCopyValue {
+  @include styles.button-styles();
+}

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -0,0 +1,79 @@
+import cn from 'classnames';
+import { CSSProperties, MouseEventHandler, ReactNode, RefObject } from 'react';
+
+import { Size } from '@snack-uikit/input-private';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { VALIDATION_STATE } from '../../constants';
+import { ContainerVariant, ValidationState } from '../../types';
+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?: ReactNode;
+  postfix?: ReactNode;
+  inputRef: RefObject<HTMLElement>;
+  onClick?: MouseEventHandler;
+}>;
+
+export function FieldContainerPrivate({
+  className,
+  children,
+  size,
+  validationState,
+  variant,
+  disabled,
+  readonly,
+  focused,
+  selectable,
+  style,
+  prefix,
+  postfix,
+  onClick,
+  ...rest
+}: FieldContainerPrivateProps) {
+  const handleContainerClick: MouseEventHandler<HTMLDivElement> = event => {
+    if (disabled) {
+      return;
+    }
+    onClick?.(event);
+  };
+
+  return (
+    <div
+      className={cn(className, styles.container)}
+      style={style}
+      data-size={size}
+      data-validation={disabled || readonly ? VALIDATION_STATE.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}
+      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,131 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+$variants: 'single-line-container', 'multi-line-container';
+
+@mixin validationState($state, $rainbowColor, $bgDefault) {
+  &[data-validation='#{$state}'] {
+    background-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $bgDefault, 'background1-level');
+    border-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $bgDefault, 'decor-default');
+
+    &:hover {
+      background-color: styles-tokens-element.$sys-neutral-background2-level;
+      border-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $rainbowColor, 'decor-hovered');
+    }
+
+    &:not([data-readonly]) {
+      &:focus-within,
+      &[data-focused] {
+        &:not([data-disabled]) {
+          @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-m);
+
+          background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-background2-level);
+          border-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $rainbowColor, 'accent-default');
+          outline-color: styles-tokens-element.simple-var(styles-tokens-element.$theme-variables, 'sys', $rainbowColor, 'decor-activated');
+        }
+      }
+    }
+  }
+}
+
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  border-style: solid;
+
+  @include validationState('default', 'primary', 'neutral');
+  @include validationState('error', 'red', 'red');
+  @include validationState('warning', 'yellow', 'yellow');
+  @include validationState('success', 'green', 'green');
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, 'container', $size);
+
+      &,
+      input,
+      select,
+      textarea,
+      span {
+        @include styles-tokens-element.composite-var(styles-tokens-element.$theme-variables, 'sans', 'body', $size);
+      }
+
+      @each $variant in $variants {
+        &[data-variant='#{$variant}'] {
+          @include styles-tokens-element.composite-var(styles-tokens-fields.$fields, $variant, $size);
+        }
+      }
+    }
+  }
+
+  &[data-selectable] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: pointer;
+    }
+  }
+
+  &[data-readonly] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: default;
+    }
+
+    &,
+    &:hover {
+      background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-disabled);
+      border-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-disabled);
+    }
+
+    &:focus-within,
+    &[data-focused] {
+      @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-m);
+
+      background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-disabled);
+      border-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-disabled);
+      outline: none;
+    }
+  }
+
+  &[data-disabled] {
+    &,
+    input,
+    select,
+    textarea,
+    span {
+      cursor: not-allowed;
+      background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-background);
+    }
+
+    &,
+    &:focus-within,
+    &[data-focused],
+    &:hover {
+      background-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-background);
+      border-color: styles-tokens-element.simple-var(styles-tokens-element.$sys-neutral-decor-disabled);
+      outline: none;
+    }
+  }
+}
+
+.prefix {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: styles-tokens-element.$sys-neutral-text-disabled;
+}
+
+.postfix {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: styles-tokens-element.$space-fields-postfix-gap;
+}

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type ItemContentProps = WithSupportProps<{
+  option: string | number;
+  caption?: string | number;
+  description?: string;
+  disabled?: boolean;
+  className?: string;
+}>;
+
+export function ItemContent({ caption, description, option, className, disabled, ...rest }: ItemContentProps) {
+  return (
+    <div
+      className={cn(styles.content, className)}
+      {...extractSupportProps(rest)}
+      data-size='l'
+      data-disabled={disabled || undefined}
+    >
+      <div className={styles.headline}>
+        <div className={styles.label}>
+          <span data-test-id='list__base-item-option'>{option}</span>
+        </div>
+        {caption && <span className={styles.caption}>{caption}</span>}
+      </div>
+
+      {description && (
+        <div className={styles.description}>
+          <span data-test-id='list__base-item-description'>{description}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ItemContent/index.ts

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

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

@@ -0,0 +1,80 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-dropList';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+
+$sizes: 's', 'm', 'l';
+$typography: (
+  's': (
+    'label': styles-tokens-element.$sans-body-s,
+    'caption': styles-tokens-element.$sans-body-s,
+    'description': styles-tokens-element.$sans-body-s,
+    'separator': styles-tokens-element.$light-label-m,
+  ),
+  'm': (
+    'label': styles-tokens-element.$sans-body-m,
+    'caption': styles-tokens-element.$sans-body-s,
+    'description': styles-tokens-element.$sans-body-s,
+    'separator': styles-tokens-element.$light-label-l,
+  ),
+  'l': (
+    'label': styles-tokens-element.$sans-body-l,
+    'caption': styles-tokens-element.$sans-body-m,
+    'description': styles-tokens-element.$sans-body-m,
+    'separator': styles-tokens-element.$light-label-l,
+  ),
+);
+
+.headline {
+  display: flex;
+}
+
+.label {
+  overflow: hidden;
+  flex: 1;
+  color: styles-tokens-element.$sys-neutral-text-main;
+}
+
+.caption {
+  overflow: hidden;
+  color: styles-tokens-element.$sys-neutral-text-light;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  color: styles-tokens-element.$sys-neutral-text-support;
+}
+
+.content {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .headline {
+        @include styles-tokens-element.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
+      }
+      .label {
+        @include styles-tokens-element.composite-var($typography, $size, 'label');
+
+        display: flex;
+        align-items: center;
+      }
+      .caption {
+        @include styles-tokens-element.composite-var($typography, $size, 'caption');
+      }
+      .description {
+        @include styles-tokens-element.composite-var($typography, $size, 'description');
+      }
+    }
+  }
+
+  &[data-disabled] {
+    .label,
+    .description,
+    .caption {
+      color: styles-tokens-element.$sys-neutral-text-disabled;
+    }
+  }
+}

package/src/helperComponents/index.ts

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

package/src/hooks/dateHandlers/index.ts

@@ -0,0 +1,3 @@
+export * from './useDateField';
+export * from './useFocusHandlers';
+export * from './useHandlers';