@transferwise/components 0.0.0-experimental-e9426b6 → 0.0.0-experimental-0397551

package/src/inputs/SelectInput/components/SelectInputOptionsContainer/SelectInputOptionsContainer.tsx

@@ -1,56 +0,0 @@
-import { forwardRef, useEffect } from 'react';
-
-import { useEffectEvent } from '../../../../common/hooks/useEffectEvent';
-
-interface SelectInputOptionsContainerProps extends React.ComponentPropsWithRef<'div'> {
-  onAriaActiveDescendantChange: (value: React.AriaAttributes['aria-activedescendant']) => void;
-}
-
-export const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContainer(
-  {
-    'aria-orientation': ariaOrientation,
-    'aria-activedescendant': ariaActiveDescendant,
-    role,
-    tabIndex,
-    onAriaActiveDescendantChange,
-    onKeyDown,
-    ...restProps
-  }: SelectInputOptionsContainerProps,
-  ref: React.ForwardedRef<HTMLDivElement | null>,
-) {
-  const handleAriaActiveDescendantChange = useEffectEvent(onAriaActiveDescendantChange);
-  useEffect(() => {
-    handleAriaActiveDescendantChange(ariaActiveDescendant);
-  }, [ariaActiveDescendant, handleAriaActiveDescendantChange]);
-
-  return (
-    <div
-      ref={ref}
-      role="none"
-      onKeyDown={(event) => {
-        // Prevent confirmation close without an active item
-        if (event.key === 'Enter' && ariaActiveDescendant == null) {
-          return;
-        }
-
-        // Required to make ListBox focusable
-        if (event.key === 'Tab') {
-          return;
-        }
-
-        // Prevent absorbing Escape early
-        if (event.key === 'Escape') {
-          onKeyDown?.({
-            ...event,
-            preventDefault: () => {},
-            stopPropagation: () => {},
-          });
-          return;
-        }
-
-        onKeyDown?.(event);
-      }}
-      {...restProps}
-    />
-  );
-});

package/src/inputs/SelectInput/components/SelectInputOptionsContainer/index.ts

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

package/src/inputs/SelectInput/components/SelectInputTriggerButton/SelectInputTriggerButton.tsx

@@ -1,39 +0,0 @@
-import { ListboxButton } from '@headlessui/react';
-import mergeProps from 'merge-props';
-import { useContext, createContext } from 'react';
-
-import { PolymorphicWithOverrides } from '../../../../common/polymorphicWithOverrides/PolymorphicWithOverrides';
-import { Merge } from '../../../../utils';
-
-export const SelectInputTriggerButtonPropsContext = createContext<{
-  ref?: React.ForwardedRef<HTMLButtonElement | null>;
-  id?: string;
-  onClick?: (event: React.MouseEvent) => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
-  [key: string]: unknown;
-}>({});
-
-type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
-
-export type SelectInputTriggerButtonProps<
-  T extends SelectInputTriggerButtonElementType = 'button',
-> = Merge<React.ComponentPropsWithoutRef<T>, { as?: T }>;
-
-export function SelectInputTriggerButton<T extends SelectInputTriggerButtonElementType = 'button'>({
-  as = 'button' as T,
-  ...restProps
-}: SelectInputTriggerButtonProps<T>) {
-  const { ref, onClick, onKeyDown, ...interactionProps } = useContext(
-    SelectInputTriggerButtonPropsContext,
-  );
-
-  return (
-    <ListboxButton
-      ref={ref}
-      as={PolymorphicWithOverrides}
-      role="combobox"
-      __overrides={{ as, ...interactionProps }}
-      {...mergeProps({ onClick, onKeyDown }, restProps)}
-    />
-  );
-}

package/src/inputs/SelectInput/components/SelectInputTriggerButton/index.ts

@@ -1,5 +0,0 @@
-export {
-  SelectInputTriggerButton,
-  SelectInputTriggerButtonPropsContext,
-} from './SelectInputTriggerButton';
-export type { SelectInputTriggerButtonProps } from './SelectInputTriggerButton';

package/src/inputs/SelectInput/index.ts

@@ -1,13 +0,0 @@
-export { SelectInput } from './SelectInput';
-export { SelectInputOptionContent } from './components/SelectInputOptionContent';
-export { SelectInputTriggerButton } from './components/SelectInputTriggerButton';
-
-export type {
-  SelectInputGroupItem,
-  SelectInputItem,
-  SelectInputOptionContentProps,
-  SelectInputOptionItem,
-  SelectInputProps,
-  SelectInputSeparatorItem,
-  SelectInputTriggerButtonProps,
-} from './SelectInput.types';

