@transferwise/components 46.19.0 → 46.20.1

package/src/popover/index.ts

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

package/src/promoCard/PromoCard.tsx

@@ -1,9 +1,10 @@
+import { useId } from '@radix-ui/react-id';
 import { Check } from '@transferwise/icons';
 import classNames from 'classnames';
-import React, { forwardRef, FunctionComponent, ReactElement, useEffect, useState } from 'react';
+import React, { forwardRef, FunctionComponent, useEffect, useState } from 'react';
 
 import Body from '../body';
-import { Typography, generateRandomId } from '../common';
+import { Typography } from '../common';
 import Card, { CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
@@ -230,7 +231,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       }
     };
 
-    const componentId = `${id || generateRandomId()}`;
+    const fallbackId = useId();
+    const componentId = id || fallbackId;
 
     // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
     // `'download'` if `download` is truthy. If neither condition is true, set

package/build/types/common/randomId.d.ts

@@ -1,13 +0,0 @@
-/**
- * generateRandomId() function
- *
- * This function generates a random string of characters that can be used as
- * an ID.
- *
- * @returns {string} A random string of characters.
- * @example
- * const id = generateRandomId();
- * // id will be a random string of characters, such as "id-4711".
- */
-export declare const generateRandomId: () => string;
-//# sourceMappingURL=randomId.d.ts.map

package/build/types/common/randomId.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"randomId.d.ts","sourceRoot":"","sources":["../../../src/common/randomId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,QAAO,MAEnC,CAAC"}

package/src/common/randomId.ts

@@ -1,14 +0,0 @@
-/**
- * generateRandomId() function
- *
- * This function generates a random string of characters that can be used as
- * an ID.
- *
- * @returns {string} A random string of characters.
- * @example
- * const id = generateRandomId();
- * // id will be a random string of characters, such as "id-4711".
- */
-export const generateRandomId = (): string => {
-  return `id-${Math.random().toString(36).slice(7)}`;
-};

package/src/popover/Popover.js

@@ -1,101 +0,0 @@
-import { useTheme } from '@wise/components-theming';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import { useRef, useState, cloneElement } from 'react';
-
-import { Position, Typography } from '../common';
-import ResponsivePanel from '../common/responsivePanel';
-import Title from '../title';
-import { logActionRequiredIf } from '../utilities';
-
-const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
-  logActionRequired({ preferredPlacement });
-  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">
-        {cloneElement(children, {
-          onClick: () => {
-            if (children?.props?.onClick) {
-              children.props.onClick();
-            }
-            setOpen(!open);
-          },
-        })}
-      </span>
-      <ResponsivePanel
-        open={open}
-        anchorRef={anchorReference}
-        position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
-        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>
-  );
-};
-
-const logActionRequired = ({ preferredPlacement }) => {
-  logActionRequiredIf(
-    `Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`,
-    deprecatedPlacements[preferredPlacement],
-  );
-};
-
-Popover.defaultProps = {
-  className: undefined,
-  preferredPlacement: Position.RIGHT,
-  title: undefined,
-};
-
-Popover.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  content: PropTypes.node.isRequired,
-  /**
-   * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
-   * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
-   */
-  preferredPlacement: PropTypes.oneOf([
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'left-top',
-    'right-top',
-    'bottom-right',
-    'bottom-left',
-  ]),
-  onClose: PropTypes.func,
-  title: PropTypes.node,
-};
-
-const deprecatedPlacements = {
-  [Position.BOTTOM_LEFT]: Position.BOTTOM,
-  [Position.BOTTOM_RIGHT]: Position.BOTTOM,
-  [Position.LEFT_TOP]: Position.TOP,
-  [Position.RIGHT_TOP]: Position.TOP,
-};
-
-export default Popover;

package/src/popover/index.js

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