@transferwise/components 0.0.0-experimental-bb7ed4a → 0.0.0-experimental-f34234e

package/build/index.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ChevronLeft, ChevronRight, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import commonmark from 'commonmark';
@@ -2153,6 +2153,210 @@ const Button = /*#__PURE__*/forwardRef(({
   });
 });
 
+const Carousel = ({
+  header,
+  className,
+  cards,
+  onClick
+}) => {
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = useState('');
+  const carouselElementRef = useRef(null);
+  const caraouselCardsRef = useRef([]);
+  const isLeftActionButtonEnabled = scrollPosition > 8;
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const [focusedCard, setFocusedCard] = useState(cards?.[0]?.id);
+  const updateScrollButtonsState = () => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth,
+        offsetWidth
+      } = carouselElementRef.current;
+      const scrollAtEnd = scrollWidth - offsetWidth <= scrollPosition + 8;
+      setScrollIsAtEnd(scrollAtEnd);
+    }
+    const scrollDirecton = scrollPosition > previousScrollPosition ? 'right' : 'left';
+    const cardsInFullViewIds = [];
+    caraouselCardsRef.current.forEach(card => {
+      if (isVisible(carouselElementRef.current, card)) {
+        // eslint-disable-next-line functional/immutable-data
+        cardsInFullViewIds.push(card.getAttribute('id') ?? '');
+      }
+    });
+    if (cardsInFullViewIds.length >= 1) {
+      const visibleCardIndex = scrollDirecton === 'right' ? cardsInFullViewIds.length - 1 : 0;
+      const visibleCardId = cardsInFullViewIds[visibleCardIndex];
+      setVisibleCardOnMobileView(visibleCardId);
+      setFocusedCard(visibleCardId);
+    }
+    setPreviousScrollPosition(scrollPosition);
+  };
+  const scrollCarousel = (direction = 'right') => {
+    if (carouselElementRef.current) {
+      const {
+        scrollWidth
+      } = carouselElementRef.current;
+      const cardWidth = scrollWidth / caraouselCardsRef.current.length;
+      const res = Math.floor(cardWidth - cardWidth * 0.05);
+      carouselElementRef.current.scrollBy({
+        left: direction === 'right' ? res : -res,
+        behavior: 'smooth'
+      });
+    }
+  };
+  const handleOnKeyDown = (event, index) => {
+    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+      const nextIndex = event.key === 'ArrowRight' ? index + 1 : index - 1;
+      const nextCard = cards[nextIndex];
+      if (nextCard) {
+        caraouselCardsRef.current[nextIndex].focus();
+        scrollCardIntoView(caraouselCardsRef.current[nextIndex], nextCard);
+        event.preventDefault();
+      }
+    }
+  };
+  const scrollCardIntoView = (element, card) => {
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'center'
+    });
+    setFocusedCard(card.id);
+  };
+  useEffect(() => {
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "d-flex justify-content-between carousel__header",
+      children: [typeof header === 'string' ? /*#__PURE__*/jsx(Title, {
+        as: "span",
+        type: "title-body",
+        children: header
+      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxs("div", {
+        className: "hidden-xs",
+        children: [/*#__PURE__*/jsx(ActionButton, {
+          className: "carousel__scroll-button",
+          tabIndex: -1,
+          priority: "secondary",
+          disabled: !isLeftActionButtonEnabled,
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-left",
+          onClick: () => scrollCarousel('left'),
+          children: /*#__PURE__*/jsx(ChevronLeft, {})
+        }), /*#__PURE__*/jsx(ActionButton, {
+          tabIndex: -1,
+          className: "carousel__scroll-button m-l-1",
+          priority: "secondary",
+          "aria-hidden": "true",
+          "data-testid": "scroll-carousel-right",
+          disabled: scrollIsAtEnd,
+          onClick: () => scrollCarousel(),
+          children: /*#__PURE__*/jsx(ChevronRight, {})
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsx("div", {
+      ref: carouselElementRef,
+      tabIndex: -1,
+      role: "list",
+      className: "carousel",
+      onScroll: event => {
+        const target = event.target;
+        setScrollPosition(target.scrollLeft);
+      },
+      children: cards?.map((card, index) => {
+        const sharedProps = {
+          id: card.id,
+          className: classNames('carousel__card', {
+            'carousel__card--focused': card.id === focusedCard
+          }),
+          role: 'listitem',
+          'aria-labelledby': `${card.id}-content`,
+          onClick: () => {
+            card.onClick?.();
+            onClick?.(card.id);
+          },
+          onFocus: event => {
+            scrollCardIntoView(event.currentTarget, card);
+          }
+        };
+        const cardContent = /*#__PURE__*/jsx("div", {
+          id: `${card.id}-content`,
+          className: classNames('carousel__card-content', 'p-a-1', {
+            [card.className ?? '']: !!card.className
+          })
+          // eslint-disable-next-line react/forbid-dom-props
+          ,
+          style: card.styles,
+          children: card.content
+        });
+        if (card.type === 'button') {
+          return /*#__PURE__*/createElement("button", {
+            ...sharedProps,
+            ref: el => {
+              if (el) {
+                // eslint-disable-next-line functional/immutable-data
+                caraouselCardsRef.current[index] = el;
+              }
+            },
+            key: card.id,
+            type: "button",
+            onKeyDown: event => handleOnKeyDown(event, index)
+          }, cardContent);
+        }
+        return /*#__PURE__*/createElement("a", {
+          ...sharedProps,
+          ref: el => {
+            if (el) {
+              // eslint-disable-next-line functional/immutable-data
+              caraouselCardsRef.current[index] = el;
+            }
+          },
+          key: card.id,
+          target: "_blank",
+          rel: "noreferrer",
+          href: card.href,
+          onKeyDown: event => handleOnKeyDown(event, index)
+        }, cardContent);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "visible-xs",
+      children: /*#__PURE__*/jsx("div", {
+        className: "carousel__indicators",
+        children: cards?.map((card, index) => /*#__PURE__*/jsx("button", {
+          "data-testid": `${card.id}-indicator`,
+          tabIndex: -1,
+          type: "button",
+          className: classNames('carousel__indicator', {
+            'carousel__indicator--selected': card.id === visibleCardOnMobileView
+          }),
+          onClick: () => {
+            scrollCardIntoView(caraouselCardsRef.current[index], card);
+          }
+        }, `${card.id}-indicator`))
+      })
+    })]
+  });
+};
+const isVisible = (container, el) => {
+  const cWidth = container.offsetWidth;
+  const cScrollOffset = container.scrollLeft;
+  const elemLeft = el.offsetLeft - container.offsetLeft;
+  const elemRight = elemLeft + el.offsetWidth;
+  return elemLeft >= cScrollOffset && elemRight <= cScrollOffset + cWidth;
+};
+
 const Card$1 = /*#__PURE__*/forwardRef((props, reference) => {
   const {
     'aria-label': ariaLabel,
@@ -2579,10 +2783,6 @@ const isMonthAndYearFormat = dateString => validDateString(dateString) && dateSt
 const MDY = new Set(['en-US']);
 const YMD = new Set(['hu', 'hu-HU', 'zh-HK', 'zh-CN', 'ja', 'ja-JP']);
 
-const returnDateView = (selectedDate, min, max) => {
-  return selectedDate || (min || max) && moveToWithinRange(new Date(), min, max) || new Date();
-};
-
 var messages$9 = defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -3327,9 +3527,6 @@ class DayCalendarTable extends PureComponent {
     onSelect(new Date(viewYear, viewMonth, day));
   };
   isDisabled = day => {
-    if (day === -1) {
-      return true;
-    }
     const {
       min,
       max,
@@ -3345,7 +3542,7 @@ class DayCalendarTable extends PureComponent {
       viewMonth,
       viewYear
     } = this.props;
-    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
+    return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
   isToday = day => {
     const {
@@ -3739,8 +3936,8 @@ class DateLookup extends PureComponent {
       originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
-      viewMonth: returnDateView(props.value, props.min, props.max).getMonth(),
-      viewYear: returnDateView(props.value, props.min, props.max).getFullYear(),
+      viewMonth: (props.value || new Date()).getMonth(),
+      viewYear: (props.value || new Date()).getFullYear(),
       open: false,
       mode: 'day',
       isMobile: false
@@ -3761,7 +3958,7 @@ class DateLookup extends PureComponent {
         props.onChange(moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewDateThatIsWithinRange = returnDateView(selectedDate, min, max);
+      const viewDateThatIsWithinRange = selectedDate || (min || max) && moveToWithinRange(new Date(), min, max) || new Date();
       const viewMonth = viewDateThatIsWithinRange.getMonth();
       const viewYear = viewDateThatIsWithinRange.getFullYear();
       return {
@@ -3886,7 +4083,9 @@ class DateLookup extends PureComponent {
     } else {
       date = getStartOfDay(new Date());
     }
-    date &&= moveToWithinRange(date, min, max);
+    if (date) {
+      date = moveToWithinRange(date, min, max);
+    }
     if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }
@@ -13605,7 +13804,7 @@ var hu = {
 	"neptune.Upload.psProcessingText": "Feltöltés...",
 	"neptune.Upload.usButtonText": "Vagy válaszd ki a fájlt",
 	"neptune.Upload.usDropMessage": "Húzd ide a fájlokat a feltöltéshez",
-	"neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize} MB méretű fájlt",
+	"neptune.Upload.usPlaceholder": "Húzz ide egy legfeljebb {maxSize}MB méretű fájlt",
 	"neptune.UploadButton.allFileTypes": "Összes fájltípus",
 	"neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
 	"neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
@@ -14343,5 +14542,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Carousel, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map