package/{src/inputs/SelectInput → build/styles/inputs}/SelectInput.css

@@ -148,6 +148,28 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.np-select-input-options-container:focus {
+  outline: none;
+}
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
+}
 .np-select-input-options-status {
   display: flex;
   align-items: center;
@@ -212,22 +234,21 @@
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}
-.np-select-input-options-container:focus {
-  outline: none;
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
 }
 .np-select-input-option-container {
   display: flex;
@@ -256,27 +277,11 @@
 .np-select-input-option-container--disabled {
   opacity: 0.45;
 }
-.np-select-input-option {
-  flex: 1;
-}
 .np-select-input-option-check--not-selected {
   visibility: hidden;
 }
-.np-select-input-separator-item {
-  margin: 8px;
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
-}
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -315,6 +320,10 @@
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -326,21 +335,6 @@
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -370,3 +364,9 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}

package/{build/styles/inputs/SelectInput → src/inputs}/SelectInput.css

@@ -148,6 +148,28 @@
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-select-input-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.np-select-input-placeholder {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
+.np-select-input-options-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+.np-select-input-options-container:focus {
+  outline: none;
+}
+@media (min-width: 576px) {
+  .np-select-input-options-container {
+    max-height: 28rem /* 448px */;
+  }
+}
 .np-select-input-options-status {
   display: flex;
   align-items: center;
@@ -212,22 +234,21 @@
   contain: strict;
   height: 100%;
 }
-.np-select-input-options-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-}
-.np-select-input-options-container:focus {
-  outline: none;
+.np-select-input-separator-item {
+  margin: 8px;
+  margin: var(--size-8);
+  border-top-width: 1px;
 }
-@media (min-width: 576px) {
-  .np-select-input-options-container {
-    max-height: 28rem /* 448px */;
-  }
+.np-select-input-group-item--without-needle:first-child {
+  margin-top: calc(-1 * 8px);
+  margin-top: calc(-1 * var(--size-8));
 }
-.np-select-input-footer {
-  padding: 4px 24px 16px;
-  padding: var(--size-4) var(--size-24) var(--size-16);
+.np-select-input-group-item-header {
+  position: sticky;
+  top: 0px;
+  z-index: 10;
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
 }
 .np-select-input-option-container {
   display: flex;
@@ -256,27 +277,11 @@
 .np-select-input-option-container--disabled {
   opacity: 0.45;
 }
-.np-select-input-option {
-  flex: 1;
-}
 .np-select-input-option-check--not-selected {
   visibility: hidden;
 }
-.np-select-input-separator-item {
-  margin: 8px;
-  margin: var(--size-8);
-  border-top-width: 1px;
-}
-.np-select-input-group-item--without-needle:first-child {
-  margin-top: calc(-1 * 8px);
-  margin-top: calc(-1 * var(--size-8));
-}
-.np-select-input-group-item-header {
-  position: sticky;
-  top: 0px;
-  z-index: 10;
-  background-color: #ffffff;
-  background-color: var(--color-background-elevated);
+.np-select-input-option {
+  flex: 1;
 }
 .np-select-input-option-content-container {
   display: flex;
@@ -315,6 +320,10 @@
   margin-left: 8px;
   margin-left: var(--size-8);
 }
+.np-select-input-footer {
+  padding: 4px 24px 16px;
+  padding: var(--size-4) var(--size-24) var(--size-16);
+}
 .np-select-input-addon-container {
   pointer-events: none;
   margin-inline-start: 4px;
@@ -326,21 +335,6 @@
   margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
-.np-select-input-addon-separator {
-  height: 24px;
-  height: var(--size-24);
-  border-inline-start: 1px solid rgba(0,0,0,0.10196);
-  border-inline-start: 1px solid var(--color-border-neutral);
-}
-.np-select-input-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.np-select-input-placeholder {
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
 .np-select-input-addon {
   border-width: 0;
   background: none;
@@ -370,3 +364,9 @@
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
+.np-select-input-addon-separator {
+  height: 24px;
+  height: var(--size-24);
+  border-inline-start: 1px solid rgba(0,0,0,0.10196);
+  border-inline-start: 1px solid var(--color-border-neutral);
+}