@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha21

package/src/components/Status/Status.styles.ts

@@ -1,5 +1,5 @@
-import { rgba } from '../../helpers';
 import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+import { IStatusColors } from './types';
 
 export const useStyles = createThemedStyles('Status', {
   root: {
@@ -102,42 +102,7 @@ export const useStyles = createThemedStyles('Status', {
     },
   },
 
-  green: {
-    '--status-background': rgba('#D4E3AC', 0.5),
-    '--status-color': '#6F990F',
-  },
-
-  blue: {
-    '--status-background': rgba('#AABFFC', 0.4),
-    '--status-color': '#4C6EBF',
-  },
-
-  grey: {
-    '--status-background': rgba('#95A0B3', 0.25),
-    '--status-color': '#7A869A',
-  },
-
-  orange: {
-    '--status-background': rgba('#FCD3A9', 0.5),
-    '--status-color': '#E5741C',
-  },
-
-  red: {
-    '--status-background': rgba('#F7949A', 0.25),
-    '--status-color': '#F14D56',
-  },
-
-  teal: {
-    '--status-background': rgba('#8CE3EA', 0.4),
-    '--status-color': '#0092A6',
-  },
-
-  violet: {
-    '--status-background': rgba('#BEABE0', 0.4),
-    '--status-color': '#7450B2',
-  },
-
   custom: {},
 });
 
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/src/components/Status/constants.ts

@@ -1,11 +1 @@
-export const STATUS_COLORS = [
-  'green',
-  'teal',
-  'blue',
-  'grey',
-  'orange',
-  'red',
-  'violet',
-  'custom',
-] as const;
 export const STATUS_SIZES = ['xs', 's', 'm'] as const;

package/src/components/Status/index.ts

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

package/src/components/Status/types.ts

@@ -1,5 +1,9 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-
-export type IStatusColor = (typeof STATUS_COLORS)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
 
 export type IStatusSize = (typeof STATUS_SIZES)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface IStatusColors extends IDefaultExtendableProps {}
+
+export type IStatusColor = keyof IStatusColors;

package/src/components/TextArea/TextArea.styles.ts

@@ -65,13 +65,9 @@ export const useStyles = createThemedStyles('TextArea', {
   symbolsCountError: {
     color: 'red',
   },
-});
 
-export const controlWrapperStyles: IControlWrapperStyles = {
-  label: {
-    top: 16,
-  },
-};
+  withLabel: {},
+});
 
 export type ITextAreaStyles = ITweakStyles<
   typeof useStyles,

package/src/components/TextArea/TextArea.tsx

