@transferwise/components 0.0.0-experimental-fd70ead → 0.0.0-experimental-2384dbf

package/build/index.js

@@ -6100,6 +6100,124 @@ InlineAlert.defaultProps = {
 };
 var InlineAlert$1 = InlineAlert;
 
+/*
+ * Inspired by:
+ *
+ * - https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * - https://legacy.reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+ */
+function useEffectEvent(callback) {
+  const ref = React.useRef(() => {
+    throw new Error('Cannot call an event handler while rendering.');
+  });
+  React.useEffect(() => {
+    ref.current = callback;
+  });
+  return React.useCallback((...args) => ref.current(...args), []);
+}
+
+function useResizeObserver(ref, callback) {
+  const handleCallback = useEffectEvent(callback);
+  React.useEffect(() => {
+    if (ref.current != null) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        handleCallback(entry);
+      });
+      resizeObserver.observe(ref.current, {
+        box: 'border-box'
+      });
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return () => {};
+  }, [handleCallback, ref]);
+}
+
+function cssValueWithUnit(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+const InputPaddingStartContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
+const InputPaddingEndContext = /*#__PURE__*/React.createContext([undefined, () => {}]);
+function useInputPaddings() {
+  const [paddingStart] = React.useContext(InputPaddingStartContext);
+  const [paddingEnd] = React.useContext(InputPaddingEndContext);
+  return {
+    paddingInlineStart: paddingStart,
+    paddingInlineEnd: paddingEnd
+  };
+}
+function inputPaddingInitialState({
+  initialContentWidth,
+  padding = inputAddonDefaultPadding
+} = {}) {
+  return () => initialContentWidth != null ? `calc(${cssValueWithUnit(initialContentWidth)} + ${cssValueWithUnit(inputAddonContentWidthAddendByPadding[padding])})` : undefined;
+}
+function InputGroup({
+  addonStart,
+  addonEnd,
+  disabled,
+  className,
+  children
+}) {
+  const [paddingStart, setPaddingStart] = React.useState(inputPaddingInitialState(addonStart));
+  const [paddingEnd, setPaddingEnd] = React.useState(inputPaddingInitialState(addonEnd));
+  return /*#__PURE__*/jsxRuntime.jsx(InputPaddingStartContext.Provider, {
+    value: React.useMemo(() => [paddingStart, setPaddingStart], [paddingStart]),
+    children: /*#__PURE__*/jsxRuntime.jsx(InputPaddingEndContext.Provider, {
+      value: React.useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd]),
+      children: /*#__PURE__*/jsxRuntime.jsxs("fieldset", {
+        disabled: disabled,
+        className: classNames__default.default(className, 'np-input-group'),
+        children: [addonStart != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+          placement: "start",
+          ...addonStart
+        }) : null, children, addonEnd != null ? /*#__PURE__*/jsxRuntime.jsx(InputAddon, {
+          placement: "end",
+          ...addonEnd
+        }) : null]
+      })
+    })
+  });
+}
+const inputAddonContentWidthAddendByPadding = {
+  none: 0,
+  sm: '1rem',
+  md: '1.5rem'
+};
+const inputAddonDefaultPadding = 'md';
+function InputAddon({
+  placement,
+  content,
+  interactive,
+  padding = inputAddonDefaultPadding
+}) {
+  const [, setInputPadding] = React.useContext(placement === 'start' ? InputPaddingStartContext : InputPaddingEndContext);
+  const ref = React.useRef(null);
+  useResizeObserver(ref, entry => {
+    // TODO: Remove fallback once most browsers support `borderBoxSize`
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (entry.borderBoxSize != null) {
+      setInputPadding(entry.borderBoxSize[0].inlineSize);
+    } else {
+      const targetStyle = getComputedStyle(entry.target);
+      setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ref: ref,
+    className: classNames__default.default('np-input-addon', {
+      'np-input-addon--placement-start': placement === 'start',
+      'np-input-addon--placement-end': placement === 'end'
+    }, interactive && 'np-input-addon--interactive', {
+      'np-input-addon--padding-sm': padding === 'sm',
+      'np-input-addon--padding-md': padding === 'md'
+    }),
+    children: content
+  });
+}
+
 function formControlClassNameBase({
   size = 'auto'
 } = {}) {
@@ -6118,11 +6236,15 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
   className,
   ...restProps
 }, reference) {
+  const inputPaddings = useInputPaddings();
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     ref: reference,
     className: classNames__default.default(className, formControlClassNameBase({
       size
-    })),
+    }))
+    // eslint-disable-next-line react/forbid-dom-props
+    ,
+    style: inputPaddings,
     ...restProps
   });
 });
