@transferwise/components 0.0.0-experimental-8b6ee2a → 0.0.0-experimental-335b83d

package/src/inputs/_BottomSheet.tsx

@@ -0,0 +1,128 @@
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { Transition } from '@headlessui/react';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { CloseButton } from '../common/closeButton';
+import { PreventScroll } from '../common/preventScroll/PreventScroll';
+import { Size } from '../common/propsValues/size';
+
+export interface BottomSheetProps {
+  open: boolean;
+  renderTrigger?: (args: {
+    ref: React.RefCallback<Element>;
+    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
+      [key: string]: unknown;
+    };
+  }) => React.ReactNode;
+  title?: string;
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  padding?: 'none' | 'md';
+  children?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose,
+}: BottomSheetProps) {
+  const { refs, context } = useFloating<Element>({
+    open,
+    onOpenChange: (value) => {
+      if (!value) {
+        onClose?.();
+      }
+    },
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
+
+  const [floatingKey, setFloatingKey] = useState(0);
+
+  return (
+    <>
+      {open ? <PreventScroll /> : null}
+      {renderTrigger?.({
+        ref: refs.setReference,
+        getInteractionProps: getReferenceProps,
+      })}
+
+      <FloatingPortal>
+        <Transition
+          show={open}
+          className="np-bottom-sheet-v2-container"
+          beforeEnter={() => {
+            setFloatingKey((prev) => prev + 1);
+          }}
+        >
+          <Transition.Child
+            enter="np-bottom-sheet-v2-backdrop-container--enter"
+            enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
+            leave="np-bottom-sheet-v2-backdrop-container--leave"
+            leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+          >
+            <div className="np-bottom-sheet-v2-backdrop" />
+          </Transition.Child>
+
+          <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+            <div className="np-bottom-sheet-v2">
+              <Transition.Child
+                className="np-bottom-sheet-v2-content"
+                enter="np-bottom-sheet-v2-content--enter"
+                enterFrom="np-bottom-sheet-v2-content--enter-from"
+                leave="np-bottom-sheet-v2-content--leave"
+                leaveTo="np-bottom-sheet-v2-content--leave-to"
+              >
+                <div
+                  key={floatingKey} // Force inner state invalidation on open
+                  ref={refs.setFloating}
+                  className="np-bottom-sheet-v2-content-inner-container"
+                  {...getFloatingProps()}
+                >
+                  <div className="np-bottom-sheet-v2-header">
+                    <CloseButton
+                      size={Size.SMALL}
+                      onClick={() => {
+                        onClose?.();
+                      }}
+                    />
+                  </div>
+                  <div
+                    className={classNames(
+                      'np-bottom-sheet-v2-content-inner',
+                      title && 'np-bottom-sheet-v2-content-inner--has-title',
+                      {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                      },
+                    )}
+                  >
+                    {title ? (
+                      <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                    ) : null}
+                    <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                  </div>
+                </div>
+              </Transition.Child>
+            </div>
+          </FloatingFocusManager>
+        </Transition>
+      </FloatingPortal>
+    </>
+  );
+}

package/src/inputs/_ButtonInput.less

@@ -0,0 +1,7 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: var(--size-10);
+  text-align: start;
+}

package/src/inputs/_ButtonInput.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+
+import { useInputPaddings } from './InputGroup';
+import { formControlClassNameBase } from './_common';
+
+export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const ButtonInput = forwardRef(function ButtonInput(
+  { size = 'md', className, style, ...restProps }: ButtonInputProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const inputPaddings = useInputPaddings();
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={classNames(className, formControlClassNameBase({ size }), 'np-button-input')}
+      // eslint-disable-next-line react/forbid-dom-props
+      style={{ ...inputPaddings, ...style }}
+      {...restProps}
+    />
+  );
+});

package/src/inputs/_Popover.less

@@ -0,0 +1,38 @@
+.np-popover-v2-container {
+  z-index: 10;
+  display: flex;
+  max-height: var(--max-height);
+  width: var(--width);
+  min-width: min-content;
+  flex-direction: column;
+  border-radius: var(--radius-small);
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.np-popover-v2 {
+  display: grid;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+
+  &--has-title {
+    grid-template-rows: auto 1fr;
+  }
+
+  &--padding-md {
+    padding: var(--size-16);
+  }
+}
+
+.np-popover-v2-title {
+  color: var(--color-content-primary);
+}
+
+.np-popover-v2-content {
+  color: var(--color-content-secondary);
+}

package/src/inputs/_Popover.tsx

@@ -0,0 +1,118 @@
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  shift,
+  type Side,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { Transition } from '@headlessui/react';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { PreventScroll } from '../common/preventScroll/PreventScroll';
+
+export interface PopoverProps {
+  placement?: Side;
+  open: boolean;
+  renderTrigger: (args: {
+    ref: React.RefCallback<Element>;
+    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
+      [key: string]: unknown;
+    };
+  }) => React.ReactNode;
+  title?: string;
+  padding?: 'none' | 'md';
+  children?: React.ReactNode;
+  onClose?: () => void;
+}
+
+const floatingPadding = 16;
+
+export function Popover({
+  placement,
+  open,
+  renderTrigger,
+  title,
+  padding = 'md',
+  children,
+  onClose,
+}: PopoverProps) {
+  const { refs, floatingStyles, context } = useFloating<Element>({
+    placement,
+    middleware: [
+      offset(8),
+      flip({ padding: floatingPadding, crossAxis: false }),
+      shift(),
+      size({
+        padding: floatingPadding,
+        apply: ({ elements, rects, availableHeight }) => {
+          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
+          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: (value) => {
+      if (!value) {
+        onClose?.();
+      }
+    },
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);
+
+  const [floatingKey, setFloatingKey] = useState(0);
+
+  return (
+    <>
+      {open ? <PreventScroll /> : null}
+      {renderTrigger({
+        ref: refs.setReference,
+        getInteractionProps: getReferenceProps,
+      })}
+
+      <FloatingPortal>
+        <FloatingFocusManager context={context}>
+          <Transition
+            show={open}
+            leave="transition-opacity"
+            leaveTo="opacity-0"
+            beforeEnter={() => {
+              setFloatingKey((prev) => prev + 1);
+            }}
+          >
+            <div
+              key={floatingKey} // Force inner state invalidation on open
+              ref={refs.setFloating}
+              className="np-popover-v2-container"
+              // eslint-disable-next-line react/forbid-dom-props
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              <div
+                className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                  'np-popover-v2--padding-md': padding === 'md',
+                })}
+              >
+                {title ? <h2 className="np-popover-v2-title np-text-title-body">{title}</h2> : null}
+                <div className="np-popover-v2-content np-text-body-default">{children}</div>
+              </div>
+            </div>
+          </Transition>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    </>
+  );
+}

package/src/inputs/_common.less

@@ -56,8 +56,4 @@
   &--size-lg {
     height: var(--size-72) !important;
   }
-
-  &--shape-rectangle {
-    border-radius: var(--radius-small);
-  }
 }

package/src/inputs/_common.ts

@@ -16,6 +16,5 @@ export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase
       'np-form-control--size-md np-text-body-large': size === 'md',
       'np-form-control--size-lg np-text-title-subsection': size === 'lg',
     },
-    'np-form-control--shape-rectangle',
   );
 }