@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha31

package/src/components/TextArea/TextArea.tsx

@@ -1,7 +1,17 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
+import { Styles } from 'react-jss';
 import clsx from 'clsx';
 import {
   addDataAttributes,
+  getTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -10,18 +20,20 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
-import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+import { ITextAreaCounterPosition } from './types';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
-    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
-    Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>,
+    Pick<
+      IControlWrapperProps,
+      'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'
+    >,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
   value?: string;
   placeholder?: string;
-  /** @default false */
-  isDisabled?: boolean;
+  counterPosition?: ITextAreaCounterPosition;
   /** @default false */
   isActive?: boolean;
   /**
@@ -40,23 +52,18 @@ export interface ITextAreaProps
   onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
 }
 
-const DEFAULT_VALUE = '';
-
 export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   (
     {
-      value = DEFAULT_VALUE,
-      label,
+      value = '',
       placeholder,
-      infoMessage,
-      errorMessage,
       name,
+      counterPosition = 'default',
       shouldFocusOnMount,
       hasCounter = true,
       shouldTrimAfterMaxLength,
       isAutoSized = true,
       shouldAlwaysShowPlaceholder,
-      isDisabled,
       isActive,
       maxLength,
       rows,
@@ -67,12 +74,25 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
       onPaste,
       onFocus,
       onBlur,
-      ...controlProps
+      // Пропсы WithMessages
+      infoMessage,
+      errorMessage,
+      // Пропсы ControlWrapper
+      label,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      size,
+      groupPlacement,
+      ...textAreaProps
     },
     ref,
   ) => {
     const classes = useStyles({ theme: tweakStyles });
 
+    const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+    const counterString = `${value.length} / ${maxLength}`;
+
     const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
       className: 'tweakWithMessages',
@@ -80,7 +100,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     });
 
     const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
       tweakStyles,
       className: 'tweakControlWrapper',
       currentComponentName: 'TextArea',
@@ -89,8 +108,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     const [isFocused, setFocused] = useState(false);
 
     const hasFocus = isFocused || isActive;
-    // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
-    const hasValue = value !== undefined && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasLabel = isReactNodeNotEmpty(label);
     const hasPlaceholder =
       (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
@@ -110,52 +128,68 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <WithMessages
-        errorMessage={errorMessage}
-        infoMessage={infoMessage}
-        tweakStyles={tweakWithMessagesStyles}
+      <div
+        className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+        style={{ '--counter-length': counterString.length } as Styles}
       >
-        <ControlWrapper
-          label={label}
-          tweakStyles={tweakControlWrapperStyles}
-          isFocused={hasFocus}
-          isDisabled={isDisabled}
-          hasValue={hasValue}
-          isFullWidth
-          testId={testId}
-          {...controlProps}
+        <WithMessages
+          errorMessage={errorMessage}
+          infoMessage={infoMessage}
+          tweakStyles={tweakWithMessagesStyles}
+          testId={getTestId(testId, 'wrapper')}
         >
-          <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
-            {...(isAutoSized && { 'data-value': value })}
-          >
-            <textarea
-              ref={ref}
-              className={classes.textarea}
-              value={value}
-              disabled={isDisabled}
-              placeholder={hasPlaceholder ? placeholder : undefined}
-              maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
-              name={name}
-              rows={rows}
-              onPaste={onPaste}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onChange={handleChange}
-              {...addDataAttributes(data, testId, 'control')}
-            />
-          </div>
-        </ControlWrapper>
-        {hasCounter && isNotEmpty(maxLength) && (
-          <span
-            className={clsx(classes.symbolsCount, {
-              [classes.symbolsCountError]: value.length > maxLength,
-            })}
+          <ControlWrapper
+            label={label}
+            tweakStyles={tweakControlWrapperStyles}
+            isFocused={hasFocus}
+            isDisabled={isDisabled}
+            hasValue={hasValue}
+            isInvalid={isInvalid}
+            isRequired={isRequired}
+            groupPlacement={groupPlacement}
+            size={size}
+            isFullWidth
           >
-            {value.length} / {maxLength}
-          </span>
-        )}
-      </WithMessages>
+            <div
+              className={clsx(classes.wrapper, {
+                [classes.autoSized]: isAutoSized,
+                [classes.withLabel]: hasLabel,
+              })}
+              // Не менять на addDataAttributes
+              {...(isAutoSized && { 'data-value': value })}
+            >
+              <textarea
+                ref={ref}
+                className={classes.textarea}
+                value={value}
+                disabled={isDisabled}
+                placeholder={hasPlaceholder ? placeholder : undefined}
+                maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
+                name={name}
+                rows={rows}
+                onPaste={onPaste}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                autoFocus={shouldFocusOnMount}
+                {...addDataAttributes(data, testId)}
+                {...textAreaProps}
+              />
+              {shouldShowCounter && (
+                <span
+                  className={clsx(classes.symbolsCount, classes[`counter-${counterPosition}`], {
+                    [classes.symbolsCountError]: value.length > maxLength,
+                    [classes.symbolsCountActive]: hasFocus || hasValue,
+                  })}
+                  {...addDataAttributes({ counterPosition })}
+                >
+                  {counterString}
+                </span>
+              )}
+            </div>
+          </ControlWrapper>
+        </WithMessages>
+      </div>
     );
   },
 );

package/src/components/TextArea/index.ts

@@ -1,3 +1,3 @@
 export * from './TextArea';
-export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

package/src/components/TextArea/types.ts

@@ -1,6 +1,6 @@
-import { TextareaHTMLAttributes } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+import { IExtendableProps } from '../../types';
 
-export type ITextAreaHTMLBaseProps = Pick<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'
->;
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {}
+
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/src/components/TextButton/TextButton.styles.ts

@@ -7,6 +7,7 @@ export const useStyles = createThemedStyles('TextButton', {
     alignItems: 'center',
     height: 24,
     padding: 0,
+    position: 'relative',
     background: 'transparent',
     border: 'none',
     borderRadius: 0,

package/src/components/Tooltip/Tooltip.styles.ts

@@ -32,6 +32,8 @@ export const useStyles = createThemedStyles('Tooltip', {
     letterSpacing: 0.2,
   },
 
+  custom: {},
+
   info: {},
 
   error: {

package/src/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { useStyles, ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
   text: ReactNode;
   /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
+  view?: 'tooltip' | 'hint' | 'custom';
   /** @default 'info' */
   type?: 'info' | 'error';
 }