@@ -13671,6 +13793,9 @@ var de = {
 	"neptune.DateInput.month.label": "Monat",
 	"neptune.DateInput.year.label": "Jahr",
 	"neptune.MoneyInput.Select.placeholder": "Wähle eine der Möglichkeiten aus...",
+	"neptune.Pagination.ariaLabel": "Seitennummer-Navigation",
+	"neptune.PaginationLink.ariaLabel.active": "Weiter zur Seite {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Aktuelle Seite – Seite {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Wird gesucht...",
 	"neptune.Summary.statusDone": "Schritt erledigt",
 	"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
@@ -13713,6 +13838,9 @@ var es = {
 	"neptune.DateInput.month.label": "Mes",
 	"neptune.DateInput.year.label": "Año",
 	"neptune.MoneyInput.Select.placeholder": "Selecciona una opción...",
+	"neptune.Pagination.ariaLabel": "Navegación por las páginas",
+	"neptune.PaginationLink.ariaLabel.active": "Ve a la página {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Página actual, página {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.Summary.statusDone": "Apartado listo",
 	"neptune.Summary.statusNotDone": "Apartado a completar",
@@ -13755,6 +13883,9 @@ var fr = {
 	"neptune.DateInput.month.label": "Mois",
 	"neptune.DateInput.year.label": "Année",
 	"neptune.MoneyInput.Select.placeholder": "Sélectionner une option...",
+	"neptune.Pagination.ariaLabel": "Navigation par pagination",
+	"neptune.PaginationLink.ariaLabel.active": "Aller à la page {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Page actuelle, page {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Recherche...",
 	"neptune.Summary.statusDone": "Validé",
 	"neptune.Summary.statusNotDone": "À compléter",
@@ -13797,6 +13928,9 @@ var hu = {
 	"neptune.DateInput.month.label": "Hónap",
 	"neptune.DateInput.year.label": "Év",
 	"neptune.MoneyInput.Select.placeholder": "Válassz ki egy lehetőséget...",
+	"neptune.Pagination.ariaLabel": "Lapszámos navigáció",
+	"neptune.PaginationLink.ariaLabel.active": "Ugrás a(z) {pageNumber}. oldalra",
+	"neptune.PaginationLink.ariaLabel.inactive": "Jelenlegi oldal, {pageNumber}. oldal",
 	"neptune.Select.searchPlaceholder": "Keresés...",
 	"neptune.Summary.statusDone": "Kész",
 	"neptune.Summary.statusNotDone": "Hátravan",
@@ -13839,6 +13973,9 @@ var id = {
 	"neptune.DateInput.month.label": "Bulan",
 	"neptune.DateInput.year.label": "Tahun",
 	"neptune.MoneyInput.Select.placeholder": "Pilih opsi...",
+	"neptune.Pagination.ariaLabel": "Halaman navigasi",
+	"neptune.PaginationLink.ariaLabel.active": "Lanjut ke halaman {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Halaman saat ini, halaman {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Cari...",
 	"neptune.Summary.statusDone": "Item selesai",
 	"neptune.Summary.statusNotDone": "Item yang harus dilakukan",
@@ -13881,6 +14018,9 @@ var it = {
 	"neptune.DateInput.month.label": "Mese",
 	"neptune.DateInput.year.label": "Anno",
 	"neptune.MoneyInput.Select.placeholder": "Seleziona un'opzione...",
+	"neptune.Pagination.ariaLabel": "Navigazione",
+	"neptune.PaginationLink.ariaLabel.active": "Via a pagina {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Pagina corrente, pagina {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Cerca...",
 	"neptune.Summary.statusDone": "Completato",
 	"neptune.Summary.statusNotDone": "Da completare",
@@ -13923,6 +14063,9 @@ var ja = {
 	"neptune.DateInput.month.label": "月",
 	"neptune.DateInput.year.label": "年",
 	"neptune.MoneyInput.Select.placeholder": "選択してください...",
+	"neptune.Pagination.ariaLabel": "ページネーションナビゲーション",
+	"neptune.PaginationLink.ariaLabel.active": "{pageNumber}のページへ移動します",
+	"neptune.PaginationLink.ariaLabel.inactive": "現在のページ、{pageNumber}ページ",
 	"neptune.Select.searchPlaceholder": "検索... ",
 	"neptune.Summary.statusDone": "完了",
 	"neptune.Summary.statusNotDone": "未対応",
@@ -13965,6 +14108,9 @@ var pl = {
 	"neptune.DateInput.month.label": "Miesiąc",
 	"neptune.DateInput.year.label": "Rok",
 	"neptune.MoneyInput.Select.placeholder": "Wybierz opcję...",
+	"neptune.Pagination.ariaLabel": "Nawigacja w paginacji",
+	"neptune.PaginationLink.ariaLabel.active": "Przejdź do strony {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Obecna strona, strona {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Wyszukaj...",
 	"neptune.Summary.statusDone": "Czynność wykonana",
 	"neptune.Summary.statusNotDone": "Czynność do wykonania",
@@ -14007,6 +14153,9 @@ var pt = {
 	"neptune.DateInput.month.label": "Mês",
 	"neptune.DateInput.year.label": "Ano",
 	"neptune.MoneyInput.Select.placeholder": "Escolha uma opção...",
+	"neptune.Pagination.ariaLabel": "Navegação pelas páginas",
+	"neptune.PaginationLink.ariaLabel.active": "Ir para a página {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Página atual, página {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Buscar...",
 	"neptune.Summary.statusDone": "Pronto",
 	"neptune.Summary.statusNotDone": "Não iniciado",
@@ -14049,6 +14198,9 @@ var ro = {
 	"neptune.DateInput.month.label": "Lună",
 	"neptune.DateInput.year.label": "An",
 	"neptune.MoneyInput.Select.placeholder": "Selectează o opţiune...",
+	"neptune.Pagination.ariaLabel": "Navigare prin pagină",
+	"neptune.PaginationLink.ariaLabel.active": "Du-te la pagina {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Pagina curentă, pagina {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Caută...",
 	"neptune.Summary.statusDone": "Finalizat",
 	"neptune.Summary.statusNotDone": "De făcut",
@@ -14091,6 +14243,9 @@ var ru = {
 	"neptune.DateInput.month.label": "Месяц",
 	"neptune.DateInput.year.label": "Год",
 	"neptune.MoneyInput.Select.placeholder": "Выберите вариант...",
+	"neptune.Pagination.ariaLabel": "Постраничная навигация",
+	"neptune.PaginationLink.ariaLabel.active": "Перейти на страницу {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Текущая страница, страница {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Поиск...",
 	"neptune.Summary.statusDone": "Этап завершен",
 	"neptune.Summary.statusNotDone": "Этап к выполнению",
@@ -14133,6 +14288,9 @@ var th = {
 	"neptune.DateInput.month.label": "เดือน",
 	"neptune.DateInput.year.label": "ปี",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
+	"neptune.Pagination.ariaLabel": "การนำทางเลขหน้า",
+	"neptune.PaginationLink.ariaLabel.active": "ไปที่หน้า {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "หน้าปัจจุบัน หน้า {pageNumber}",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.Summary.statusDone": "รายการที่ทำแล้ว",
 	"neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
@@ -14175,6 +14333,9 @@ var tr = {
 	"neptune.DateInput.month.label": "Ay",
 	"neptune.DateInput.year.label": "Yıl",
 	"neptune.MoneyInput.Select.placeholder": "Bir seçenek seçin...",
+	"neptune.Pagination.ariaLabel": "Sayfalandırma gezintisi",
+	"neptune.PaginationLink.ariaLabel.active": "{pageNumber} numaralı sayfaya git",
+	"neptune.PaginationLink.ariaLabel.inactive": "Mevcut sayfa, sayfa {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Ara...",
 	"neptune.Summary.statusDone": "Tamamlanan aşama",
 	"neptune.Summary.statusNotDone": "Yapılacak",
@@ -14217,6 +14378,9 @@ var uk = {
 	"neptune.DateInput.month.label": "Місяць",
 	"neptune.DateInput.year.label": "Рік",
 	"neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
+	"neptune.Pagination.ariaLabel": "Перехід за сторінками",
+	"neptune.PaginationLink.ariaLabel.active": "Перейти на сторінку {pageNumber}",
+	"neptune.PaginationLink.ariaLabel.inactive": "Ця сторінка, сторінка {pageNumber}",
 	"neptune.Select.searchPlaceholder": "Пошук…",
 	"neptune.Summary.statusDone": "Виконано",
 	"neptune.Summary.statusNotDone": "Не виконано",
@@ -14354,6 +14518,7 @@ exports.Image = Image$1;
 exports.Info = Info;
 exports.InlineAlert = InlineAlert$1;
 exports.Input = Input;
+exports.InputGroup = InputGroup;
 exports.InputWithDisplayFormat = InputWithDisplayFormat$1;
 exports.InstructionsList = InstructionsList$1;
 exports.LanguageProvider = LanguageProvider;