@transferwise/components 0.0.0-experimental-bb7ed4a → 0.0.0-experimental-137c428

package/build/index.js

@@ -2184,6 +2184,210 @@ const Button = /*#__PURE__*/React.forwardRef(({
   });
 });
 
+const Carousel = ({
+  header,
+  className,
+  cards,
+  onClick
+}) => {
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+  const [previousScrollPosition, setPreviousScrollPosition] = React.useState(0);
+  const [scrollIsAtEnd, setScrollIsAtEnd] = React.useState(false);
+  const [visibleCardOnMobileView, setVisibleCardOnMobileView] = React.useState('');
+  const carouselElementRef = React.useRef(null);
+  const caraouselCardsRef = React.useRef([]);
+  const isLeftActionButtonEnabled = scrollPosition > 8;
+  const areActionButtonsEnabled = isLeftActionButtonEnabled || !scrollIsAtEnd;
+  const [focusedCard, setFocusedCard] = React.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);
+  };
+  React.useEffect(() => {
+    updateScrollButtonsState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPosition]);
+  React.useEffect(() => {
+    window.addEventListener('resize', updateScrollButtonsState);
+    return () => {
+      window.removeEventListener('resize', updateScrollButtonsState);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "d-flex justify-content-between m-b-1 carousel__header",
+      children: [typeof header === 'string' ? /*#__PURE__*/jsxRuntime.jsx(Title, {
+        as: "span",
+        type: "title-body",
+        children: header
+      }) : header, areActionButtonsEnabled ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "hidden-xs",
+        children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.ChevronLeft, {})
+        }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(icons.ChevronRight, {})
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsxRuntime.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__default.default('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__*/jsxRuntime.jsx("div", {
+          id: `${card.id}-content`,
+          className: classNames__default.default('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__*/React.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__*/React.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__*/jsxRuntime.jsx("div", {
+      className: "visible-xs",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "carousel__indicators",
+        children: cards?.map((card, index) => /*#__PURE__*/jsxRuntime.jsx("button", {
+          "data-testid": `${card.id}-indicator`,
+          tabIndex: -1,
+          type: "button",
+          className: classNames__default.default('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__*/React.forwardRef((props, reference) => {
   const {
     'aria-label': ariaLabel,
@@ -2610,10 +2814,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 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
@@ -3358,9 +3558,6 @@ class DayCalendarTable extends React.PureComponent {
     onSelect(new Date(viewYear, viewMonth, day));
   };
   isDisabled = day => {
-    if (day === -1) {
-      return true;
-    }
     const {
       min,
       max,
@@ -3376,7 +3573,7 @@ class DayCalendarTable extends React.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 {
@@ -3770,8 +3967,8 @@ class DateLookup extends React.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
@@ -3792,7 +3989,7 @@ class DateLookup extends React.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 {
@@ -3917,7 +4114,9 @@ class DateLookup extends React.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);
     }
@@ -14386,6 +14585,7 @@ exports.Body = Body;
 exports.BottomSheet = BottomSheet$2;
 exports.Button = Button;
 exports.Card = Card$2;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox$1;
 exports.CheckboxButton = CheckboxButton$1;
 exports.CheckboxOption = CheckboxOption;