package/src/components/WithMessages/WithMessages.stories.tsx

@@ -4,7 +4,7 @@ import { IInputProps, Input } from '../Input';
 import { WithMessages } from './WithMessages';
 
 export default {
-  title: 'WithMessages',
+  title: 'Data Display/WithMessages',
   component: WithMessages,
 };
 

package/src/components/WithPopup/WithPopup.tsx

@@ -24,6 +24,10 @@ import {
   useFocus,
   FloatingArrow,
   arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
@@ -46,8 +50,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   placement?: Placement;
   /** @default 'click' */
   eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
+  /**
+   * @deprecated Используйте hoverOptions
+   * @default 0
+   */
+  hoverDelay?: number;
   /** @default 6 */
   popupOffset?: OffsetOptions;
   arrowProps?: IPopupArrowProps;
@@ -70,6 +77,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** Должна ли минимальная ширина попапа быть равна ширине триггера
    * @default false */
   isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -91,6 +103,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
   isDisabled = false,
   shouldShowArrow = false,
   isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -99,15 +116,14 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const [isOpen, setIsOpen] = useState(false);
+  const isActive = isOpen && !isDisabled;
 
   const arrowRef = useRef<SVGSVGElement>(null);
 
-  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
+  const handleToggle = (next: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive, event);
-      setIsOpen(isActive);
-    }
+    onToggle?.(next, event);
+    setIsOpen(next);
   };
 
   const handleClose = (event?: IWithPopupToggleEvent) => {
@@ -115,7 +131,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   };
 
   const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
+    open: isActive,
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
@@ -130,22 +146,27 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const hover = useHover(context, {
     enabled: eventType === 'hover',
-    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    delay: { open: hoverDelay, close: 0 },
     handleClose: safePolygon(),
+    ...hoverOptions,
   });
 
-  const focus = useFocus(context, { enabled: eventType === 'hover' });
+  const focus = useFocus(context, { enabled: eventType === 'hover', ...focusOptions });
 
