@transferwise/components 0.0.0-experimental-e95c8a5 → 0.0.0-experimental-39ab3ec

package/src/inputs/_BottomSheet.tsx

@@ -1,128 +0,0 @@
-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

@@ -1,7 +0,0 @@
-.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

@@ -1,27 +0,0 @@
-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

@@ -1,38 +0,0 @@
-.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

@@ -1,118 +0,0 @@
-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/utilities/wrapInFragment.tsx

@@ -1,3 +0,0 @@
-export function wrapInFragment(value: unknown) {
-  return <>{value}</>;
-}