@transferwise/components 46.160.1 → 46.160.3

package/build/Inputs/SelectInput/hooks/useTypeahead.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var constants = require('../constants.js');
+var SelectInput_utils = require('../SelectInput.utils.js');
+
+const resetsTypeaheadQuery = key => key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp';
+const isTypingKey = (event, query = '') => !event.metaKey && !event.ctrlKey && !event.nativeEvent.isComposing && /^.$/u.test(event.key) && (event.key !== ' ' || query !== '');
+function useTypeahead({
+  disabled = false,
+  onMatch
+} = {}) {
+  const queryRef = React.useRef('');
+  const timeoutRef = React.useRef(null);
+  const resetQuery = React.useCallback(() => {
+    queryRef.current = '';
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  React.useEffect(() => resetQuery, [resetQuery]);
+  return React.useCallback(event => {
+    if (disabled || !isTypingKey(event, queryRef.current)) {
+      if (resetsTypeaheadQuery(event.key)) {
+        resetQuery();
+      }
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    queryRef.current += event.key;
+    const needle = SelectInput_utils.searchableString(queryRef.current);
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(resetQuery, constants.TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);
+    const options = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+    const optionLabels = options.map(option => SelectInput_utils.searchableString(option.textContent ?? ''));
+    const matchingIndex = optionLabels.findIndex(label => label.startsWith(needle));
+    const closestIndex = matchingIndex === -1 ? optionLabels.findIndex(label => label.includes(needle)) : matchingIndex;
+    if (closestIndex === -1) {
+      return;
+    }
+    options[closestIndex].focus({
+      preventScroll: true
+    });
+    event.currentTarget.focus({
+      preventScroll: true
+    });
+    onMatch?.();
+  }, [disabled, onMatch, resetQuery]);
+}
+
+exports.isTypingKey = isTypingKey;
+exports.useTypeahead = useTypeahead;
+//# sourceMappingURL=useTypeahead.js.map

package/build/Inputs/SelectInput/hooks/useTypeahead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.js","sources":["../../../../src/Inputs/SelectInput/hooks/useTypeahead.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants';\nimport { searchableString } from '../SelectInput.utils';\n\nconst resetsTypeaheadQuery = (key: string) =>\n  key === 'ArrowDown' ||\n  key === 'ArrowUp' ||\n  key === 'Home' ||\n  key === 'End' ||\n  key === 'PageDown' ||\n  key === 'PageUp';\n\nexport const isTypingKey = (event: React.KeyboardEvent, query = '') =>\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.nativeEvent.isComposing &&\n  /^.$/u.test(event.key) &&\n  (event.key !== ' ' || query !== '');\n\ninterface UseTypeaheadParams {\n  disabled?: boolean;\n  onMatch?: () => void;\n}\n\nexport function useTypeahead({ disabled = false, onMatch }: UseTypeaheadParams = {}) {\n  const queryRef = useRef('');\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const resetQuery = useCallback(() => {\n    queryRef.current = '';\n    if (timeoutRef.current != null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => resetQuery, [resetQuery]);\n\n  return useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || !isTypingKey(event, queryRef.current)) {\n        if (resetsTypeaheadQuery(event.key)) {\n          resetQuery();\n        }\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      queryRef.current += event.key;\n      const needle = searchableString(queryRef.current);\n\n      if (timeoutRef.current != null) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);\n\n      const options = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\n          '[role=\"option\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n      const optionLabels = options.map((option) => searchableString(option.textContent ?? ''));\n      const matchingIndex = optionLabels.findIndex((label) => label.startsWith(needle));\n      const closestIndex =\n        matchingIndex === -1\n          ? optionLabels.findIndex((label) => label.includes(needle))\n          : matchingIndex;\n\n      if (closestIndex === -1) {\n        return;\n      }\n\n      options[closestIndex].focus({ preventScroll: true });\n      event.currentTarget.focus({ preventScroll: true });\n      onMatch?.();\n    },\n    [disabled, onMatch, resetQuery],\n  );\n}\n"],"names":["resetsTypeaheadQuery","key","isTypingKey","event","query","metaKey","ctrlKey","nativeEvent","isComposing","test","useTypeahead","disabled","onMatch","queryRef","useRef","timeoutRef","resetQuery","useCallback","current","clearTimeout","useEffect","preventDefault","stopPropagation","needle","searchableString","setTimeout","TYPEAHEAD_QUERY_RESET_TIMEOUT_MS","options","Array","from","currentTarget","querySelectorAll","optionLabels","map","option","textContent","matchingIndex","findIndex","label","startsWith","closestIndex","includes","focus","preventScroll"],"mappings":"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"}

package/build/Inputs/SelectInput/hooks/useTypeahead.mjs

@@ -0,0 +1,54 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants.mjs';
+import { searchableString } from '../SelectInput.utils.mjs';
+
+const resetsTypeaheadQuery = key => key === 'ArrowDown' || key === 'ArrowUp' || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp';
+const isTypingKey = (event, query = '') => !event.metaKey && !event.ctrlKey && !event.nativeEvent.isComposing && /^.$/u.test(event.key) && (event.key !== ' ' || query !== '');
+function useTypeahead({
+  disabled = false,
+  onMatch
+} = {}) {
+  const queryRef = useRef('');
+  const timeoutRef = useRef(null);
+  const resetQuery = useCallback(() => {
+    queryRef.current = '';
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => resetQuery, [resetQuery]);
+  return useCallback(event => {
+    if (disabled || !isTypingKey(event, queryRef.current)) {
+      if (resetsTypeaheadQuery(event.key)) {
+        resetQuery();
+      }
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    queryRef.current += event.key;
+    const needle = searchableString(queryRef.current);
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);
+    const options = Array.from(event.currentTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+    const optionLabels = options.map(option => searchableString(option.textContent ?? ''));
+    const matchingIndex = optionLabels.findIndex(label => label.startsWith(needle));
+    const closestIndex = matchingIndex === -1 ? optionLabels.findIndex(label => label.includes(needle)) : matchingIndex;
+    if (closestIndex === -1) {
+      return;
+    }
+    options[closestIndex].focus({
+      preventScroll: true
+    });
+    event.currentTarget.focus({
+      preventScroll: true
+    });
+    onMatch?.();
+  }, [disabled, onMatch, resetQuery]);
+}
+
+export { isTypingKey, useTypeahead };
+//# sourceMappingURL=useTypeahead.mjs.map

package/build/Inputs/SelectInput/hooks/useTypeahead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTypeahead.mjs","sources":["../../../../src/Inputs/SelectInput/hooks/useTypeahead.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\nimport { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants';\nimport { searchableString } from '../SelectInput.utils';\n\nconst resetsTypeaheadQuery = (key: string) =>\n  key === 'ArrowDown' ||\n  key === 'ArrowUp' ||\n  key === 'Home' ||\n  key === 'End' ||\n  key === 'PageDown' ||\n  key === 'PageUp';\n\nexport const isTypingKey = (event: React.KeyboardEvent, query = '') =>\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.nativeEvent.isComposing &&\n  /^.$/u.test(event.key) &&\n  (event.key !== ' ' || query !== '');\n\ninterface UseTypeaheadParams {\n  disabled?: boolean;\n  onMatch?: () => void;\n}\n\nexport function useTypeahead({ disabled = false, onMatch }: UseTypeaheadParams = {}) {\n  const queryRef = useRef('');\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const resetQuery = useCallback(() => {\n    queryRef.current = '';\n    if (timeoutRef.current != null) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => resetQuery, [resetQuery]);\n\n  return useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || !isTypingKey(event, queryRef.current)) {\n        if (resetsTypeaheadQuery(event.key)) {\n          resetQuery();\n        }\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      queryRef.current += event.key;\n      const needle = searchableString(queryRef.current);\n\n      if (timeoutRef.current != null) {\n        clearTimeout(timeoutRef.current);\n      }\n      timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);\n\n      const options = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\n          '[role=\"option\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n      const optionLabels = options.map((option) => searchableString(option.textContent ?? ''));\n      const matchingIndex = optionLabels.findIndex((label) => label.startsWith(needle));\n      const closestIndex =\n        matchingIndex === -1\n          ? optionLabels.findIndex((label) => label.includes(needle))\n          : matchingIndex;\n\n      if (closestIndex === -1) {\n        return;\n      }\n\n      options[closestIndex].focus({ preventScroll: true });\n      event.currentTarget.focus({ preventScroll: true });\n      onMatch?.();\n    },\n    [disabled, onMatch, resetQuery],\n  );\n}\n"],"names":["resetsTypeaheadQuery","key","isTypingKey","event","query","metaKey","ctrlKey","nativeEvent","isComposing","test","useTypeahead","disabled","onMatch","queryRef","useRef","timeoutRef","resetQuery","useCallback","current","clearTimeout","useEffect","preventDefault","stopPropagation","needle","searchableString","setTimeout","TYPEAHEAD_QUERY_RESET_TIMEOUT_MS","options","Array","from","currentTarget","querySelectorAll","optionLabels","map","option","textContent","matchingIndex","findIndex","label","startsWith","closestIndex","includes","focus","preventScroll"],"mappings":"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"}

package/build/SegmentedControl/SegmentedControl.js

@@ -29,6 +29,8 @@ require('@transferwise/icons');
 require('react-intl');
 require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+require('@transferwise/neptune-validation');
+var useDirection = require('../common/hooks/useDirection/useDirection.js');
 
 const SegmentedControl = ({
   name,
@@ -39,6 +41,9 @@ const SegmentedControl = ({
 }) => {
   const isMountedRef = React.useRef(false);
   const [animate, setAnimate] = React.useState(false);
+  const {
+    isRTL
+  } = useDirection.useDirection();
   const segmentsRef = React.useRef(null);
   if (segments.length > 3) {
     throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
@@ -56,8 +61,10 @@ const SegmentedControl = ({
       const {
         style
       } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
   React.useEffect(() => {

package/build/SegmentedControl/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport { useDirection } from '../common/hooks';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n  const { isRTL } = useDirection();\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      const segment = selectedSegmentRef.current;\n      const inlineOffset = isRTL\n        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth\n        : segment.offsetLeft;\n      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","isRTL","useDirection","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","inlineOffset","offsetWidth","offsetLeft","setProperty","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/SegmentedControl/SegmentedControl.mjs

@@ -25,6 +25,8 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import '@transferwise/neptune-validation';
+import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
 
 const SegmentedControl = ({
   name,
@@ -35,6 +37,9 @@ const SegmentedControl = ({
 }) => {
   const isMountedRef = useRef(false);
   const [animate, setAnimate] = useState(false);
+  const {
+    isRTL
+  } = useDirection();
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
     throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control');
@@ -52,8 +57,10 @@ const SegmentedControl = ({
       const {
         style
       } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+      const segment = selectedSegmentRef.current;
+      const inlineOffset = isRTL ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth : segment.offsetLeft;
+      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);
     }
   };
   useEffect(() => {

package/build/SegmentedControl/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../Body';\nimport { Typography } from '../common';\nimport { useDirection } from '../common/hooks';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const isMountedRef = useRef(false);\n  const [animate, setAnimate] = useState(false);\n  const { isRTL } = useDirection();\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://docs.wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      const segment = selectedSegmentRef.current;\n      const inlineOffset = isRTL\n        ? segmentsRef.current.offsetWidth - segment.offsetLeft - segment.offsetWidth\n        : segment.offsetLeft;\n      style.setProperty('--segment-highlight-width', `${segment.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${inlineOffset}px`);\n    }\n  };\n\n  useEffect(() => {\n    if (isMountedRef.current) {\n      setAnimate(true);\n    } else {\n      isMountedRef.current = true;\n    }\n\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={clsx('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={clsx('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={clsx('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={clsx('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","isMountedRef","useRef","animate","setAnimate","useState","isRTL","useDirection","segmentsRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","inlineOffset","offsetWidth","offsetLeft","setProperty","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","clsx","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/Tooltip/Tooltip.js

@@ -29,6 +29,7 @@ require('@transferwise/icons');
 require('react-intl');
 require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var useDirection = require('../common/hooks/useDirection/useDirection.js');
 
 const Tooltip = ({
   position: position$1 = position.Position.TOP,
@@ -39,6 +40,10 @@ const Tooltip = ({
 }) => {
   const [open, setOpen] = React.useState(false);
   const arrowRef = React.useRef(null);
+  const {
+    isRTL
+  } = useDirection.useDirection();
+  const resolvedPosition = isRTL ? position$1 === 'left' ? 'right' : position$1 === 'right' ? 'left' : position$1 : position$1;
   const fallbackId = React.useId();
   const tooltipId = id ?? fallbackId;
   const {
@@ -47,7 +52,7 @@ const Tooltip = ({
     placement,
     middlewareData
   } = react.useFloating({
-    placement: position$1,
+    placement: resolvedPosition,
     middleware: [react.offset(16), react.flip({
       fallbackPlacements: [position.Position.TOP]
     }),

package/build/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport useDirection from '../common/hooks/useDirection';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n\n  const resolvedPosition = isRTL\n    ? position === 'left'\n      ? 'right'\n      : position === 'right'\n        ? 'left'\n        : position\n    : position;\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: resolvedPosition,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","isRTL","useDirection","resolvedPosition","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}

package/build/Tooltip/Tooltip.mjs

@@ -25,6 +25,7 @@ import '@transferwise/icons';
 import 'react-intl';
 import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDirection } from '../common/hooks/useDirection/useDirection.mjs';
 
 const Tooltip = ({
   position = Position.TOP,
@@ -35,6 +36,10 @@ const Tooltip = ({
 }) => {
   const [open, setOpen] = useState(false);
   const arrowRef = useRef(null);
+  const {
+    isRTL
+  } = useDirection();
+  const resolvedPosition = isRTL ? position === 'left' ? 'right' : position === 'right' ? 'left' : position : position;
   const fallbackId = useId();
   const tooltipId = id ?? fallbackId;
   const {
@@ -43,7 +48,7 @@ const Tooltip = ({
     placement,
     middlewareData
   } = useFloating({
-    placement: position,
+    placement: resolvedPosition,
     middleware: [offset(16), flip({
       fallbackPlacements: [Position.TOP]
     }),

package/build/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: position,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}
+{"version":3,"file":"Tooltip.mjs","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  useFloating,\n} from '@floating-ui/react';\nimport { clsx } from 'clsx';\nimport {\n  AriaAttributes,\n  CSSProperties,\n  PropsWithChildren,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CommonProps, Position } from '../common';\nimport useDirection from '../common/hooks/useDirection';\nimport {\n  PositionBottom,\n  PositionLeft,\n  PositionRight,\n  PositionTop,\n} from '../common/PropsValues/position';\n\nexport type TooltipProps = PropsWithChildren<{\n  position?: PositionTop | PositionRight | PositionBottom | PositionLeft;\n  label: ReactNode;\n  id?: string;\n}> &\n  CommonProps;\n\nconst Tooltip = ({\n  position = Position.TOP,\n  children = undefined,\n  label,\n  id,\n  className,\n}: TooltipProps) => {\n  const [open, setOpen] = useState(false);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const { isRTL } = useDirection();\n\n  const resolvedPosition = isRTL\n    ? position === 'left'\n      ? 'right'\n      : position === 'right'\n        ? 'left'\n        : position\n    : position;\n\n  const fallbackId = useId();\n  const tooltipId = id ?? fallbackId;\n\n  const { refs, floatingStyles, placement, middlewareData } = useFloating({\n    placement: resolvedPosition,\n    middleware: [\n      offset(16),\n      flip({ fallbackPlacements: [Position.TOP] }),\n      // eslint-disable-next-line react-hooks/refs -- arrowRef is passed to floating-ui middleware, legitimate API usage\n      arrowMiddleware({ element: arrowRef, padding: 8 }),\n    ],\n    whileElementsMounted: open ? autoUpdate : undefined,\n    open,\n  });\n\n  const arrowStyle: CSSProperties = {\n    ...(middlewareData.arrow?.x != null ? { left: middlewareData.arrow.x } : {}),\n    ...(middlewareData.arrow?.y != null ? { top: middlewareData.arrow.y } : {}),\n  };\n\n  return (\n    /* eslint-disable react-hooks/refs -- setReference and setFloating are callback refs from floating-ui, safe to pass during render */\n    <span\n      ref={refs.setReference}\n      className=\"tw-tooltip-container\"\n      onMouseOver={() => setOpen(true)}\n      onFocus={() => setOpen(true)}\n      onMouseOut={() => setOpen(false)}\n      onBlur={() => setOpen(false)}\n    >\n      {children\n        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {\n            'aria-describedby': `${tooltipId}-tooltip`,\n          })\n        : null}\n      <div\n        ref={refs.setFloating}\n        className={clsx(\n          'np-tooltip',\n          'np-panel',\n          open ? `np-panel--open np-tooltip--open` : null,\n          className,\n        )}\n        style={floatingStyles}\n        data-popper-placement={placement}\n        aria-hidden={!open}\n        role=\"tooltip\"\n        id={`${tooltipId}-tooltip`}\n      >\n        <div className=\"np-panel__content tooltip-inner\">\n          {label}\n          <div ref={arrowRef} className={clsx('np-panel__arrow')} style={arrowStyle} />\n        </div>\n      </div>\n    </span>\n    /* eslint-enable react-hooks/refs */\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","position","Position","TOP","children","undefined","label","id","className","open","setOpen","useState","arrowRef","useRef","isRTL","useDirection","resolvedPosition","fallbackId","useId","tooltipId","refs","floatingStyles","placement","middlewareData","useFloating","middleware","offset","flip","fallbackPlacements","arrowMiddleware","element","padding","whileElementsMounted","autoUpdate","arrowStyle","arrow","x","left","y","top","_jsxs","ref","setReference","onMouseOver","onFocus","onMouseOut","onBlur","cloneElement","_jsx","setFloating","clsx","style","role"],"mappings":"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"}

package/build/i18n/ja.json

@@ -50,7 +50,7 @@
   "neptune.Table.loaded": "テーブルデータが読み込まれました",
   "neptune.Table.loading": "テーブルデータを読み込み中です",
   "neptune.Table.refreshPage": "ページを更新する",
-  "neptune.Typeahead.suggestionsLabel": "Suggestions",
+  "neptune.Typeahead.suggestionsLabel": "提案",
   "neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/i18n/ja.json.js

@@ -54,7 +54,7 @@ var ja = {
 	"neptune.Table.loaded": "テーブルデータが読み込まれました",
 	"neptune.Table.loading": "テーブルデータを読み込み中です",
 	"neptune.Table.refreshPage": "ページを更新する",
-	"neptune.Typeahead.suggestionsLabel": "Suggestions",
+	"neptune.Typeahead.suggestionsLabel": "提案",
 	"neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
 	"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
 	"neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/i18n/ja.json.mjs

@@ -50,7 +50,7 @@ var ja = {
 	"neptune.Table.loaded": "テーブルデータが読み込まれました",
 	"neptune.Table.loading": "テーブルデータを読み込み中です",
 	"neptune.Table.refreshPage": "ページを更新する",
-	"neptune.Typeahead.suggestionsLabel": "Suggestions",
+	"neptune.Typeahead.suggestionsLabel": "提案",
 	"neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
 	"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
 	"neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/build/i18n/tr.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "20 yıl görünümüne git",
   "neptune.DateLookup.month": "ay",
   "neptune.DateLookup.next": "devam et",
+  "neptune.DateLookup.notAvailable": "kullanılamaz",
+  "neptune.DateLookup.outOfRangeAfter": "Lütfen {min} veya daha sonraki bir tarih girin.",
+  "neptune.DateLookup.outOfRangeBefore": "Lütfen {max} veya daha önceki bir tarih girin.",
+  "neptune.DateLookup.outOfRangeBetween": "Lütfen {min} ile {max} arasında bir tarih girin.",
   "neptune.DateLookup.previous": "önceki",
   "neptune.DateLookup.selected": "seçili",
   "neptune.DateLookup.twentyYears": "20 yıl",
@@ -46,6 +50,7 @@
   "neptune.Table.loaded": "Tablo verileri yüklendi",
   "neptune.Table.loading": "Tablo verileri yükleniyor",
   "neptune.Table.refreshPage": "Sayfayı yenile",
+  "neptune.Typeahead.suggestionsLabel": "Öneriler",
   "neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
   "neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
   "neptune.Upload.csSuccessText": "Yükleme tamamlandı!",

package/build/i18n/tr.json.js

@@ -16,6 +16,10 @@ var tr = {
 	"neptune.DateLookup.goTo20YearView": "20 yıl görünümüne git",
 	"neptune.DateLookup.month": "ay",
 	"neptune.DateLookup.next": "devam et",
+	"neptune.DateLookup.notAvailable": "kullanılamaz",
+	"neptune.DateLookup.outOfRangeAfter": "Lütfen {min} veya daha sonraki bir tarih girin.",
+	"neptune.DateLookup.outOfRangeBefore": "Lütfen {max} veya daha önceki bir tarih girin.",
+	"neptune.DateLookup.outOfRangeBetween": "Lütfen {min} ile {max} arasında bir tarih girin.",
 	"neptune.DateLookup.previous": "önceki",
 	"neptune.DateLookup.selected": "seçili",
 	"neptune.DateLookup.twentyYears": "20 yıl",
@@ -50,6 +54,7 @@ var tr = {
 	"neptune.Table.loaded": "Tablo verileri yüklendi",
 	"neptune.Table.loading": "Tablo verileri yükleniyor",
 	"neptune.Table.refreshPage": "Sayfayı yenile",
+	"neptune.Typeahead.suggestionsLabel": "Öneriler",
 	"neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
 	"neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
 	"neptune.Upload.csSuccessText": "Yükleme tamamlandı!",

package/build/i18n/tr.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tr.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/tr.json.mjs

@@ -12,6 +12,10 @@ var tr = {
 	"neptune.DateLookup.goTo20YearView": "20 yıl görünümüne git",
 	"neptune.DateLookup.month": "ay",
 	"neptune.DateLookup.next": "devam et",
+	"neptune.DateLookup.notAvailable": "kullanılamaz",
+	"neptune.DateLookup.outOfRangeAfter": "Lütfen {min} veya daha sonraki bir tarih girin.",
+	"neptune.DateLookup.outOfRangeBefore": "Lütfen {max} veya daha önceki bir tarih girin.",
+	"neptune.DateLookup.outOfRangeBetween": "Lütfen {min} ile {max} arasında bir tarih girin.",
 	"neptune.DateLookup.previous": "önceki",
 	"neptune.DateLookup.selected": "seçili",
 	"neptune.DateLookup.twentyYears": "20 yıl",
@@ -46,6 +50,7 @@ var tr = {
 	"neptune.Table.loaded": "Tablo verileri yüklendi",
 	"neptune.Table.loading": "Tablo verileri yükleniyor",
 	"neptune.Table.refreshPage": "Sayfayı yenile",
+	"neptune.Typeahead.suggestionsLabel": "Öneriler",
 	"neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
 	"neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
 	"neptune.Upload.csSuccessText": "Yükleme tamamlandı!",

package/build/i18n/tr.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tr.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/zh-CN.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "转到 20 年视图",
   "neptune.DateLookup.month": "月",
   "neptune.DateLookup.next": "下一页",
+  "neptune.DateLookup.notAvailable": "不可用",
+  "neptune.DateLookup.outOfRangeAfter": "请输入 {min}或之后的日期。",
+  "neptune.DateLookup.outOfRangeBefore": "请输入 {max}或之前的日期。",
+  "neptune.DateLookup.outOfRangeBetween": "请输入 {min}与 {max}之间的日期。",
   "neptune.DateLookup.previous": "上一页",
   "neptune.DateLookup.selected": "已选",
   "neptune.DateLookup.twentyYears": "20 年",
@@ -46,6 +50,7 @@
   "neptune.Table.loaded": "表数据已加载",
   "neptune.Table.loading": "表数据正在加载",
   "neptune.Table.refreshPage": "刷新页面",
+  "neptune.Typeahead.suggestionsLabel": "建议",
   "neptune.Upload.csButtonText": "上传另一个文件？",
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",

package/build/i18n/zh-CN.json.js

@@ -16,6 +16,10 @@ var zhCN = {
 	"neptune.DateLookup.goTo20YearView": "转到 20 年视图",
 	"neptune.DateLookup.month": "月",
 	"neptune.DateLookup.next": "下一页",
+	"neptune.DateLookup.notAvailable": "不可用",
+	"neptune.DateLookup.outOfRangeAfter": "请输入 {min}或之后的日期。",
+	"neptune.DateLookup.outOfRangeBefore": "请输入 {max}或之前的日期。",
+	"neptune.DateLookup.outOfRangeBetween": "请输入 {min}与 {max}之间的日期。",
 	"neptune.DateLookup.previous": "上一页",
 	"neptune.DateLookup.selected": "已选",
 	"neptune.DateLookup.twentyYears": "20 年",
@@ -50,6 +54,7 @@ var zhCN = {
 	"neptune.Table.loaded": "表数据已加载",
 	"neptune.Table.loading": "表数据正在加载",
 	"neptune.Table.refreshPage": "刷新页面",
+	"neptune.Typeahead.suggestionsLabel": "建议",
 	"neptune.Upload.csButtonText": "上传另一个文件？",
 	"neptune.Upload.csFailureText": "上传失败。请重试",
 	"neptune.Upload.csSuccessText": "上传完毕！",

package/build/i18n/zh-CN.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"zh-CN.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zh-CN.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/i18n/zh-CN.json.mjs

@@ -12,6 +12,10 @@ var zhCN = {
 	"neptune.DateLookup.goTo20YearView": "转到 20 年视图",
 	"neptune.DateLookup.month": "月",
 	"neptune.DateLookup.next": "下一页",
+	"neptune.DateLookup.notAvailable": "不可用",
+	"neptune.DateLookup.outOfRangeAfter": "请输入 {min}或之后的日期。",
+	"neptune.DateLookup.outOfRangeBefore": "请输入 {max}或之前的日期。",
+	"neptune.DateLookup.outOfRangeBetween": "请输入 {min}与 {max}之间的日期。",
 	"neptune.DateLookup.previous": "上一页",
 	"neptune.DateLookup.selected": "已选",
 	"neptune.DateLookup.twentyYears": "20 年",
@@ -46,6 +50,7 @@ var zhCN = {
 	"neptune.Table.loaded": "表数据已加载",
 	"neptune.Table.loading": "表数据正在加载",
 	"neptune.Table.refreshPage": "刷新页面",
+	"neptune.Typeahead.suggestionsLabel": "建议",
 	"neptune.Upload.csButtonText": "上传另一个文件？",
 	"neptune.Upload.csFailureText": "上传失败。请重试",
 	"neptune.Upload.csSuccessText": "上传完毕！",

package/build/i18n/zh-CN.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"zh-CN.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"zh-CN.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}