@true-engineering/true-react-common-ui-kit 3.16.0 → 3.18.0

package/src/components/WithPopup/WithPopup.tsx

@@ -1,132 +1,137 @@
-import { FC, ReactNode, useState, MouseEvent } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
-import {
-  autoUpdate,
-  useFloating,
-  useClick,
-  useDismiss,
-  useHover,
-  useInteractions,
-  Placement,
-  Middleware,
-  FloatingPortal,
-  offset,
-  flip,
-  useTransitionStatus,
-  OffsetOptions,
-  UseHoverProps,
-} from '@floating-ui/react';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { DEFAULT_OFFSET } from './constants';
-import { IPopupEventType, ITransitionStatus } from './types';
-import { useStyles, IWithPopupStyles } from './WithPopup.styles';
-
-export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
-  trigger: ReactNode | FC<{ isActive: boolean }>;
-  children: ReactNode | FC<{ status: ITransitionStatus; onClose: () => void }>;
-  middlewares?: Middleware[];
-  /** @default eventType === 'click' ? 'bottom-end' : 'top' */
-  placement?: Placement;
-  /** @default false */
-  shouldHideOnScroll?: boolean;
-  /** @default true */
-  shouldRenderInBody?: boolean;
-  /** @default 'click' */
-  eventType?: IPopupEventType;
-  /** @default 0 */
-  hoverDelay?: UseHoverProps['delay'];
-  /** @default 6 */
-  popupOffset?: OffsetOptions;
-  /** @default false */
-  canBeFlipped?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  onToggle?: (isActive: boolean) => void;
-}
-
-export const WithPopup: FC<IWithPopupProps> = ({
-  trigger,
-  children,
-  middlewares = [],
-  eventType = 'click',
-  placement = eventType === 'click' ? 'bottom-end' : 'top',
-  shouldHideOnScroll = false,
-  shouldRenderInBody = false,
-  hoverDelay = 0,
-  popupOffset = DEFAULT_OFFSET,
-  canBeFlipped = false,
-  isDisabled = false,
-  tweakStyles,
-  data,
-  testId,
-  onToggle,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggle = (isActive: boolean, event?: MouseEvent | Event) => {
-    event?.stopPropagation();
-    if (!isDisabled) {
-      onToggle?.(isActive);
-      setIsOpen(isActive);
-    }
-  };
-
-  const handleClose = () => {
-    handleToggle(false);
-  };
-
-  const { refs, floatingStyles, context } = useFloating({
-    open: isOpen,
-    middleware: [offset(popupOffset), ...(canBeFlipped ? [flip()] : []), ...middlewares],
-    whileElementsMounted: autoUpdate,
-    placement,
-    onOpenChange: handleToggle,
-  });
-
-  const hover = useHover(context, { enabled: eventType === 'hover', delay: hoverDelay });
-  const click = useClick(context, { enabled: eventType === 'click', toggle: false });
-  const dismiss = useDismiss(context, {
-    enabled: eventType === 'click',
-    ancestorScroll: shouldHideOnScroll,
-  });
-
-  const { getFloatingProps } = useInteractions([hover, click, dismiss]);
-
-  const { isMounted, status } = useTransitionStatus(context);
-
-  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>
-
-      {isMounted && (
-        <FloatingPortal
-          root={!shouldRenderInBody ? (refs.reference.current as HTMLDivElement) : undefined}
-        >
-          <div
-            style={floatingStyles}
-            className={classes.popup}
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-          >
-            {isFunction(children) ? children({ status, onClose: handleClose }) : children}
-          </div>
-        </FloatingPortal>
-      )}
-    </div>
-  );
-};
+import { FC, ReactNode, useState, MouseEvent } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isFunction } from '@true-engineering/true-react-platform-helpers';
+import {
+  autoUpdate,
+  useFloating,
+  useClick,
+  useDismiss,
+  useHover,
+  useInteractions,
+  Placement,
+  Middleware,
+  FloatingPortal,
+  offset,
+  flip,
+  useTransitionStatus,
+  OffsetOptions,
+  UseHoverProps,
+} from '@floating-ui/react';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { DEFAULT_OFFSET } from './constants';
+import { IPopupEventType } from './types';
+import { useStyles, IWithPopupStyles } from './WithPopup.styles';
+
+export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
+  trigger: ReactNode | FC<{ isActive: boolean }>;
+  children: ReactNode | FC<{ onClose: () => void }>;
+  middlewares?: Middleware[];
+  /** @default eventType === 'click' ? 'bottom-end' : 'top' */
+  placement?: Placement;
+  /** @default false */
+  shouldHideOnScroll?: boolean;
+  /** @default true */
+  shouldRenderInBody?: boolean;
+  /** @default 'click' */
+  eventType?: IPopupEventType;
+  /** @default 0 */
+  hoverDelay?: UseHoverProps['delay'];
+  /** @default 6 */
+  popupOffset?: OffsetOptions;
+  /** @default false */
+  canBeFlipped?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  onToggle?: (isActive: boolean) => void;
+}
+
+export const WithPopup: FC<IWithPopupProps> = ({
+  trigger,
+  children,
+  middlewares = [],
+  eventType = 'click',
+  placement = eventType === 'click' ? 'bottom-end' : 'top',
+  shouldHideOnScroll = false,
+  shouldRenderInBody = false,
+  hoverDelay = 0,
+  popupOffset = DEFAULT_OFFSET,
+  canBeFlipped = false,
+  isDisabled = false,
+  tweakStyles,
+  data,
+  testId,
+  onToggle,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleToggle = (isActive: boolean, event?: MouseEvent | Event) => {
+    event?.stopPropagation();
+    if (!isDisabled) {
+      onToggle?.(isActive);
+      setIsOpen(isActive);
+    }
+  };
+
+  const handleClose = () => {
+    handleToggle(false);
+  };
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    middleware: [offset(popupOffset), ...(canBeFlipped ? [flip()] : []), ...middlewares],
+    whileElementsMounted: autoUpdate,
+    placement,
+    onOpenChange: handleToggle,
+  });
+
+  const hover = useHover(context, {
+    enabled: eventType === 'hover',
+    delay: typeof hoverDelay === 'number' ? { open: hoverDelay, close: 0 } : hoverDelay,
+  });
+  const click = useClick(context, { enabled: eventType === 'click', toggle: false });
+  const dismiss = useDismiss(context, {
+    enabled: eventType === 'click',
+    ancestorScroll: shouldHideOnScroll,
+  });
+
+  const { getFloatingProps } = useInteractions([hover, click, 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>
+
+      {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}`]}>
+              {isFunction(children) ? children({ onClose: handleClose }) : children}
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </div>
+  );
+};

package/src/components/WithPopup/constants.ts

@@ -1,3 +1,3 @@
-export const DEFAULT_OFFSET = 6;
-
-export const POPUP_EVENT_TYPES = ['hover', 'click'] as const;
+export const DEFAULT_OFFSET = 6;
+
+export const POPUP_EVENT_TYPES = ['hover', 'click'] as const;

package/src/components/WithPopup/index.ts

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

package/src/components/WithPopup/types.ts

@@ -1,6 +1,3 @@
-import type { useTransitionStatus } from '@floating-ui/react';
-import type { POPUP_EVENT_TYPES } from './constants';
-
-export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];
-
-export type ITransitionStatus = ReturnType<typeof useTransitionStatus>['status'];
+import type { POPUP_EVENT_TYPES } from './constants';
+
+export type IPopupEventType = (typeof POPUP_EVENT_TYPES)[number];

package/src/components/index.ts

@@ -1,43 +1,43 @@
-export * from './AccountInfo';
-export * from './AddButton';
-export * from './Button';
-export * from './Checkbox';
-export * from './CloseButton';
-export * from './Colors';
-export * from './CssBaseline';
-export * from './DateInput';
-export * from './DatePicker';
-export * from './Description';
-export * from './FiltersPane';
-export * from './Flag';
-export * from './FlexibleTable';
-export * from './Icon';
-export * from './IconButton';
-export * from './IncrementInput';
-export * from './Input';
-export * from './List';
-export * from './Modal';
-export * from './MoreMenu';
-export * from './MultiSelect';
-export * from './MultiSelectList';
-export * from './Notification';
-export * from './NumberInput';
-export * from './PhoneInput';
-export * from './RadioButton';
-export * from './ScrollIntoViewIfNeeded';
-export * from './SearchInput';
-export * from './Select';
-export * from './Selector';
-export * from './Skeleton';
-export * from './SmartInput';
-export * from './Status';
-export * from './Switch';
-export * from './TextArea';
-export * from './TextButton';
-export * from './TextWithInfo';
-export * from './TextWithTooltip';
-export * from './ThemedPreloader';
-export * from './Toaster';
-export * from './Tooltip';
-export * from './NewMoreMenu';
-export * from './WithPopup';
+export * from './AccountInfo';
+export * from './AddButton';
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Colors';
+export * from './CssBaseline';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './Description';
+export * from './FiltersPane';
+export * from './Flag';
+export * from './FlexibleTable';
+export * from './Icon';
+export * from './IconButton';
+export * from './IncrementInput';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './MoreMenu';
+export * from './MultiSelect';
+export * from './MultiSelectList';
+export * from './Notification';
+export * from './NumberInput';
+export * from './PhoneInput';
+export * from './RadioButton';
+export * from './ScrollIntoViewIfNeeded';
+export * from './SearchInput';
+export * from './Select';
+export * from './Selector';
+export * from './Skeleton';
+export * from './SmartInput';
+export * from './Status';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextButton';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './NewMoreMenu';
+export * from './WithPopup';

package/src/constants/index.ts

@@ -1 +1 @@
-export * from './phone-info';
+export * from './phone-info';