@@ -1,7 +1,16 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 import {
   addDataAttributes,
+  getTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -10,19 +19,19 @@ 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 { 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;
-  /** @default false */
   isActive?: boolean;
   /**
    * Должна ли высота и ширина textarea подстраиваться под содержимое
@@ -46,17 +55,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   (
     {
       value = DEFAULT_VALUE,
-      label,
       placeholder,
-      infoMessage,
-      errorMessage,
       name,
       shouldFocusOnMount,
       hasCounter = true,
       shouldTrimAfterMaxLength,
       isAutoSized = true,
       shouldAlwaysShowPlaceholder,
-      isDisabled,
       isActive,
       maxLength,
       rows,
@@ -67,7 +72,17 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
       onPaste,
       onFocus,
       onBlur,
-      ...controlProps
+      // Пропсы WithMessages
+      infoMessage,
+      errorMessage,
+      // Пропсы ControlWrapper
+      label,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      size,
+      groupPlacement,
+      ...textAreaProps
     },
     ref,
   ) => {
@@ -80,7 +95,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     });
 
     const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
       tweakStyles,
       className: 'tweakControlWrapper',
       currentComponentName: 'TextArea',
@@ -89,8 +103,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);
@@ -114,6 +127,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
         errorMessage={errorMessage}
         infoMessage={infoMessage}
         tweakStyles={tweakWithMessagesStyles}
+        testId={getTestId(testId, 'wrapper')}
       >
         <ControlWrapper
           label={label}
@@ -121,12 +135,17 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
           isFocused={hasFocus}
           isDisabled={isDisabled}
           hasValue={hasValue}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          groupPlacement={groupPlacement}
+          size={size}
           isFullWidth
-          testId={testId}
-          {...controlProps}
         >
           <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
+            className={clsx(classes.wrapper, {
+              [classes.autoSized]: isAutoSized,
+              [classes.withLabel]: hasLabel,
+            })}
             {...(isAutoSized && { 'data-value': value })}
           >
             <textarea
@@ -142,7 +161,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
               onFocus={handleFocus}
               onBlur={handleBlur}
               onChange={handleChange}
-              {...addDataAttributes(data, testId, 'control')}
+              autoFocus={shouldFocusOnMount}
+              {...addDataAttributes(data, testId)}
+              {...textAreaProps}
             />
           </div>
         </ControlWrapper>

package/src/components/TextArea/index.ts

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

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.stories.tsx

@@ -91,6 +91,7 @@ Default.args = {
   shouldRenderInBody: true,
   shouldHideOnScroll: false,
   shouldStopPropagation: true,
+  shouldShowArrow: false,
 };
 
 Default.parameters = {

package/src/components/WithPopup/WithPopup.styles.ts

@@ -20,6 +20,8 @@ export const useStyles = createThemedStyles('WithPopup', {
     outline: 'none',
   },
 
+  arrow: {},
+
   animationEnd: {},
 
   animationStart: {},

package/src/components/WithPopup/WithPopup.tsx

@@ -1,7 +1,6 @@
-import { FC, useState } from 'react';
+import { FC, useRef, useState } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
   applyAction,
   stopPropagation,
   addDataAttributes,
@@ -23,10 +22,18 @@ import {
   UseHoverProps,
   safePolygon,
   useFocus,
+  FloatingArrow,
+  arrow,
+  UseClickProps,
+  UseFocusProps,
+  UseDismissProps,
+  UseTransitionStatusProps,
 } from '@floating-ui/react';
-import { ICommonProps, IRenderNode } from '../../types';
+import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
+import { minWidthRelativeToTrigger } from './helpers';
 import {
+  IPopupArrowProps,
   IPopupEventType,
   IReferenceProps,
   IWithPopupChildrenProps,
@@ -43,11 +50,16 @@ 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;
-  /** @default true */
+  arrowProps?: IPopupArrowProps;
+  popupData?: IDataAttributes;
+  /** @default true, if eventType === click */
   shouldStopPropagation?: boolean;
   /** @default false */
   shouldHideOnScroll?: boolean;
@@ -60,6 +72,16 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   canBeFlipped?: boolean;
   /** @default false */
   isDisabled?: boolean;
+  /** @default false */
+  shouldShowArrow?: boolean;
+  /** Должна ли минимальная ширина попапа быть равна ширине триггера
+   * @default false */
+  isMinWidthSameAsTrigger?: boolean;
+  hoverOptions?: UseHoverProps;
+  clickOptions?: UseClickProps;
+  focusOptions?: UseFocusProps;
+  dismissOptions?: UseDismissProps;
+  transitionOptions?: UseTransitionStatusProps;
   onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
@@ -71,12 +93,21 @@ export const WithPopup: FC<IWithPopupProps> = ({
   placement = eventType === 'click' ? 'bottom-end' : 'top',
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
-  shouldStopPropagation = true,
+  arrowProps,
+  popupData,
+  shouldStopPropagation = eventType === 'click',
   shouldHideOnScroll = false,
   shouldRenderInBody = true,
   canBeFlipped = true,
   isTriggerWrapped = eventType === 'hover',
   isDisabled = false,
+  shouldShowArrow = false,
+  isMinWidthSameAsTrigger = false,
+  hoverOptions,
+  clickOptions,
+  focusOptions,
+  dismissOptions,
+  transitionOptions,
   tweakStyles,
   data,
   testId,
@@ -86,6 +117,8 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const arrowRef = useRef<SVGSVGElement>(null);
+
   const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
     if (!isDisabled) {
@@ -103,7 +136,9 @@ export const WithPopup: FC<IWithPopupProps> = ({
     middleware: [
       offset(popupOffset),
       canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      isMinWidthSameAsTrigger && minWidthRelativeToTrigger,
       ...middlewares,
+      shouldShowArrow && arrow({ element: arrowRef }),
     ],
     whileElementsMounted: autoUpdate,
     placement,
@@ -112,22 +147,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,
@@ -155,8 +195,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             [classes.active]: isOpen,
           })}
           {...referenceProps}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
         >
           {triggerElement}
         </div>
@@ -165,16 +204,25 @@ export const WithPopup: FC<IWithPopupProps> = ({
       )}
       {isMounted && (
         <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
+          root={shouldRenderInBody ? document.body : (refs.reference.current as HTMLElement)}
         >
           <div
+            ref={refs.setFloating}
             style={floatingStyles}
             className={classes.popup}
-            ref={refs.setFloating}
             {...getFloatingProps()}
+            {...addDataAttributes(popupData, testId, 'popup')}
           >
             <div className={classes[`dropdown-${status}`]}>
-              {applyAction(children, { onClose: handleClose })}
+              {shouldShowArrow && (
+                <FloatingArrow
+                  {...arrowProps}
+                  ref={arrowRef}
+                  context={context}
+                  className={classes.arrow}
+                />
+              )}
+              {applyAction(children, { floatingContext: context, onClose: handleClose })}
             </div>
           </div>
         </FloatingPortal>

package/src/components/WithPopup/helpers.ts

@@ -0,0 +1,9 @@
+import { Middleware, size } from '@floating-ui/react';
+
+export const minWidthRelativeToTrigger: Middleware = size({
+  apply({ rects, elements }) {
+    Object.assign(elements.floating.style, {
+      minWidth: `${rects.reference.width}px`,
+    });
+  },
+});

package/src/components/WithPopup/types.ts

@@ -1,4 +1,5 @@
 import type { MouseEvent, KeyboardEvent } from 'react';
+import type { FloatingArrowProps, UseFloatingReturn } from '@floating-ui/react';
 import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
 import type { POPUP_EVENT_TYPES } from './constants';
 
@@ -21,5 +22,11 @@ export interface IWithPopupTriggerProps {
 }
 
 export interface IWithPopupChildrenProps {
+  floatingContext: UseFloatingReturn['context'];
   onClose: (event?: IWithPopupToggleEvent) => void;
 }
+
+export type IPopupArrowProps = Pick<
+  FloatingArrowProps,
+  'width' | 'height' | 'tipRadius' | 'staticOffset' | 'd' | 'stroke' | 'strokeWidth'
+>;

package/src/components/WithTooltip/WithTooltip.styles.ts

@@ -1,6 +1,12 @@
 import { ITooltipStyles } from '../Tooltip';
 import { IWithPopupStyles } from '../WithPopup';
 
+export const withPopupStyles: IWithPopupStyles = {
+  popup: {
+    zIndex: 9999,
+  },
+};
+
 export interface IWithTooltipStyles {
   tweakWithPopup?: IWithPopupStyles;
   tweakTooltip?: ITooltipStyles;

package/src/components/WithTooltip/WithTooltip.tsx

@@ -4,7 +4,7 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
-import { IWithTooltipStyles } from './WithTooltip.styles';
+import { IWithTooltipStyles, withPopupStyles } from './WithTooltip.styles';
 
 export interface IWithTooltipProps
   extends Omit<
@@ -32,17 +32,21 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
   tooltipView = 'tooltip',
   tooltipType = 'info',
   isDisabled = false,
+  popupData,
   tweakStyles,
   ...restProps
 }) => {
   const tweakWithPopupStyles = useTweakStyles({
+    innerStyles: withPopupStyles,
     tweakStyles,
     className: 'tweakWithPopup',
+    currentComponentName: 'WithTooltip',
   });
 
   const tweakTooltipStyles = useTweakStyles({
     tweakStyles,
     className: 'tweakTooltip',
+    currentComponentName: 'WithTooltip',
   });
 
   return (
@@ -50,8 +54,9 @@ export const WithTooltip: FC<IWithTooltipProps> = ({
       trigger={children}
       placement={placement}
       eventType={eventType}
-      isTriggerWrapped
+      popupData={{ ...popupData, tooltipView }}
       isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
+      isTriggerWrapped
       tweakStyles={tweakWithPopupStyles}
       {...restProps}
     >

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: 'Южный Судан',