@transferwise/components 46.156.0 → 46.157.1

package/src/Typeahead/Typeahead.tsx

@@ -216,31 +216,15 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
   };
 
   handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    const { showSuggestions, allowNew, multiple, chipSeparators, options } = this.props;
-    const { keyboardFocusedOptionIndex, query, selected } = this.state;
+    const { showSuggestions, allowNew, multiple, chipSeparators } = this.props;
+    const { query, selected } = this.state;
     const chipsMode = !showSuggestions && allowNew && multiple;
 
     if (chipsMode && ['Enter', 'Tab', ...chipSeparators].includes(event.key) && query.trim()) {
       event.preventDefault();
       this.selectItem({ label: query });
-    } else {
+    } else if (!this.handleOptionNavigation(event)) {
       switch (event.key) {
-        case 'ArrowDown':
-          event.preventDefault();
-          this.moveFocusedOption(1);
-          break;
-        case 'ArrowUp':
-          event.preventDefault();
-          this.moveFocusedOption(-1);
-          break;
-        case 'Enter':
-          event.preventDefault();
-          if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
-            this.selectItem(options[keyboardFocusedOptionIndex]);
-          } else if (allowNew && query.trim()) {
-            this.selectItem({ label: query });
-          }
-          break;
         case 'Backspace':
           if (multiple && !query && selected.length > 0) {
             this.updateSelectedValue(selected.slice(0, -1));
@@ -251,6 +235,36 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
     }
   };
+
+  handleOptionListKeyDown: React.KeyboardEventHandler<HTMLUListElement> = (event) => {
+    this.handleOptionNavigation(event);
+  };
+
+  handleOptionNavigation(event: React.KeyboardEvent<HTMLElement>) {
+    const { allowNew, options } = this.props;
+    const { keyboardFocusedOptionIndex, query } = this.state;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocusedOption(1);
+        return true;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocusedOption(-1);
+        return true;
+      case 'Enter':
+        event.preventDefault();
+        if (keyboardFocusedOptionIndex != null && options[keyboardFocusedOptionIndex]) {
+          this.selectItem(options[keyboardFocusedOptionIndex]);
+        } else if (allowNew && query.trim()) {
+          this.selectItem({ label: query });
+        }
+        return true;
+      default:
+        return false;
+    }
+  }
   moveFocusedOption(offset: number) {
     this.setState((previousState) => {
       const { keyboardFocusedOptionIndex } = previousState;
@@ -261,7 +275,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       }
       const optionRef = this.optionRefs[index];
       if (optionRef?.current) {
-        optionRef.current.focus(); // Set focus on the option element
+        optionRef.current.scrollIntoView({ block: 'nearest' });
       }
       return {
         keyboardFocusedOptionIndex: index,
@@ -269,6 +283,10 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
     });
   }
 
