@transferwise/components 0.0.0-experimental-756c861 → 0.0.0-experimental-a4db2ca

package/README.md

@@ -44,7 +44,7 @@ export default function Hello() {
 
 This package exposes [type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for all components.
 
-Note: types for some of components are not 100% accurate (some of them will be just [`any`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)), this is due to fact that many of components written on JavaScript and types generated by [react-to-typescript-definitions](https://www.npmjs.com/package/react-to-typescript-definitions) based of components `PropTypes` and unfortunatly the library doesn't resolve all `PropTypes` features and use cases (e.g custom validators, `PropTypes.objectOf`, [requireIf](https://www.npmjs.com/package/react-required-if), etc). But bear with us as eventually it would be fully on TypeScript.
+Note: types for some of components are not 100% accurate (some of them will be just [`any`](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#any)), this is due to fact that many of components written on JavaScript and types generated by [react-to-typescript-definitions](https://www.npmjs.com/package/react-to-typescript-definitions) based of components `PropTypes` and unfortunatly the library doesn't resolve all `PropTypes` features and use cases (e.g custom validators, `PropTypes.objectOf`, etc). But bear with us as eventually it would be fully on TypeScript.
 
 Please follow [rules for JS components](https://github.com/transferwise/neptune-web/blob/main/packages/components/CONTRIBUTING.md#js-component-rules) in order to generate accurate types for them.
 

package/build/index.js

@@ -11,17 +11,16 @@ var reactTransitionGroup = require('react-transition-group');
 var focus = require('@react-aria/focus');
 var reactDom = require('react-dom');
 var neptuneValidation = require('@transferwise/neptune-validation');
-var PropTypes = require('prop-types');
 var formatting = require('@transferwise/formatting');
 var react$1 = require('@headlessui/react');
 var mergeProps = require('merge-props');
 var react = require('@floating-ui/react');
 var overlays = require('@react-aria/overlays');
 var reactPopper = require('react-popper');
+var PropTypes = require('prop-types');
 var art = require('@wise/art');
 var clamp$2 = require('lodash.clamp');
 var debounce = require('lodash.debounce');
-var requiredIf = require('react-required-if');
 var web = require('@react-spring/web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -47,11 +46,10 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
 
 exports.Typography = void 0;
 (function (Typography) {
@@ -1501,7 +1499,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-const Card$2 = /*#__PURE__*/React.forwardRef(({
+const Card$1 = /*#__PURE__*/React.forwardRef(({
   className,
   children = null,
   id,
@@ -1534,7 +1532,7 @@ const Card$2 = /*#__PURE__*/React.forwardRef(({
     }), children]
   });
 });
-Card$2.displayName = 'Card';
+Card$1.displayName = 'Card';
 
 function Display({
   as: Heading = 'h1',
@@ -1913,7 +1911,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
-  return /*#__PURE__*/jsxRuntime.jsxs(Card$2, {
+  return /*#__PURE__*/jsxRuntime.jsxs(Card$1, {
     ...commonProps,
     ...checkedProps,
     ...props,
@@ -2210,20 +2208,19 @@ const isVisible = (container, el) => {
   return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
 };
 
-const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
-  const {
-    'aria-label': ariaLabel,
-    as: Element,
-    isExpanded,
-    title,
-    details,
-    children,
-    onClick,
-    icon,
-    id,
-    className,
-    ...rest
-  } = props;
+const Card = /*#__PURE__*/React.forwardRef(function Card({
+  'aria-label': ariaLabel,
+  as: Element = 'div',
+  isExpanded,
+  title,
+  details,
+  children,
+  onClick,
+  icon,
+  id,
+  className,
+  'data-testid': dataTestId
+}, reference) {
   const isOpen = !!(isExpanded && children);
   return /*#__PURE__*/jsxRuntime.jsxs(Element, {
     ref: reference,
@@ -2233,7 +2230,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
       'np-card--has-icon': !!icon
     }),
     id: id,
-    "data-testid": rest['data-testid'],
+    "data-testid": dataTestId,
     children: [/*#__PURE__*/jsxRuntime.jsx(Option$2, {
       "aria-label": ariaLabel,
       as: children ? 'button' : 'div',
@@ -2245,7 +2242,7 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
       button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron, {
         orientation: isOpen ? exports.Position.TOP : exports.Position.BOTTOM
       }),
-      onClick: () => children && onClick(!isExpanded)
+      onClick: children ? () => onClick?.(!isExpanded) : undefined
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames__default.default('np-card__divider', {
         'np-card__divider--expanded': isOpen
@@ -2258,31 +2255,6 @@ const Card = /*#__PURE__*/React.forwardRef((props, reference) => {
     })]
   });
 });
-const hasChildren = ({
-  children
-}) => children;
-Card.propTypes = {
-  'aria-label': PropTypes__default.default.string,
-  as: PropTypes__default.default.string,
-  isExpanded: requiredIf__default.default(PropTypes__default.default.bool, hasChildren),
-  title: PropTypes__default.default.node.isRequired,
-  details: PropTypes__default.default.node.isRequired,
-  onClick: requiredIf__default.default(PropTypes__default.default.func, hasChildren),
-  icon: PropTypes__default.default.node,
-  children: PropTypes__default.default.node,
-  id: PropTypes__default.default.string,
-  className: PropTypes__default.default.string,
-  'data-testid': PropTypes__default.default.string
-};
-Card.defaultProps = {
-  'aria-label': undefined,
-  as: 'div',
-  children: null,
-  id: null,
-  className: null,
-  'data-testid': null
-};
-var Card$1 = Card;
 
 const CheckboxButton = /*#__PURE__*/React.forwardRef(({
   checked,
@@ -2772,15 +2744,15 @@ const SlidingPanel = /*#__PURE__*/React.forwardRef(({
   }));
 });
 
-const Drawer = ({
+function Drawer({
   children,
   className,
   footerContent,
   headerTitle,
   onClose,
-  open,
-  position
-}) => {
+  open = false,
+  position = 'right'
+}) {
   logActionRequiredIf('Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.', !onClose);
   const {
     isMobile
@@ -2818,32 +2790,7 @@ const Drawer = ({
       })
     })
   });
-};
-Drawer.propTypes = {
-  /** The content to appear in the drawer body. */
-  children: PropTypes__default.default.node,
-  className: PropTypes__default.default.string,
-  /** The content to appear in the drawer footer. */
-  footerContent: PropTypes__default.default.node,
-  /** The content to appear in the drawer header. */
-  headerTitle: PropTypes__default.default.node,
-  /** The status of Drawer either open or not. */
-  open: PropTypes__default.default.bool,
-  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
-  position: PropTypes__default.default.oneOf(['left', 'right', 'bottom']),
-  /** The action to perform on close click. */
-  onClose: PropTypes__default.default.func
-};
-Drawer.defaultProps = {
-  children: null,
-  className: undefined,
-  footerContent: null,
-  headerTitle: null,
-  onClose: null,
-  open: false,
-  position: exports.Position.RIGHT
-};
-var Drawer$1 = Drawer;
+}
 
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
@@ -2973,7 +2920,7 @@ const BottomSheet$1 = props => {
     };
   }
   const is400Zoom = useMedia(`(max-width: ${exports.Breakpoint.ZOOM_400}px)`);
-  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return is400Zoom ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: props.open,
     className: props.className,
     onClose: close,
@@ -5566,7 +5513,7 @@ const Modal = ({
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
   const titleId = React.useId();
-  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -10394,7 +10341,7 @@ function Select({
       , {
         className: classNames__default.default(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
       })]
-    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+    }), isMobile ? isSearchEnabled ? /*#__PURE__*/jsxRuntime.jsx(Drawer, {
       open: open,
       headerTitle: searchPlaceholder || formatMessage(messages$2.searchPlaceholder),
       onClose: handleCloseOptions,
@@ -14695,11 +14642,11 @@ exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.AvatarWrapper = AvatarWrapper;
 exports.Badge = Badge;
-exports.BaseCard = Card$2;
+exports.BaseCard = Card$1;
 exports.Body = Body;
 exports.BottomSheet = BottomSheet$1;
 exports.Button = Button;
-exports.Card = Card$1;
+exports.Card = Card;
 exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.CheckboxButton = CheckboxButton;
@@ -14718,7 +14665,7 @@ exports.DefinitionList = DefinitionList;
 exports.Dimmer = Dimmer$1;
 exports.DirectionProvider = DirectionProvider;
 exports.Display = Display;
-exports.Drawer = Drawer$1;
+exports.Drawer = Drawer;
 exports.DropFade = DropFade;
 exports.Emphasis = Emphasis;
 exports.Field = Field;