-  const click = useClick(context, { enabled: eventType === 'click' });
+  const click = useClick(context, { enabled: eventType === 'click', ...clickOptions });
 
   const dismiss = useDismiss(context, {
     enabled: eventType === 'click',
     ancestorScroll: shouldHideOnScroll,
+    ...dismissOptions,
   });
 
   const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
 
-  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
+  const { isMounted, status } = useTransitionStatus(context, {
+    duration: { close: 500 },
+    ...transitionOptions,
+  });
 
   const referenceProps: IReferenceProps = getReferenceProps({
     ref: refs.setReference,
@@ -157,7 +178,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const triggerElement = applyAction(trigger, {
     referenceProps: !isTriggerWrapped ? referenceProps : undefined,
     triggerProps: {
-      isActive: isOpen,
+      isActive,
       isDisabled,
       ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
     },
@@ -170,7 +191,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
           className={clsx(classes.trigger, {
             [classes.clickable]: eventType === 'click',
             [classes.disabled]: isDisabled,
-            [classes.active]: isOpen,
+            [classes.active]: isActive,
           })}
           {...referenceProps}
           {...addDataAttributes(data, testId)}
@@ -189,7 +210,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             style={floatingStyles}
             className={classes.popup}
             {...getFloatingProps()}
-            {...addDataAttributes(popupData)}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
               {shouldShowArrow && (

package/src/constants/phone-info.ts

@@ -1,6 +1,15 @@
 import type { IPhoneInfo } from '../components';
 
 export const phoneInfo: IPhoneInfo[] = [
+  {
+    countryEn: 'Abkhazia',
+    countryRu: 'Абхазия',
+    countryCode: 'AB',
+    phoneMask: '(999) 999-99-99',
+    dialCode: '7',
+    dialCodePriority: 1,
+    fullCodes: ['7'],
+  },
   {
     countryEn: 'Afghanistan',
     countryRu: 'Афганистан',
@@ -785,40 +794,9 @@ export const phoneInfo: IPhoneInfo[] = [
     countryRu: 'Казахстан',
     countryCode: 'KZ',
     dialCode: '7',
-    phoneMask: '999 999-99-99',
+    phoneMask: '(999) 999-99-99',
     dialCodePriority: 1,
-    areaCodes: [
-      '310',
-      '311',
-      '312',
-      '313',
-      '315',
-      '318',
-      '321',
-      '324',
-      '325',
-      '326',
-      '327',
-      '336',
-      '7172',
-      '73622',
-    ],
-    fullCodes: [
-      '7310',
-      '7311',
-      '7312',
-      '7313',
-      '7315',
-      '7318',
-      '7321',
-      '7324',
-      '7325',
-      '7326',
-      '7327',
-      '7336',
-      '77172',
-      '773622',
-    ],
+    fullCodes: ['7'],
   },
   {
     countryEn: 'Kenya',
@@ -1404,6 +1382,15 @@ export const phoneInfo: IPhoneInfo[] = [
     phoneMask: '999 9999 9999',
     fullCodes: ['82'],
   },
+  {
+    countryCode: 'OS',
+    countryEn: 'South Ossetia',
+    countryRu: 'Южная Осетия',
+    phoneMask: '(999) 999-99-99',
+    dialCode: '7',
+    dialCodePriority: 1,
+    fullCodes: ['7'],
+  },
   {
     countryEn: 'South Sudan',
     countryRu: 'Южный Судан',

package/src/helpers/phone.ts

@@ -1,4 +1,4 @@
-import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
+import { isNotEmpty, isStringEmpty } from '@true-engineering/true-react-platform-helpers';
 import type { IPhoneInfo, IPhoneValue } from '../components';
 import { phoneInfo } from '../constants';
 
@@ -46,22 +46,26 @@ export const getFullPhone = (phone?: IPhoneValue): string =>
   (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
 
 export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefined => {
-  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
-  let countryCode = phoneInfo.find((info) =>
-    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
-  )?.countryCode;
-
-  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
-    // если не нашли уникальный fullCode (dialCode + arealCode),
-    // то пробуем найти dialCode и выбираем с наименьшим Priority
-    countryCode = phoneInfo
-      .filter((info) => phoneWithCode.startsWith(info.dialCode))
-      .sort(
-        (infoA, infoB) => (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
-      )[0]?.countryCode;
+  if (isStringEmpty(phoneWithCode)) {
+    return;
   }
 
-  return countryCode;
+  // ищем страны, для которых phoneWithCode начинается с fullCode (dialCode + areaCode)
+  const matchedCountries = phoneInfo.filter((info) =>
+    info.fullCodes.some((fullCode) => phoneWithCode.startsWith(fullCode)),
+  );
+
+  // если нашлась всего одна — ок, выдаём её
+  if (matchedCountries.length === 1) {
+    return matchedCountries[0].countryCode;
+  }
+
+  // если нашлось несколько, выбираем страну с наименьшим dialCodePriority (0 — самая приоритетная)
+  const highestPriorityCountries = phoneInfo
+    .filter((info) => phoneWithCode.startsWith(info.dialCode))
+    .sort((a, b) => (a.dialCodePriority ?? 1000) - (b.dialCodePriority ?? 1000));
+
+  return highestPriorityCountries.at(0)?.countryCode;
 };
 
 export const getPhoneObjFromString = (fullPhone: string, countryCode?: string): IPhoneValue => {

package/src/hooks/index.ts

@@ -1,7 +1,10 @@
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-ref';
 export * from './use-is-mounted';
+export * from './use-latest-ref';
+export * from './use-merge';
+export * from './use-merged-refs';
+export * from './use-mixed-styles';
 export * from './use-on-click-outside';
-export * from './use-dropdown';
 export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
-export * from './use-mixed-styles';
-export * from './use-merged-refs';

package/src/hooks/use-intersection-ref.ts

@@ -0,0 +1,30 @@
+import { RefCallback, useMemo } from 'react';
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useLatestRef } from './use-latest-ref';
+
+export interface IInsertionRefOptions {
+  /** @default false */
+  isDisabled?: boolean;
+  onIntersection?: VoidFunction;
+  onIntersectionEnd?: VoidFunction;
+}
+
+export const useIntersectionRef = (options?: IInsertionRefOptions): RefCallback<Element> => {
+  const optionsRef = useLatestRef(options);
+
+  return useMemo(() => {
+    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
+      const { current } = optionsRef;
+      if (current?.isDisabled) {
+        return;
+      }
+      if (isIntersecting) {
+        current?.onIntersection?.();
+      } else {
+        current?.onIntersectionEnd?.();
+      }
+    });
+
+    return (node) => (isNotEmpty(node) ? observer.observe(node) : observer.disconnect());
+  }, [optionsRef]);
+};

package/src/hooks/use-latest-ref.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject, useRef } from 'react';
+
+export const useLatestRef = <T>(value: T): MutableRefObject<T> => {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+};

package/src/hooks/use-merge.ts

@@ -0,0 +1,8 @@
+import { useMemo } from 'react';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+
+export const useMerge = <T>(one?: T, two?: T): T | undefined =>
+  useMemo(
+    () => (isNotEmpty(one) && isNotEmpty(two) ? mergeStyles(one, two) : one ?? two),
+    [one, two],
+  );

package/src/hooks/use-mixed-styles.ts

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
-import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { isObject } from '@true-engineering/true-react-platform-helpers';
+import type { IMixedStyles } from '../theme';
+
+export const mixStyles = <T>(...tweakStyles: Array<IMixedStyles<T>>): Array<NonNullable<T>> =>
+  tweakStyles.flat().filter(isObject) as Array<NonNullable<T>>;
 
 export const useMixedStyles = <StyleSheet>(
-  baseStyles?: StyleSheet,
-  tweakStyles?: StyleSheet,
-): StyleSheet | undefined =>
-  useMemo(
-    () =>
-      isNotEmpty(baseStyles) && isNotEmpty(tweakStyles)
-        ? mergeStyles(baseStyles, tweakStyles)
-        : baseStyles ?? tweakStyles,
-    [baseStyles, tweakStyles],
-  );
+  baseStyles?: IMixedStyles<StyleSheet>,
+  tweakStyles?: IMixedStyles<StyleSheet>,
+): Array<NonNullable<StyleSheet>> =>
+  useMemo(() => mixStyles(baseStyles, tweakStyles), [baseStyles, tweakStyles]);