@true-engineering/true-react-common-ui-kit 3.25.1 → 3.26.0

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

@@ -1,6 +1,7 @@
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
 import { ComponentStory } from '@storybook/react';
 import { Button } from '../Button';
-import { List } from '../List';
+import { IListItem, List } from '../List';
 import { Tooltip } from '../Tooltip';
 import { WithPopup } from './WithPopup';
 
@@ -29,6 +30,21 @@ export default {
   },
 };
 
+const items: IListItem[] = [
+  {
+    item: 'Copy',
+    onClick: doNothing,
+  },
+  {
+    item: 'Paste',
+    onClick: doNothing,
+  },
+  {
+    item: 'Remove',
+    onClick: doNothing,
+  },
+];
+
 const Template: ComponentStory<typeof WithPopup> = (args) => (
   <div
     style={{
@@ -41,23 +57,28 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
       height: 400,
     }}
   >
+    <div onClick={() => console.log('parent onclick')}>
+      <WithPopup
+        {...args}
+        trigger={(props) => (
+          <Button icon="plus" isFullWidth {...props}>
+            {props.isActive ? 'Click (Active)' : 'Click (Not Active)'}
+          </Button>
+        )}
+      >
+        {({ onClose }) => <List items={items} onClick={onClose} />}
+      </WithPopup>
+    </div>
     <WithPopup
       {...args}
       eventType="hover"
-      trigger={({ isActive }) => <Button isActive={isActive}>Button</Button>}
+      trigger={
+        <Button icon="plus" isDisabled={args.isDisabled} isFullWidth>
+          Hover
+        </Button>
+      }
     >
-      <Tooltip text="Тултип" view="hint" />
-    </WithPopup>
-    <WithPopup {...args} eventType="click" trigger={<Button>Button</Button>}>
-      {({ onClose }) => (
-        <List
-          items={[
-            { item: 'Create Item', onClick: () => null },
-            { item: 'Copy Item', onClick: () => null },
-          ]}
-          onClick={onClose}
-        />
-      )}
+      <Tooltip text="Tooltip" />
     </WithPopup>
   </div>
 );
