@true-engineering/true-react-common-ui-kit 3.32.0 → 3.33.1

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,54 +1,54 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { SvgPreloader, DotsPreloader } from './components';
-import { IPreloaderSvgType } from './types';
-import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
-
-export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
-  /** @default 'default' */
-  type?: 'dots' | IPreloaderSvgType;
-  /** @default false */
-  useCurrentColor?: boolean;
-}
-
-export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
-  type = 'default',
-  useCurrentColor = false,
-  data,
-  testId,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakDotsPreloaderStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakDotsPreloader',
-    currentComponentName: 'ThemedPreloader',
-  });
-
-  const tweakSvgPreloaderStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakSvgPreloader',
-    currentComponentName: 'ThemedPreloader',
-  });
-
-  return (
-    <div
-      className={clsx(classes.root, classes[type], {
-        [classes.currentColor]: useCurrentColor,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {type === 'dots' ? (
-        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
-      ) : (
-        <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { SvgPreloader, DotsPreloader } from './components';
+import { IPreloaderSvgType } from './types';
+import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
+
+export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
+  /** @default 'default' */
+  type?: 'dots' | IPreloaderSvgType;
+  /** @default false */
+  useCurrentColor?: boolean;
+}
+
+export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
+  type = 'default',
+  useCurrentColor = false,
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakDotsPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakDotsPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
+
+  const tweakSvgPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSvgPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[type], {
+        [classes.currentColor]: useCurrentColor,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {type === 'dots' ? (
+        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
+      ) : (
+        <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
+      )}
+    </div>
+  );
+};

package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts

@@ -1 +1 @@
-export * from './DefaultPreloader';
+export * from './DefaultPreloader';

package/src/components/Toaster/Toaster.stories.tsx

@@ -1,30 +1,30 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button } from '../Button';
-import { Toaster } from './Toaster';
-
-const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
-
-export default {
-  title: 'Feedback/Toaster',
-  component: Toaster,
-  args: {
-    title: 'Произошла очень страшная ошибка',
-    text: 'Мы даже не знаем, чем вам помочь!',
-    type: types[0],
-    timeout: 7000,
-    hasCloseButton: false,
-    shouldCloseOnClick: false,
-  },
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-  },
-  parameters: {
-    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
-  },
-} as ComponentMeta<typeof Toaster>;
-
-export const Default: ComponentStory<typeof Toaster> = (args) => (
-  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
-    <Button size="m">Нажмите</Button>
-  </Toaster>
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from '../Button';
+import { Toaster } from './Toaster';
+
+const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
+
+export default {
+  title: 'Feedback/Toaster',
+  component: Toaster,
+  args: {
+    title: 'Произошла очень страшная ошибка',
+    text: 'Мы даже не знаем, чем вам помочь!',
+    type: types[0],
+    timeout: 7000,
+    hasCloseButton: false,
+    shouldCloseOnClick: false,
+  },
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+  },
+  parameters: {
+    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
+  },
+} as ComponentMeta<typeof Toaster>;
+
+export const Default: ComponentStory<typeof Toaster> = (args) => (
+  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
+    <Button size="m">Нажмите</Button>
+  </Toaster>
+);

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,19 +1,19 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Data Display/Tooltip',
-  component: Tooltip,
-  args: {
-    text: 'Tooltip Text',
-    view: 'tooltip',
-    type: 'info',
-  },
-  argTypes: {
-    text: { control: 'text' },
-    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    type: { control: 'inline-radio', options: ['info', 'error'] },
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Data Display/Tooltip',
+  component: Tooltip,
+  args: {
+    text: 'Tooltip Text',
+    view: 'tooltip',
+    type: 'info',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    type: { control: 'inline-radio', options: ['info', 'error'] },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,35 +1,35 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { useStyles, ITooltipStyles } from './Tooltip.styles';
-
-export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
-  text: ReactNode;
-  /** @default 'tooltip' */
-  view?: 'tooltip' | 'hint';
-  /** @default 'info' */
-  type?: 'info' | 'error';
-}
-
-export const Tooltip: FC<ITooltipProps> = ({
-  text,
-  view = 'tooltip',
-  type = 'info',
-  data,
-  testId,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div
-      className={clsx(classes.root, classes[view], classes[type])}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {text}
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, ITooltipStyles } from './Tooltip.styles';
+
+export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
+  text: ReactNode;
+  /** @default 'tooltip' */
+  view?: 'tooltip' | 'hint';
+  /** @default 'info' */
+  type?: 'info' | 'error';
+}
+
+export const Tooltip: FC<ITooltipProps> = ({
+  text,
+  view = 'tooltip',
+  type = 'info',
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[view], classes[type])}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {text}
+    </div>
+  );
+};

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -60,9 +60,9 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
     <div onClick={() => console.log('parent onclick')}>
       <WithPopup
         {...args}
-        trigger={(props) => (
-          <Button icon="plus" isFullWidth {...props}>
-            {props.isActive ? 'Click (Active)' : 'Click (Not Active)'}
+        trigger={({ triggerProps }) => (
+          <Button icon="plus" isFullWidth {...triggerProps}>
+            {triggerProps.isActive ? 'Click (Active)' : 'Click (Not Active)'}
           </Button>
         )}
       >

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

@@ -6,6 +6,8 @@ export const useStyles = createThemedStyles('WithPopup', {
     cursor: 'pointer',
   },
 
+  active: {},
+
   disabled: {
     cursor: 'default',
   },

package/src/components/WithPopup/WithPopup.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import {
   addDataTestId,
   applyAction,
-  isFunction,
   stopPropagation,
 } from '@true-engineering/true-react-platform-helpers';
 import {
@@ -29,6 +28,7 @@ import { ICommonProps, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
 import {
   IPopupEventType,
+  IReferenceProps,
   IWithPopupChildrenProps,
   IWithPopupToggleEvent,
   IWithPopupTriggerProps,
@@ -100,7 +100,11 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { refs, floatingStyles, context } = useFloating({
     open: isOpen,
-    middleware: [offset(popupOffset), ...(canBeFlipped ? [flip()] : []), ...middlewares],
+    middleware: [
+      offset(popupOffset),
+      canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      ...middlewares,
+    ],
     whileElementsMounted: autoUpdate,
     placement,
     onOpenChange: handleToggle,
@@ -125,7 +129,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
 
-  const referenceProps: Partial<IWithPopupTriggerProps> = getReferenceProps({
+  const referenceProps: IReferenceProps = getReferenceProps({
     ref: refs.setReference,
     ...(shouldStopPropagation && {
       onClick: stopPropagation,
@@ -133,16 +137,22 @@ export const WithPopup: FC<IWithPopupProps> = ({
   });
 
   const triggerElement = applyAction(trigger, {
-    isActive: isOpen,
-    ...(isDisabled ? { isDisabled: true } : undefined),
-    ...(!isTriggerWrapped ? referenceProps : undefined),
+    referenceProps: !isTriggerWrapped ? referenceProps : undefined,
+    triggerProps: {
+      isActive: isOpen,
+      isDisabled,
+      ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
+    },
   });
 
   return (
     <>
       {isTriggerWrapped ? (
         <div
-          className={clsx(classes.trigger, { [classes.disabled]: isDisabled })}
+          className={clsx(classes.trigger, {
+            [classes.disabled]: isDisabled,
+            [classes.active]: isOpen,
+          })}
           {...referenceProps}
           {...addDataTestId(testId)}
           {...addDataAttributes(data)}
@@ -163,7 +173,7 @@ export const WithPopup: FC<IWithPopupProps> = ({
             {...getFloatingProps()}
           >
             <div className={classes[`dropdown-${status}`]}>
-              {isFunction(children) ? children({ onClose: handleClose }) : children}
+              {applyAction(children, { onClose: handleClose })}
             </div>
           </div>
         </FloatingPortal>

package/src/components/WithPopup/types.ts

@@ -1,15 +1,23 @@
 import type { MouseEvent, KeyboardEvent } from 'react';
-import type { IDomElementInteractions } from '../../types';
+import type { IDataAttributesProps, IDomElementInteractions } from '../../types';
 import type { POPUP_EVENT_TYPES } from './constants';
 
 export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
 
 export type IWithPopupToggleEvent = MouseEvent | KeyboardEvent | Event;
 
-export interface IWithPopupTriggerProps extends IDomElementInteractions<HTMLElement> {
+export interface IReferenceProps extends IDomElementInteractions<HTMLElement> {
+  ref?: (node: Element | null) => void;
+}
+
+export interface IWithPopupTriggerComponentProps extends IReferenceProps, IDataAttributesProps {
   isActive: boolean;
   isDisabled?: boolean;
-  ref?: (node: Element | null) => void;
+}
+
+export interface IWithPopupTriggerProps {
+  triggerProps: IWithPopupTriggerComponentProps;
+  referenceProps?: IReferenceProps;
 }
 
 export interface IWithPopupChildrenProps {

package/src/helpers/popper-helpers.ts

@@ -1,17 +1,17 @@
-import { Modifier } from 'react-overlays/usePopper';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const minWidthModifier: Partial<Modifier<any, any>> = {
-  name: 'minWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: ({ state }) => {
-    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
-  },
-  effect: ({ state }) => {
-    state.elements.popper.style.minWidth = `${
-      (state.elements.reference as HTMLElement).offsetWidth
-    }px`;
-  },
-};
+import { Modifier } from 'react-overlays/usePopper';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const minWidthModifier: Partial<Modifier<any, any>> = {
+  name: 'minWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

package/src/hooks/use-dropdown.ts

@@ -1,84 +1,84 @@
-import { DependencyList, useEffect } from 'react';
-import usePopper, { VirtualElement } from 'react-overlays/usePopper';
-import { getScrollParent, minWidthModifier } from '../helpers';
-import { IDropdownWithPopperOptions } from '../types';
-
-export const useDropdown = ({
-  isOpen,
-  onDropdownClose,
-  referenceElement,
-  dropdownElement,
-  options,
-  dependenciesForPositionUpdating = [],
-}: {
-  isOpen: boolean;
-  referenceElement: VirtualElement | null | undefined;
-  dropdownElement: HTMLElement | null | undefined;
-  options?: IDropdownWithPopperOptions;
-  dependenciesForPositionUpdating?: DependencyList;
-  onDropdownClose: (event: Event) => void;
-}): ReturnType<typeof usePopper> | undefined => {
-  const {
-    shouldUsePopper = false,
-    shouldRenderInBody = false,
-    shouldHideOnScroll = false,
-    scrollParent = 'document',
-    canBeFlipped = false,
-    modifiers = [],
-    placement = 'bottom-start',
-    flipOptions,
-  } = options ?? {};
-
-  useEffect(() => {
-    if (!shouldHideOnScroll || !isOpen) {
-      return;
-    }
-
-    const scrollParentEl =
-      scrollParent === 'auto'
-        ? getScrollParent(referenceElement as Element)
-        : scrollParent === 'document'
-        ? document
-        : scrollParent;
-    scrollParentEl.addEventListener('scroll', onDropdownClose);
-
-    return () => {
-      scrollParentEl.removeEventListener('scroll', onDropdownClose);
-    };
-  }, [shouldHideOnScroll, isOpen]);
-
-  let popperData: ReturnType<typeof usePopper> | undefined;
-  if (shouldUsePopper) {
-    // TODO: Вытащить хук из под условия???
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    popperData = usePopper(referenceElement, dropdownElement, {
-      enabled: isOpen,
-      placement,
-      modifiers: [
-        ...(shouldRenderInBody ? [minWidthModifier] : []),
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 6],
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
-            ...flipOptions,
-          },
-        },
-        ...modifiers,
-      ],
-    });
-  }
-
-  useEffect(() => {
-    if (dependenciesForPositionUpdating.length !== 0) {
-      popperData?.update();
-    }
-  }, dependenciesForPositionUpdating);
-
-  return popperData;
-};
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+import { getScrollParent, minWidthModifier } from '../helpers';
+import { IDropdownWithPopperOptions } from '../types';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+  onDropdownClose: (event: Event) => void;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    // TODO: Вытащить хук из под условия???
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped ? ['bottom-start', 'top-start'] : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-is-mounted.ts

@@ -1,15 +1,15 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-export const useIsMounted = (): (() => boolean) => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return useCallback(() => isMounted.current, []);
-};
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};