@true-engineering/true-react-common-ui-kit 3.41.0 → 3.42.0

package/src/components/WithPopup/WithPopup.tsx

@@ -1,184 +1,184 @@
-import { FC, useState } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  applyAction,
-  stopPropagation,
-  addDataAttributes,
-} from '@true-engineering/true-react-platform-helpers';
-import {
-  autoUpdate,
-  useFloating,
-  useClick,
-  useDismiss,
-  useHover,
-  useInteractions,
-  Placement,
-  Middleware,
-  FloatingPortal,
-  offset,
-  flip,
-  useTransitionStatus,
-  OffsetOptions,
-  UseHoverProps,
-  safePolygon,
-  useFocus,
-} from '@floating-ui/react';
-import { ICommonProps, IRenderNode } from '../../types';
-import { DEFAULT_OFFSET } from './constants';
-import {
-  IPopupEventType,
-  IReferenceProps,
-  IWithPopupChildrenProps,
-  IWithPopupToggleEvent,
-  IWithPopupTriggerProps,
-} from './types';
-import { useStyles, IWithPopupStyles } from './WithPopup.styles';
-
-export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
-  trigger: IRenderNode<IWithPopupTriggerProps>;
-  children: IRenderNode<IWithPopupChildrenProps>;
-  middlewares?: Middleware[];
-  /** @default eventType === 'click' ? 'bottom-end' : 'top' */
-  placement?: Placement;
-  /** @default 'click' */
-  eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
-  /** @default 6 */
-  popupOffset?: OffsetOptions;
-  /** @default true */
-  shouldStopPropagation?: boolean;
-  /** @default false */
-  shouldHideOnScroll?: boolean;
-  /** @default true */
-  shouldRenderInBody?: boolean;
-  /** Должен ли WithPopup рендерить свой div-wrapper в качестве триггера
-   * @default true, if eventType === hover */
-  isTriggerWrapped?: boolean;
-  /** @default true */
-  canBeFlipped?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
-}
-
-export const WithPopup: FC<IWithPopupProps> = ({
-  trigger,
-  children,
-  middlewares = [],
-  eventType = 'click',
-  placement = eventType === 'click' ? 'bottom-end' : 'top',
-  hoverDelay = 0,
-  popupOffset = DEFAULT_OFFSET,
-  shouldStopPropagation = true,
-  shouldHideOnScroll = false,
-  shouldRenderInBody = true,
-  canBeFlipped = true,
-  isTriggerWrapped = eventType === 'hover',
-  isDisabled = false,
-  tweakStyles,
-  data,
-  testId,
-  onToggle,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
-    event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive, event);
-      setIsOpen(isActive);
-    }
-  };
-
-  const handleClose = (event?: IWithPopupToggleEvent) => {
-    handleToggle(false, event);
-  };
-
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    middleware: [
-      offset(popupOffset),
-      canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
-      ...middlewares,
-    ],
-    whileElementsMounted: autoUpdate,
-    placement,
-    onOpenChange: handleToggle,
-  });
-
-  const hover = useHover(context, {
-    enabled: eventType === 'hover',
-    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
-    handleClose: safePolygon(),
-  });
-
-  const focus = useFocus(context, { enabled: eventType === 'hover' });
-
-  const click = useClick(context, { enabled: eventType === 'click' });
-
-  const dismiss = useDismiss(context, {
-    enabled: eventType === 'click',
-    ancestorScroll: shouldHideOnScroll,
-  });
-
-  const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
-
-  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
-
-  const referenceProps: IReferenceProps = getReferenceProps({
-    ref: refs.setReference,
-    ...(shouldStopPropagation && {
-      onClick: stopPropagation,
-    }),
-  });
-
-  const triggerElement = applyAction(trigger, {
-    referenceProps: !isTriggerWrapped ? referenceProps : undefined,
-    triggerProps: {
-      isActive: isOpen,
-      isDisabled,
-      ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
-    },
-  });
-
-  return (
-    <>
-      {isTriggerWrapped ? (
-        <div
-          className={clsx(classes.trigger, {
-            [classes.clickable]: eventType === 'click',
-            [classes.disabled]: isDisabled,
-            [classes.active]: isOpen,
-          })}
-          {...referenceProps}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-        >
-          {triggerElement}
-        </div>
-      ) : (
-        triggerElement
-      )}
-      {isMounted && (
-        <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
-        >
-          <div
-            style={floatingStyles}
-            className={classes.popup}
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-          >
-            <div className={classes[`dropdown-${status}`]}>
-              {applyAction(children, { onClose: handleClose })}
-            </div>
-          </div>
-        </FloatingPortal>
-      )}
-    </>
-  );
-};
+import { FC, useState } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  applyAction,
+  stopPropagation,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
+import {
+  autoUpdate,
+  useFloating,
+  useClick,
+  useDismiss,
+  useHover,
+  useInteractions,
+  Placement,
+  Middleware,
+  FloatingPortal,
+  offset,
+  flip,
+  useTransitionStatus,
+  OffsetOptions,
+  UseHoverProps,
+  safePolygon,
+  useFocus,
+} from '@floating-ui/react';
+import { ICommonProps, IRenderNode } from '../../types';
+import { DEFAULT_OFFSET } from './constants';
+import {
+  IPopupEventType,
+  IReferenceProps,
+  IWithPopupChildrenProps,
+  IWithPopupToggleEvent,
+  IWithPopupTriggerProps,
+} from './types';
+import { useStyles, IWithPopupStyles } from './WithPopup.styles';
+
+export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
+  trigger: IRenderNode<IWithPopupTriggerProps>;
+  children: IRenderNode<IWithPopupChildrenProps>;
+  middlewares?: Middleware[];
+  /** @default eventType === 'click' ? 'bottom-end' : 'top' */
+  placement?: Placement;
+  /** @default 'click' */
+  eventType?: IPopupEventType;
+  /** @default 0 */
+  hoverDelay?: UseHoverProps['delay'];
+  /** @default 6 */
+  popupOffset?: OffsetOptions;
+  /** @default true */
+  shouldStopPropagation?: boolean;
+  /** @default false */
+  shouldHideOnScroll?: boolean;
+  /** @default true */
+  shouldRenderInBody?: boolean;
+  /** Должен ли WithPopup рендерить свой div-wrapper в качестве триггера
+   * @default true, if eventType === hover */
+  isTriggerWrapped?: boolean;
+  /** @default true */
+  canBeFlipped?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
+}
+
+export const WithPopup: FC<IWithPopupProps> = ({
+  trigger,
+  children,
+  middlewares = [],
+  eventType = 'click',
+  placement = eventType === 'click' ? 'bottom-end' : 'top',
+  hoverDelay = 0,
+  popupOffset = DEFAULT_OFFSET,
+  shouldStopPropagation = true,
+  shouldHideOnScroll = false,
+  shouldRenderInBody = true,
+  canBeFlipped = true,
+  isTriggerWrapped = eventType === 'hover',
+  isDisabled = false,
+  tweakStyles,
+  data,
+  testId,
+  onToggle,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
+    event?.stopPropagation();
+    if (!isDisabled) {
+      onToggle?.(isActive, event);
+      setIsOpen(isActive);
+    }
+  };
+
+  const handleClose = (event?: IWithPopupToggleEvent) => {
+    handleToggle(false, event);
+  };
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    middleware: [
+      offset(popupOffset),
+      canBeFlipped && flip({ fallbackAxisSideDirection: 'start' }),
+      ...middlewares,
+    ],
+    whileElementsMounted: autoUpdate,
+    placement,
+    onOpenChange: handleToggle,
+  });
+
+  const hover = useHover(context, {
+    enabled: eventType === 'hover',
+    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    handleClose: safePolygon(),
+  });
+
+  const focus = useFocus(context, { enabled: eventType === 'hover' });
+
+  const click = useClick(context, { enabled: eventType === 'click' });
+
+  const dismiss = useDismiss(context, {
+    enabled: eventType === 'click',
+    ancestorScroll: shouldHideOnScroll,
+  });
+
+  const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
+
+  const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
+
+  const referenceProps: IReferenceProps = getReferenceProps({
+    ref: refs.setReference,
+    ...(shouldStopPropagation && {
+      onClick: stopPropagation,
+    }),
+  });
+
+  const triggerElement = applyAction(trigger, {
+    referenceProps: !isTriggerWrapped ? referenceProps : undefined,
+    triggerProps: {
+      isActive: isOpen,
+      isDisabled,
+      ...(!isTriggerWrapped && { data, testId, ...referenceProps }),
+    },
+  });
+
+  return (
+    <>
+      {isTriggerWrapped ? (
+        <div
+          className={clsx(classes.trigger, {
+            [classes.clickable]: eventType === 'click',
+            [classes.disabled]: isDisabled,
+            [classes.active]: isOpen,
+          })}
+          {...referenceProps}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
+        >
+          {triggerElement}
+        </div>
+      ) : (
+        triggerElement
+      )}
+      {isMounted && (
+        <FloatingPortal
+          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
+        >
+          <div
+            style={floatingStyles}
+            className={classes.popup}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+          >
+            <div className={classes[`dropdown-${status}`]}>
+              {applyAction(children, { onClose: handleClose })}
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};

package/src/components/WithTooltip/WithTooltip.stories.tsx

@@ -1,56 +1,56 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { WithTooltip } from './WithTooltip';
-
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-const meta: Meta<typeof WithTooltip> = {
-  title: 'Data Display/WithTooltip',
-  component: WithTooltip,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-export default meta;
-type IStory = StoryObj<typeof WithTooltip>;
-
-export const Default: IStory = {
-  args: {
-    children: 'Наведи на меня - появится тултип',
-    tooltipText: 'Текст тултипа',
-    placement: 'top',
-    tooltipView: 'tooltip',
-    tooltipType: 'info',
-    eventType: 'hover',
-    isDisabled: false,
-    shouldRenderInBody: true,
-  },
-  render: (args) => (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 600,
-        height: 400,
-      }}
-    >
-      <WithTooltip {...args} />
-    </div>
-  ),
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { WithTooltip } from './WithTooltip';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
+
+const meta: Meta<typeof WithTooltip> = {
+  title: 'Data Display/WithTooltip',
+  component: WithTooltip,
+  argTypes: {
+    placement: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    eventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+export default meta;
+type IStory = StoryObj<typeof WithTooltip>;
+
+export const Default: IStory = {
+  args: {
+    children: 'Наведи на меня - появится тултип',
+    tooltipText: 'Текст тултипа',
+    placement: 'top',
+    tooltipView: 'tooltip',
+    tooltipType: 'info',
+    eventType: 'hover',
+    isDisabled: false,
+    shouldRenderInBody: true,
+  },
+  render: (args) => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 600,
+        height: 400,
+      }}
+    >
+      <WithTooltip {...args} />
+    </div>
+  ),
+};

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

@@ -1,7 +1,7 @@
-import { ITooltipStyles } from '../Tooltip';
-import { IWithPopupStyles } from '../WithPopup';
-
-export interface IWithTooltipStyles {
-  tweakWithPopup?: IWithPopupStyles;
-  tweakTooltip?: ITooltipStyles;
-}
+import { ITooltipStyles } from '../Tooltip';
+import { IWithPopupStyles } from '../WithPopup';
+
+export interface IWithTooltipStyles {
+  tweakWithPopup?: IWithPopupStyles;
+  tweakTooltip?: ITooltipStyles;
+}

package/src/components/WithTooltip/WithTooltip.tsx

@@ -1,67 +1,67 @@
-import { FC } from 'react';
-import { getTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { ITooltipProps, Tooltip } from '../Tooltip';
-import { IWithPopupProps, WithPopup } from '../WithPopup';
-import { IWithTooltipStyles } from './WithTooltip.styles';
-
-export interface IWithTooltipProps
-  extends Omit<
-      IWithPopupProps,
-      'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped' | 'tweakStyles'
-    >,
-    ICommonProps<IWithTooltipStyles> {
-  children: IWithPopupProps['trigger'];
-  /** @default 'hover' */
-  eventType?: IWithPopupProps['eventType'];
-  /** @default 'top' */
-  placement?: IWithPopupProps['placement'];
-  tooltipText?: ITooltipProps['text'];
-  /** @default 'tooltip' */
-  tooltipView?: ITooltipProps['view'];
-  /** @default 'info' */
-  tooltipType?: ITooltipProps['type'];
-}
-
-export const WithTooltip: FC<IWithTooltipProps> = ({
-  children,
-  eventType = 'hover',
-  placement = 'top',
-  tooltipText,
-  tooltipView = 'tooltip',
-  tooltipType = 'info',
-  isDisabled = false,
-  tweakStyles,
-  ...restProps
-}) => {
-  const tweakWithPopupStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakWithPopup',
-  });
-
-  const tweakTooltipStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakTooltip',
-  });
-
-  return (
-    <WithPopup
-      trigger={children}
-      placement={placement}
-      eventType={eventType}
-      isTriggerWrapped
-      isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
-      tweakStyles={tweakWithPopupStyles}
-      {...restProps}
-    >
-      <Tooltip
-        view={tooltipView}
-        type={tooltipType}
-        text={tooltipText}
-        tweakStyles={tweakTooltipStyles}
-        testId={getTestId(restProps.testId, 'tooltip')}
-      />
-    </WithPopup>
-  );
-};
+import { FC } from 'react';
+import { getTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ITooltipProps, Tooltip } from '../Tooltip';
+import { IWithPopupProps, WithPopup } from '../WithPopup';
+import { IWithTooltipStyles } from './WithTooltip.styles';
+
+export interface IWithTooltipProps
+  extends Omit<
+      IWithPopupProps,
+      'trigger' | 'children' | 'placement' | 'eventType' | 'isTriggerWrapped' | 'tweakStyles'
+    >,
+    ICommonProps<IWithTooltipStyles> {
+  children: IWithPopupProps['trigger'];
+  /** @default 'hover' */
+  eventType?: IWithPopupProps['eventType'];
+  /** @default 'top' */
+  placement?: IWithPopupProps['placement'];
+  tooltipText?: ITooltipProps['text'];
+  /** @default 'tooltip' */
+  tooltipView?: ITooltipProps['view'];
+  /** @default 'info' */
+  tooltipType?: ITooltipProps['type'];
+}
+
+export const WithTooltip: FC<IWithTooltipProps> = ({
+  children,
+  eventType = 'hover',
+  placement = 'top',
+  tooltipText,
+  tooltipView = 'tooltip',
+  tooltipType = 'info',
+  isDisabled = false,
+  tweakStyles,
+  ...restProps
+}) => {
+  const tweakWithPopupStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithPopup',
+  });
+
+  const tweakTooltipStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTooltip',
+  });
+
+  return (
+    <WithPopup
+      trigger={children}
+      placement={placement}
+      eventType={eventType}
+      isTriggerWrapped
+      isDisabled={isDisabled || !isReactNodeNotEmpty(tooltipText)}
+      tweakStyles={tweakWithPopupStyles}
+      {...restProps}
+    >
+      <Tooltip
+        view={tooltipView}
+        type={tooltipType}
+        text={tooltipText}
+        tweakStyles={tweakTooltipStyles}
+        testId={getTestId(restProps.testId, 'tooltip')}
+      />
+    </WithPopup>
+  );
+};

package/src/components/WithTooltip/index.ts

@@ -1,2 +1,2 @@
-export * from './WithTooltip';
-export type { IWithTooltipStyles } from './WithTooltip.styles';
+export * from './WithTooltip';
+export type { IWithTooltipStyles } from './WithTooltip.styles';