+  setFocusedOption = (index: number) => {
+    this.setState({ keyboardFocusedOptionIndex: index });
+  };
+
   selectItem = (item: TypeaheadOption<T>) => {
     const { multiple } = this.props;
     let selected = [...this.state.selected];
@@ -423,12 +441,16 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
       });
     }
     return (
-      <div
-        className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
-        id={`menu-${id}`}
-      >
+      <div className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}>
         {(!!optionsToRender.length || footer) && (
-          <ul className="dropdown-menu" role="menu">
+          <ul
+            className="dropdown-menu"
+            id={`menu-${id}`}
+            role="listbox"
+            aria-label={this.props?.intl?.formatMessage(messages.suggestionsLabel)}
+            tabIndex={0}
+            onKeyDown={this.handleOptionListKeyDown}
+          >
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
               this.optionRefs[idx] = ref;
@@ -439,7 +461,8 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                   query={query}
                   option={option}
                   selected={keyboardFocusedOptionIndex === idx}
-                  id={String(option.label.replace(/\s+/g, '-'))}
+                  id={`${id}-${idx}`}
+                  onMouseEnter={() => this.setFocusedOption(idx)}
                   onClick={(event) => {
                     this.onOptionSelected(event, option);
                   }}
@@ -554,7 +577,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
               autoComplete={inputAutoComplete}
               ariaActivedescendant={
                 keyboardFocusedOptionIndex !== null && options[keyboardFocusedOptionIndex]
-                  ? `option-${options[keyboardFocusedOptionIndex].label.replace(/\s+/g, '-')}`
+                  ? `option-${id}-${keyboardFocusedOptionIndex}`
                   : undefined
               }
               onChange={this.handleOnChange}

package/src/Typeahead/TypeaheadInput/TypeaheadInput.tsx

@@ -82,7 +82,7 @@ export default class TypeaheadInput<T> extends Component<
       onFocus,
       onPaste,
       autoComplete,
-      ariaActivedescendant, // Declare the ariaActivedescendant variable
+      ariaActivedescendant,
     } = this.props;
     const { inputWidth } = this.state;
 
@@ -93,11 +93,7 @@ export default class TypeaheadInput<T> extends Component<
         className={clsx(multiple && 'typeahead__input')}
         name={name}
         id={`input-${typeaheadId}`}
-        aria-activedescendant={
-          ariaActivedescendant
-            ? `menu-${typeaheadId} ${ariaActivedescendant}`
-            : `menu-${typeaheadId}`
-        }
+        aria-activedescendant={ariaActivedescendant}
         autoFocus={autoFocus}
         placeholder={hasPlaceholder ? placeholder : ''}
         aria-autocomplete="list"

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -7,3 +7,8 @@
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.less

@@ -12,3 +12,12 @@
     border-radius: var(--radius-small);
   }
 }