@@ -65,7 +86,7 @@ const Template: ComponentStory<typeof WithPopup> = (args) => (
 export const Default = Template.bind({});
 
 Default.args = {
-  canBeFlipped: false,
+  canBeFlipped: true,
   isDisabled: false,
   shouldRenderInBody: true,
   shouldHideOnScroll: false,

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

@@ -1,20 +1,18 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('WithPopup', {
-  root: {},
-
-  disabled: {
-    '& > $trigger': {
-      cursor: 'default',
-    },
-  },
-
   trigger: {
+    width: 'fit-content',
     cursor: 'pointer',
   },
 
+  disabled: {
+    cursor: 'default',
+  },
+
   popup: {
     zIndex: 5,
+    outline: 'none',
   },
 
   animationEnd: {},

package/src/components/WithPopup/WithPopup.tsx

@@ -1,6 +1,10 @@
-import { FC, ReactNode, useState, MouseEvent } from 'react';
+import { FC, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
+import {
+  addDataTestId,
+  applyAction,
+  isFunction,
+} from '@true-engineering/true-react-platform-helpers';
 import {
   autoUpdate,
   useFloating,
@@ -16,23 +20,26 @@ import {
   useTransitionStatus,
   OffsetOptions,
   UseHoverProps,
+  safePolygon,
+  useFocus,
 } from '@floating-ui/react';
 import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
+import { ICommonProps, IRenderNode } from '../../types';
 import { DEFAULT_OFFSET } from './constants';
-import { IPopupEventType } from './types';
+import {
+  IPopupEventType,
+  IWithPopupChildrenProps,
+  IWithPopupToggleEvent,
+  IWithPopupTriggerProps,
+} from './types';
 import { useStyles, IWithPopupStyles } from './WithPopup.styles';
 
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
-  trigger: ReactNode | FC<{ isActive: boolean }>;
-  children: ReactNode | FC<{ onClose: () => void }>;
+  trigger: IRenderNode<IWithPopupTriggerProps>;
+  children: IRenderNode<IWithPopupChildrenProps>;
   middlewares?: Middleware[];
   /** @default eventType === 'click' ? 'bottom-end' : 'top' */
   placement?: Placement;
-  /** @default false */
-  shouldHideOnScroll?: boolean;
-  /** @default false */
-  shouldRenderInBody?: boolean;
   /** @default 'click' */
   eventType?: IPopupEventType;
   /** @default 0 */
@@ -40,10 +47,17 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
   /** @default 6 */
   popupOffset?: OffsetOptions;
   /** @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) => void;
+  onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 
 export const WithPopup: FC<IWithPopupProps> = ({
@@ -52,11 +66,12 @@ export const WithPopup: FC<IWithPopupProps> = ({
   middlewares = [],
   eventType = 'click',
   placement = eventType === 'click' ? 'bottom-end' : 'top',
-  shouldHideOnScroll = false,
-  shouldRenderInBody = false,
   hoverDelay = 0,
   popupOffset = DEFAULT_OFFSET,
-  canBeFlipped = false,
+  shouldHideOnScroll = false,
+  shouldRenderInBody = true,
+  canBeFlipped = true,
+  isTriggerWrapped = eventType === 'hover',
   isDisabled = false,
   tweakStyles,
   data,
@@ -67,16 +82,16 @@ export const WithPopup: FC<IWithPopupProps> = ({
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleToggle = (isActive: boolean, event?: MouseEvent | Event) => {
+  const handleToggle = (isActive: boolean, event?: IWithPopupToggleEvent) => {
     event?.stopPropagation();
     if (!isDisabled) {
-      onToggle?.(isActive);
+      onToggle?.(isActive, event);
       setIsOpen(isActive);
     }
   };
 
-  const handleClose = () => {
-    handleToggle(false);
+  const handleClose = (event?: IWithPopupToggleEvent) => {
+    handleToggle(false, event);
   };
 
   const { refs, floatingStyles, context } = useFloating({
@@ -90,32 +105,46 @@ export const WithPopup: FC<IWithPopupProps> = ({
   const hover = useHover(context, {
     enabled: eventType === 'hover',
     delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+    handleClose: safePolygon(),
   });
-  const click = useClick(context, { enabled: eventType === 'click', toggle: false });
+
+  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 } = useInteractions([hover, click, dismiss]);
+  const { getFloatingProps, getReferenceProps } = useInteractions([hover, click, focus, dismiss]);
 
   const { isMounted, status } = useTransitionStatus(context, { duration: { close: 500 } });
 
-  return (
-    <div
-      ref={refs.setReference}
-      className={clsx(classes.root, { [classes.disabled]: isDisabled })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div
-        className={classes.trigger}
-        onClick={eventType === 'click' ? (e) => handleToggle(!isOpen, e) : undefined}
-        {...addDataTestId(testId, 'trigger')}
-      >
-        {isFunction(trigger) ? trigger({ isActive: isOpen }) : trigger}
-      </div>
+  const referenceProps: Partial<IWithPopupTriggerProps> = getReferenceProps({
+    ref: refs.setReference,
+  });
 
+  const triggerElement = applyAction(trigger, {
+    isActive: isOpen,
+    isDisabled,
+    ...(!isTriggerWrapped ? referenceProps : undefined),
+  });
+
+  return (
+    <>
+      {isTriggerWrapped ? (
+        <div
+          className={clsx(classes.trigger, { [classes.disabled]: isDisabled })}
+          {...referenceProps}
+          {...addDataTestId(testId)}
+          {...addDataAttributes(data)}
+        >
+          {triggerElement}
+        </div>
+      ) : (
+        triggerElement
+      )}
       {isMounted && (
         <FloatingPortal
           root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
@@ -132,6 +161,6 @@ export const WithPopup: FC<IWithPopupProps> = ({
           </div>
         </FloatingPortal>
       )}
-    </div>
+    </>
   );
 };

package/src/components/WithPopup/types.ts

@@ -1,3 +1,17 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
+import type { 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> {
+  isActive: boolean;
+  isDisabled?: boolean;
+  ref?: (node: Element | null) => void;
+}
+
+export interface IWithPopupChildrenProps {
+  onClose: (event?: IWithPopupToggleEvent) => void;
+}

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`;
+  },
+};