@transferwise/components 0.0.0-experimental-a6eccb9 → 0.0.0-experimental-eecc435

package/src/popover/Popover.tsx

@@ -1,106 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
-import { useRef, useState, cloneElement, useEffect, isValidElement } from 'react';
-
-import { Position, Typography } from '../common';
-import ResponsivePanel from '../common/responsivePanel';
-import Title from '../title';
-import { logActionRequired } from '../utilities';
-
-/** @deprecated Use `"top" | "bottom"` instead. */
-type PopoverPreferredPlacementDeprecated =
-  | `${Position.LEFT_TOP}`
-  | `${Position.RIGHT_TOP}`
-  | `${Position.BOTTOM_RIGHT}`
-  | `${Position.BOTTOM_LEFT}`;
-
-export type PopoverPreferredPlacement =
-  | `${Position.TOP}`
-  | `${Position.RIGHT}`
-  | `${Position.BOTTOM}`
-  | `${Position.LEFT}`
-  | PopoverPreferredPlacementDeprecated;
-
-export interface PopoverProps {
-  children?: React.ReactNode;
-  className?: string;
-  content: React.ReactNode;
-  preferredPlacement?: PopoverPreferredPlacement;
-  onClose?: () => void;
-  title?: React.ReactNode;
-}
-
-function resolvePlacement(preferredPlacement: PopoverPreferredPlacement) {
-  switch (preferredPlacement) {
-    case 'left-top':
-    case 'right-top':
-      return 'top';
-    case 'bottom-left':
-    case 'bottom-right':
-      return 'bottom';
-  }
-  return preferredPlacement;
-}
-
-export default function Popover({
-  children,
-  className,
-  content,
-  preferredPlacement = Position.RIGHT,
-  title,
-  onClose,
-}: PopoverProps) {
-  const resolvedPlacement = resolvePlacement(preferredPlacement);
-  useEffect(() => {
-    if (resolvedPlacement !== preferredPlacement) {
-      logActionRequired(
-        `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`,
-      );
-    }
-  }, [preferredPlacement, resolvedPlacement]);
-
-  const anchorReference = useRef(null);
-  const [open, setOpen] = useState(false);
-  const { isModern } = useTheme();
-
-  const handleOnClose = () => {
-    setOpen(false);
-    onClose?.();
-  };
-
-  return (
-    <span className={classnames('np-popover', className)}>
-      <span ref={anchorReference} className="d-inline-block">
-        {isValidElement<{ onClick?: () => void }>(children)
-          ? cloneElement(children, {
-              onClick: () => {
-                children.props.onClick?.();
-                setOpen((prevOpen) => !prevOpen);
-              },
-            })
-          : children}
-      </span>
-      <ResponsivePanel
-        open={open}
-        anchorRef={anchorReference}
-        position={resolvedPlacement}
-        arrow
-        className="np-popover__container"
-        onClose={handleOnClose}
-      >
-        <div
-          className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
-          aria-hidden={!open}
-          role="dialog"
-        >
-          {title && (
-            <Title type={Typography.TITLE_BODY} className="m-b-1">
-              {title}
-            </Title>
-          )}
-          {content}
-        </div>
-      </ResponsivePanel>
-    </span>
-  );
-}

package/src/popover/index.ts

@@ -1,2 +0,0 @@
-export { default } from './Popover';
-export type { PopoverProps, PopoverPreferredPlacement } from './Popover';