+.dropdown-menu
+  > li.typeahead__option:not(.active):not(.selected)
+  > .dropdown-item:not([disabled]):not(.disabled) {
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+}

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -8,12 +8,13 @@ export type TypeaheadOptionProps<T> = {
   option: TypeaheadOption<T>;
   selected?: boolean;
   onClick?: React.MouseEventHandler;
+  onMouseEnter?: React.MouseEventHandler;
   query?: string;
   id?: string;
 };
 
 const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref) => {
-  const { option, selected = false, onClick = () => {}, query = '', id } = props;
+  const { option, selected = false, onClick = () => {}, onMouseEnter, query = '', id } = props;
   const { label, note, secondary } = option;
 
   return (
@@ -25,8 +26,9 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       className={clsx('typeahead__option tw-dropdown-item clickable', {
         'tw-dropdown-item--focused': selected,
       })}
+      onMouseEnter={onMouseEnter}
     >
-      <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
+      <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (

package/src/i18n/en.json

@@ -12,6 +12,10 @@
   "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
   "neptune.DateLookup.month": "month",
   "neptune.DateLookup.next": "next",
+  "neptune.DateLookup.notAvailable": "not available",
+  "neptune.DateLookup.outOfRangeAfter": "Please enter {min} or a later date.",
+  "neptune.DateLookup.outOfRangeBefore": "Please enter {max} or an earlier date.",
+  "neptune.DateLookup.outOfRangeBetween": "Please select a date between {min} and {max}.",
   "neptune.DateLookup.previous": "previous",
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",

package/src/index.ts

@@ -26,6 +26,8 @@ export type {
   AnchorElementProps,
 } from './Button';
 export type { BodyProps } from './Body';
+export type { CalendarProps } from './Calendar';
+export type { DisabledRules, WeekDayType, DisabledDateRange } from './Calendar';
 export type { CardProps } from './_deprecated/Card';
 export type {
   CarouselProps,
@@ -56,7 +58,6 @@ export type {
 export type { BottomSheetProps } from './common/BottomSheet';
 export type { DateInputProps } from './DateInput';
 export type { DateLookupProps } from './DateLookup';
-export type { CalendarProps } from './Calendar';
 export type { DecisionProps } from './Decision';
 export type {
   DefinitionListProps,
@@ -206,6 +207,7 @@ export { default as Badge, BadgeAssets } from './_deprecated/Badge';
 export { default as Body } from './Body';
 export { default as Button } from './Button';
 export { default as IconButton } from './IconButton';
+export { default as Calendar } from './Calendar';
 export { default as Carousel } from './Carousel';
 export { default as Card } from './_deprecated/Card';
 export { default as Checkbox } from './Checkbox';
@@ -221,7 +223,6 @@ export { default as BaseCard } from './common/BaseCard';
 export { default as CriticalCommsBanner } from './_deprecated/CriticalBanner';
 export { default as DateInput } from './DateInput';
 export { default as DateLookup } from './DateLookup';
-export { default as Calendar } from './Calendar';
 export { default as Decision } from './Decision';
 export { default as DefinitionList } from './DefinitionList';
 export { default as Dimmer } from './Dimmer';

package/src/main.css

@@ -27269,46 +27269,12 @@ a[data-toggle="tooltip"] {
   pointer-events: auto;
 }
 
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  border: none;
-  background-color: inherit;
-}
-
-.tw-date-lookup-calendar thead {
-  background-color: transparent;
-  background-color: initial;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-
-.tw-date-lookup-calendar > tbody > tr > td {
-  border: none;
-  padding: 4px;
-  padding: var(--size-4);
-}
-
-@media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td {
-    padding: 0;
-  }
-}
-
-.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
-  padding: 1px;
-}
-
-.tw-date-lookup-calendar > tbody > tr > td button {
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
-  color: #0097c7;
-  color: var(--color-content-accent);
   border: transparent;
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -27320,12 +27286,92 @@ a[data-toggle="tooltip"] {
 }
 
 @media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td button {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
     padding: 0;
   }
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
+.wds-Calendar__option--day:focus,
+.wds-Calendar__option--month:focus,
+.wds-Calendar__option--year:focus {
+  background-color: var(--color-background-screen-hover);
+}
+
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+}
+
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+
+.wds-Calendar__option--day {
   height: 40px;
   height: var(--size-40);
   border-radius: 9999px;
@@ -27340,19 +27386,53 @@ a[data-toggle="tooltip"] {
   justify-content: center;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+.wds-Calendar__option--day.today {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  padding: 4px;
+  padding: var(--size-4);
+}
+
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td {
+    padding: 0;
+  }
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:has(.wds-Calendar__option--day) {
+  padding: 1px;
+}
+
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus:not(.disabled):not([aria-disabled="true"]),
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-background-screen-hover);
 }
 
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active:not([aria-disabled="true"]) {
   background-color: var(--color-interactive-primary);
   color: var(--color-interactive-contrast);
 }
@@ -34122,6 +34202,24 @@ html:not([dir="rtl"]) .np-navigation-option {
 .typeahead .dropdown-menu {
   max-width: 100%;
   width: 100%;
+  margin-top: 8px;
+  margin-top: var(--size-8);
+  scroll-padding-top: 8px;
+  scroll-padding-top: var(--size-8);
+  scroll-padding-bottom: 8px;
+  scroll-padding-bottom: var(--size-8);
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+
+.typeahead .dropdown-menu:focus {
+  outline: none;
+}
+
+.typeahead .dropdown-menu:focus-visible {
+  outline: #37517e solid 2px;
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: 2px;
+  outline-offset: var(--ring-outline-offset);
 }
 
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
@@ -34348,6 +34446,12 @@ html:not([dir="rtl"]) .np-navigation-option {
   border-radius: var(--radius-small);
 }
 
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):focus,
+.dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):active {
+  box-shadow: none;
+}
+
 .tw-droppable-lg {
   min-height: 346px;
 }

package/build/Calendar/tableLink/TableLink.js

@@ -1,61 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var clsx = require('clsx');
-var React = require('react');
-var reactIntl = require('react-intl');
-var Calendar_messages = require('../Calendar.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick
-}) => {
-  const buttonRef = React.useRef(null);
-  const intl = reactIntl.useIntl();
-  React.useEffect(() => {
-    if (autofocus) {
-      setTimeout(() => {
-        buttonRef.current?.focus();
-      }, 0);
-    }
-  }, [autofocus]);
-  const onCalendarClick = event => {
-    event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
-  };
-  const calculateAriaLabel = () => {
-    if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(Calendar_messages.default.selected)} ${intl.formatMessage(Calendar_messages.default[type])}`;
-    }
-    return longTitle || title;
-  };
-  return /*#__PURE__*/jsxRuntime.jsx("button", {
-    ref: buttonRef,
-    type: "button",
-    className: clsx.clsx(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
-      active: !!active
-    }, {
-      today: !!today
-    }),
-    disabled: disabled,
-    tabIndex: autofocus ? 0 : -1,
-    "aria-label": calculateAriaLabel(),
-    "aria-pressed": active,
-    onClick: onCalendarClick,
-    children: title || item
-  });
-};
-
-exports.default = TableLink;
-//# sourceMappingURL=TableLink.js.map

package/build/Calendar/tableLink/TableLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.js","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,YAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;AAEtBC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,yBAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,yBAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,cAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,SAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/Calendar/tableLink/TableLink.mjs

@@ -1,57 +0,0 @@
-import { clsx } from 'clsx';
-import { useRef, useEffect } from 'react';
-import { useIntl } from 'react-intl';
-import messages from '../Calendar.messages.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-const TableLink = ({
-  item,
-  type,
-  title,
-  longTitle,
-  active,
-  disabled,
-  today,
-  autofocus,
-  onClick
-}) => {
-  const buttonRef = useRef(null);
-  const intl = useIntl();
-  useEffect(() => {
-    if (autofocus) {
-      setTimeout(() => {
-        buttonRef.current?.focus();
-      }, 0);
-    }
-  }, [autofocus]);
-  const onCalendarClick = event => {
-    event.preventDefault();
-    if (!disabled) {
-      onClick(item);
-    }
-  };
-  const calculateAriaLabel = () => {
-    if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(messages.selected)} ${intl.formatMessage(messages[type])}`;
-    }
-    return longTitle || title;
-  };
-  return /*#__PURE__*/jsx("button", {
-    ref: buttonRef,
-    type: "button",
-    className: clsx(`tw-date-lookup-${type}-option np-text-body-default-bold`, {
-      active: !!active
-    }, {
-      today: !!today
-    }),
-    disabled: disabled,
-    tabIndex: autofocus ? 0 : -1,
-    "aria-label": calculateAriaLabel(),
-    "aria-pressed": active,
-    onClick: onCalendarClick,
-    children: title || item
-  });
-};
-
-export { TableLink as default };
-//# sourceMappingURL=TableLink.mjs.map

package/build/Calendar/tableLink/TableLink.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.mjs","sources":["../../../src/Calendar/tableLink/TableLink.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport messages from '../Calendar.messages';\n\ninterface TableLinkProps {\n  item: number;\n  type: 'day' | 'month' | 'year';\n  title?: string;\n  longTitle?: string;\n  active: boolean;\n  disabled: boolean;\n  today: boolean;\n  autofocus?: boolean;\n  onClick: (item: number) => void;\n}\n\nconst TableLink = ({\n  item,\n  type,\n  title,\n  longTitle,\n  active,\n  disabled,\n  today,\n  autofocus,\n  onClick,\n}: TableLinkProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n\n  useEffect(() => {\n    if (autofocus) {\n      setTimeout(() => {\n        buttonRef.current?.focus();\n      }, 0);\n    }\n  }, [autofocus]);\n\n  const onCalendarClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.preventDefault();\n    if (!disabled) {\n      onClick(item);\n    }\n  };\n\n  const calculateAriaLabel = () => {\n    if (active) {\n      return `${longTitle || title || ''}, ${intl.formatMessage(\n        messages.selected,\n      )} ${intl.formatMessage(messages[type])}`;\n    }\n    return longTitle || title;\n  };\n\n  return (\n    <button\n      ref={buttonRef}\n      type=\"button\"\n      className={clsx(\n        `tw-date-lookup-${type}-option np-text-body-default-bold`,\n        { active: !!active },\n        { today: !!today },\n      )}\n      disabled={disabled}\n      tabIndex={autofocus ? 0 : -1}\n      aria-label={calculateAriaLabel()}\n      aria-pressed={active}\n      onClick={onCalendarClick}\n    >\n      {title || item}\n    </button>\n  );\n};\n\nexport default TableLink;\n"],"names":["TableLink","item","type","title","longTitle","active","disabled","today","autofocus","onClick","buttonRef","useRef","intl","useIntl","useEffect","setTimeout","current","focus","onCalendarClick","event","preventDefault","calculateAriaLabel","formatMessage","messages","selected","_jsx","ref","className","clsx","tabIndex","children"],"mappings":";;;;;;AAkBA,MAAMA,SAAS,GAAGA,CAAC;EACjBC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,SAAS;EACTC,MAAM;EACNC,QAAQ;EACRC,KAAK;EACLC,SAAS;AACTC,EAAAA;AAAO,CACQ,KAAI;AACnB,EAAA,MAAMC,SAAS,GAAGC,MAAM,CAAoB,IAAI,CAAC;AACjD,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;AAEtBC,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,IAAIN,SAAS,EAAE;AACbO,MAAAA,UAAU,CAAC,MAAK;AACdL,QAAAA,SAAS,CAACM,OAAO,EAAEC,KAAK,EAAE;MAC5B,CAAC,EAAE,CAAC,CAAC;AACP,IAAA;AACF,EAAA,CAAC,EAAE,CAACT,SAAS,CAAC,CAAC;EAEf,MAAMU,eAAe,GAAIC,KAA0C,IAAI;IACrEA,KAAK,CAACC,cAAc,EAAE;IACtB,IAAI,CAACd,QAAQ,EAAE;MACbG,OAAO,CAACR,IAAI,CAAC;AACf,IAAA;EACF,CAAC;EAED,MAAMoB,kBAAkB,GAAGA,MAAK;AAC9B,IAAA,IAAIhB,MAAM,EAAE;MACV,OAAO,CAAA,EAAGD,SAAS,IAAID,KAAK,IAAI,EAAE,CAAA,EAAA,EAAKS,IAAI,CAACU,aAAa,CACvDC,QAAQ,CAACC,QAAQ,CAClB,CAAA,CAAA,EAAIZ,IAAI,CAACU,aAAa,CAACC,QAAQ,CAACrB,IAAI,CAAC,CAAC,CAAA,CAAE;AAC3C,IAAA;IACA,OAAOE,SAAS,IAAID,KAAK;EAC3B,CAAC;AAED,EAAA,oBACEsB,GAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,GAAG,EAAEhB,SAAU;AACfR,IAAAA,IAAI,EAAC,QAAQ;AACbyB,IAAAA,SAAS,EAAEC,IAAI,CACb,CAAA,eAAA,EAAkB1B,IAAI,mCAAmC,EACzD;MAAEG,MAAM,EAAE,CAAC,CAACA;AAAM,KAAE,EACpB;MAAEE,KAAK,EAAE,CAAC,CAACA;KAAO,CAClB;AACFD,IAAAA,QAAQ,EAAEA,QAAS;AACnBuB,IAAAA,QAAQ,EAAErB,SAAS,GAAG,CAAC,GAAG,EAAG;IAC7B,YAAA,EAAYa,kBAAkB,EAAG;AACjC,IAAA,cAAA,EAAchB,MAAO;AACrBI,IAAAA,OAAO,EAAES,eAAgB;IAAAY,QAAA,EAExB3B,KAAK,IAAIF;AAAI,GACR,CAAC;AAEb;;;;"}

package/build/types/Calendar/tableLink/TableLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableLink.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/TableLink.tsx"],"names":[],"mappings":"AAMA,UAAU,cAAc;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,QAAA,MAAM,SAAS,GAAI,gFAUhB,cAAc,gCA8ChB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/build/types/Calendar/tableLink/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/tableLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}