@transferwise/components 46.97.5 → 46.98.1

package/src/upload/steps/processingStep/processingStep.tsx

@@ -1,13 +1,12 @@
 import Button from '../../../button';
 import { Status, Typography } from '../../../common';
-import ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';
+import ProcessIndicator from '../../../processIndicator';
 import Title from '../../../title';
 
 export interface ProcessingStepProps {
   isComplete: boolean;
   isError: boolean;
   isSuccess: boolean;
-  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;
   onClear: React.MouseEventHandler<HTMLButtonElement>;
   psButtonText: string;
   psProcessingText: string;
@@ -18,7 +17,6 @@ export default function ProcessingStep({
   isComplete,
   isError,
   isSuccess,
-  onAnimationCompleted,
   onClear,
   psButtonText,
   psProcessingText,
@@ -35,10 +33,7 @@ export default function ProcessingStep({
   return (
     <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
       <div className="droppable-card-content">
-        <ProcessIndicator
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
+        <ProcessIndicator status={processStatus} />
         <Title className="m-y-2" type={Typography.TITLE_BODY} aria-live="polite">
           {psProcessingText}
         </Title>

package/src/uploadInput/UploadInput.tsx

@@ -161,6 +161,7 @@ const UploadInput = ({
 }: UploadInputProps) => {
   const inputAttributes = useInputAttributes({ nonLabelable: true });
   const [markedFileForDelete, setMarkedFileForDelete] = useState<UploadedFile | null>(null);
+  const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = useState<string | number | null>(null);
   const [mounted, setMounted] = useState(false);
   const { formatMessage } = useIntl();
   const uploadInputRef = useRef<HTMLInputElement | null>(null);
@@ -321,9 +322,13 @@ const UploadInput = ({
     }
   }, [onFilesChange, uploadedFiles]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const [nextFocusable, setNextFocusable] = useState<HTMLDivElement | UploadItemRef | null>(
-    uploadInputRef.current,
-  );
+  type NextFocusable =
+    | HTMLDivElement
+    | UploadItemRef
+    | { ref: HTMLDivElement | UploadItemRef; target: 'button' | 'link' }
+    | null;
+
+  const [nextFocusable, setNextFocusable] = useState<NextFocusable>(uploadInputRef.current);
 
   const handleFocus = (fileId: string | number) => {
     fileRefs = fileRefs.filter((ref) => {
@@ -331,7 +336,15 @@ const UploadInput = ({
     });
 
     const filesCount = fileRefs.length;
-    let next: HTMLDivElement | UploadItemRef | null = uploadInputRef.current;
+    let next: UploadItemRef | HTMLDivElement | null = uploadInputRef.current;
+    let focusTarget: 'button' | 'link' = 'button';
+
+    // If there will be no files left after deletion, focus the upload button
+    if (filesCount === 1) {
+      next = uploadInputRef.current;
+      setNextFocusable(next);
+      return;
+    }
 
     if (filesCount > 1) {
       const currentFileIndex = fileRefs.findIndex((file) => file?.id === fileId);
@@ -344,15 +357,61 @@ const UploadInput = ({
       } else {
         next = fileRefs[currentFileIndex + 1];
       }
+
+      // If next is an UploadItemRef, check if it has a URL (succeeded)
+      if (next && 'status' in next) {
+        // Find the file object for this ref
+        const fileObj = uploadedFiles.find((f) => f.id === next?.id);
+        if (
+          fileObj &&
+          (fileObj.status === Status.SUCCEEDED || fileObj.status === Status.DONE) &&
+          fileObj.url
+        ) {
+          focusTarget = 'link';
+        }
+      }
+      setNextFocusable(() => {
+        if (next && typeof (next as UploadItemRef).focus === 'function') {
+          return { ref: next, target: focusTarget };
+        }
+        return next;
+      });
     }
-    setNextFocusable(next);
   };
 
   const handleRefocus = () => {
-    if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
-      setTimeout(() => {
-        nextFocusable.focus();
-      }, 0);
+    const focusTarget = nextFocusable;
+    if (lastAttemptedDeleteId) {
+      setLastAttemptedDeleteId(null);
+      return;
+    }
+    if (focusTarget) {
+      // If there are no files left, focus the upload button
+      if (
+        uploadedFiles.length === 0 &&
+        uploadInputRef.current &&
+        typeof uploadInputRef.current.focus === 'function'
+      ) {
+        setTimeout(() => {
+          uploadInputRef.current!.focus();
+        }, 0);
+      } else if (
+        typeof focusTarget === 'object' &&
+        'ref' in focusTarget &&
+        focusTarget.ref &&
+        typeof focusTarget.ref.focus === 'function'
+      ) {
+        setTimeout(() => {
+          if (focusTarget.ref && typeof (focusTarget.ref as UploadItemRef).focus === 'function') {
+            // @ts-expect-error: focus may not exist on all possible ref types, but is safe here
+            (focusTarget.ref as UploadItemRef).focus(focusTarget.target);
+          }
+        }, 0);
+      } else if (focusTarget && typeof (focusTarget as UploadItemRef).focus === 'function') {
+        setTimeout(() => {
+          (focusTarget as UploadItemRef).focus();
+        }, 0);
+      }
     }
   };
 
@@ -391,10 +450,14 @@ const UploadInput = ({
               onDelete={
                 file.status === Status.FAILED
                   ? async () => {
+                      setLastAttemptedDeleteId(file.id);
                       await removeFile(file);
                       handleRefocus();
                     }
-                  : () => setMarkedFileForDelete(file)
+                  : () => {
+                      setLastAttemptedDeleteId(file.id);
+                      setMarkedFileForDelete(file);
+                    }
               }
               onDownload={onDownload}
               onFocus={() => handleFocus(file.id)}
@@ -451,6 +514,7 @@ const UploadInput = ({
                   void removeFile(markedFileForDelete);
                 }
                 setMarkedFileForDelete(null);
+                setLastAttemptedDeleteId(null);
               }}
             >
               {deleteConfirm?.confirmText || formatMessage(MESSAGES.deleteModalConfirmButtonText)}

package/src/uploadInput/uploadItem/UploadItem.css

@@ -152,7 +152,8 @@
   padding-left: var(--size-16);
 }
 .np-upload-input__item .np-upload-input-errors > li::before {
-  content: '•';
+  content: '•' ;
+  content: '•' / '';
   position: absolute;
   display: block;
   left: 0;

package/src/uploadInput/uploadItem/UploadItem.less

@@ -158,7 +158,7 @@
       padding-left: var(--size-16);
 
       &::before {
-        content: '•';
+        content: '•' / '';
         position: absolute;
         display: block;
         left: 0;

package/src/uploadInput/uploadItem/UploadItem.tsx

@@ -19,7 +19,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
   singleFileUpload: boolean;
   canDelete: boolean;
   onDelete: () => void;
-  onFocus: () => void;
+  onFocus: (target?: 'button' | 'link') => void;
 
   /**
    * Callback to be called when the file link is clicked.
@@ -63,11 +63,15 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
     const buttonRef = useRef<HTMLButtonElement>(null);
 
     useImperativeHandle<UploadItemRef, UploadItemRef>(ref, () => ({
-      focus: (): void => {
-        if (url) {
-          linkRef.current?.focus();
-        } else {
-          buttonRef.current?.focus();
+      focus: (target?: 'button' | 'link'): void => {
+        if (target === 'button' && buttonRef.current) {
+          buttonRef.current.focus();
+        } else if (target === 'link' && linkRef.current) {
+          linkRef.current.focus();
+        } else if (buttonRef.current) {
+          buttonRef.current.focus();
+        } else if (linkRef.current) {
+          linkRef.current.focus();
         }
       },
       id: file.id,
@@ -199,6 +203,7 @@ const UploadItem = forwardRef<UploadItemRef, UploadItemProps>(
               tabIndex={0}
               data-testid={`${file.id}-${TEST_IDS.action}`}
               onClick={() => onDelete()}
+              // @ts-expect-error: handleFocus is not a standard FocusEventHandler, but required for parent logic
               onFocus={handleFocus}
             >
               <Bin size={16} />

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -3,7 +3,7 @@ import { userEvent, render, screen, waitFor } from '../test-utils';
 import { Input } from '../inputs/Input';
 import WithDisplayFormat from '.';
 
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+const user = userEvent;
 
 const setup = (props) =>
   render(
@@ -22,15 +22,6 @@ describe('InputWithTextFormat (React Testing Library)', () => {
     onBlur: jest.fn(),
   };
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-  });
-
   [
     { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
     { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
@@ -132,18 +123,23 @@ describe('InputWithTextFormat (React Testing Library)', () => {
     expect(input).toHaveValue('12');
   });
 
-  // @FIXME (maybe) Is this behaviour expected? 🤔
-  it(`moves to the end, when entered a char in the middle`, async () => {
+  it(`cusor preserve position when entered a char in the middle`, async () => {
     setup(initialProps);
     const input = screen.getByRole('textbox');
     await user.type(input, '123');
     expect(input).toHaveValue('12-3');
 
-    await user.type(input, '{arrowLeft}{arrowLeft}{arrowLeft}@');
+    await user.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+    await user.keyboard('@');
+
     expect(input).toHaveValue('1@-23');
 
-    await user.type(input, 'x');
-    expect(input).toHaveValue('1@-23x');
+    await user.keyboard('x');
+    expect(input).toHaveValue('1@-x23');
+
+    await user.keyboard('{arrowright}{backspace}');
+
+    expect(input).toHaveValue('1@-x3');
   });
 
   it(`supports pasting`, async () => {

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -270,7 +270,6 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
-    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -281,7 +280,9 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
     );
 
     setTimeout(() => {
-      target?.setSelectionRange(cursorPosition, cursorPosition);
+      if (triggerEvent) {
+        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
+      }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };

package/build/selectOption/SelectOption.js

@@ -1,131 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var clsx = require('clsx');
-var Option = require('../common/Option/Option.js');
-require('../common/theme.js');
-require('../common/direction.js');
-require('../common/propsValues/control.js');
-var breakpoint = require('../common/propsValues/breakpoint.js');
-require('../common/propsValues/size.js');
-require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-var position = require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
-var icons = require('@transferwise/icons');
-var reactIntl = require('react-intl');
-require('../common/closeButton/CloseButton.messages.js');
-var jsxRuntime = require('react/jsx-runtime');
-var Section = require('../section/Section.js');
-var Header = require('../header/Header.js');
-var NavigationOption = require('../navigationOption/NavigationOption.js');
-var NavigationOptionsList = require('../navigationOptionsList/NavigationOptionsList.js');
-var contexts = require('../inputs/contexts.js');
-var SelectOption_messages = require('./SelectOption.messages.js');
-var ResponsivePanel = require('../common/responsivePanel/ResponsivePanel.js');
-var useScreenSize = require('../common/hooks/useScreenSize.js');
-
-function SelectOption({
-  selected = undefined,
-  options,
-  onChange,
-  placeholder,
-  disabled,
-  ...props
-}) {
-  const intl = reactIntl.useIntl();
-  const rootRef = React.useRef(null);
-  const [showOptions, setShowOptions] = React.useState(false);
-  const hasSelected = selected !== undefined;
-  const isLargeScreen = useScreenSize.useScreenSize(breakpoint.Breakpoint.SMALL);
-  const inputAttributes = contexts.useInputAttributes();
-  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
-  function handleOnClick(showOptionsStatus) {
-    return () => {
-      setShowOptions(showOptionsStatus);
-    };
-  }
-  function handleOnChange(data) {
-    return () => {
-      setShowOptions(false);
-      onChange(data);
-    };
-  }
-  function getOptions(isLargeScreen = false) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: clsx.clsx({
-        'np-select-option-list': isLargeScreen
-      }),
-      children: options.map((optionsSection, index) => /*#__PURE__*/jsxRuntime.jsxs(Section.default, {
-        className: clsx.clsx({
-          'p-x-2 p-y-1': isLargeScreen
-        }),
-        children: [optionsSection.title && /*#__PURE__*/jsxRuntime.jsx(Header.Header, {
-          title: optionsSection.title
-        }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionsList.default, {
-          children: optionsSection.options.map((option, index) => {
-            return /*#__PURE__*/jsxRuntime.jsx(NavigationOption.default, {
-              isContainerAligned: !isLargeScreen,
-              showMediaCircle: true,
-              showMediaAtAllSizes: true,
-              onClick: handleOnChange(option),
-              ...option
-            }, index);
-          })
-        })]
-      }, index))
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Option.default, {
-      ref: rootRef,
-      as: "div",
-      showMediaAtAllSizes: true,
-      disabled: disabled,
-      decision: false,
-      media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsxRuntime.jsx(icons.Plus, {
-        size: 24
-      }),
-      title: (hasSelected ? selected : placeholder).title,
-      content: (hasSelected ? selected : placeholder).content,
-      className: clsx.clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
-      button: /*#__PURE__*/jsxRuntime.jsx("button", {
-        ...inputAttributes,
-        type: "button",
-        disabled: disabled,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-haspopup": "dialog",
-        "aria-expanded": showOptions,
-        className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
-        "aria-label": hasSelected ? undefined : props['aria-label'],
-        onClick: handleOnClick(true),
-        children: hasSelected ? /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {
-          title: intl.formatMessage(SelectOption_messages.default.selectedActionLabel)
-        }) : placeholder.actionLabel || intl.formatMessage(SelectOption_messages.default.actionLabel)
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(ResponsivePanel.default, {
-      anchorWidth: true,
-      altAxis: true,
-      anchorRef: rootRef,
-      open: showOptions,
-      position: position.Position.BOTTOM,
-      onClose: handleOnClick(false),
-      children: getOptions(isLargeScreen)
-    })]
-  });
-}
-
-exports.default = SelectOption;
-//# sourceMappingURL=SelectOption.js.map

package/build/selectOption/SelectOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.js","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={clsx(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}

package/build/selectOption/SelectOption.messages.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-
-var messages = reactIntl.defineMessages({
-  actionLabel: {
-    id: "neptune.SelectOption.action.label"
-  },
-  selectedActionLabel: {
-    id: "neptune.SelectOption.selected.action.label"
-  }
-});
-
-exports.default = messages;
-//# sourceMappingURL=SelectOption.messages.js.map

package/build/selectOption/SelectOption.messages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.messages.js","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  actionLabel: {\n    id: 'neptune.SelectOption.action.label',\n    defaultMessage: 'Choose',\n  },\n  selectedActionLabel: {\n    id: 'neptune.SelectOption.selected.action.label',\n    defaultMessage: 'Change chosen option',\n  },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/selectOption/SelectOption.messages.mjs

@@ -1,13 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-var messages = defineMessages({
-  actionLabel: {
-    id: "neptune.SelectOption.action.label"
-  },
-  selectedActionLabel: {
-    id: "neptune.SelectOption.selected.action.label"
-  }
-});
-
-export { messages as default };
-//# sourceMappingURL=SelectOption.messages.mjs.map

package/build/selectOption/SelectOption.messages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.messages.mjs","sources":["../../src/selectOption/SelectOption.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n  actionLabel: {\n    id: 'neptune.SelectOption.action.label',\n    defaultMessage: 'Choose',\n  },\n  selectedActionLabel: {\n    id: 'neptune.SelectOption.selected.action.label',\n    defaultMessage: 'Change chosen option',\n  },\n});\n"],"names":["defineMessages","actionLabel","id","selectedActionLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,WAAW,EAAE;IACXC,EAAE,EAAA;GAEH;AACDC,EAAAA,mBAAmB,EAAE;IACnBD,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}

package/build/selectOption/SelectOption.mjs

@@ -1,127 +0,0 @@
-import { useRef, useState } from 'react';
-import { clsx } from 'clsx';
-import Option from '../common/Option/Option.mjs';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import '../common/propsValues/control.mjs';
-import { Breakpoint } from '../common/propsValues/breakpoint.mjs';
-import '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import { Position } from '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
-import { ChevronDown, Plus } from '@transferwise/icons';
-import { useIntl } from 'react-intl';
-import '../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Section from '../section/Section.mjs';
-import { Header } from '../header/Header.mjs';
-import NavigationOption from '../navigationOption/NavigationOption.mjs';
-import NavigationOptionList from '../navigationOptionsList/NavigationOptionsList.mjs';
-import { useInputAttributes } from '../inputs/contexts.mjs';
-import messages from './SelectOption.messages.mjs';
-import ResponsivePanel from '../common/responsivePanel/ResponsivePanel.mjs';
-import { useScreenSize } from '../common/hooks/useScreenSize.mjs';
-
-function SelectOption({
-  selected = undefined,
-  options,
-  onChange,
-  placeholder,
-  disabled,
-  ...props
-}) {
-  const intl = useIntl();
-  const rootRef = useRef(null);
-  const [showOptions, setShowOptions] = useState(false);
-  const hasSelected = selected !== undefined;
-  const isLargeScreen = useScreenSize(Breakpoint.SMALL);
-  const inputAttributes = useInputAttributes();
-  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];
-  function handleOnClick(showOptionsStatus) {
-    return () => {
-      setShowOptions(showOptionsStatus);
-    };
-  }
-  function handleOnChange(data) {
-    return () => {
-      setShowOptions(false);
-      onChange(data);
-    };
-  }
-  function getOptions(isLargeScreen = false) {
-    return /*#__PURE__*/jsx("div", {
-      className: clsx({
-        'np-select-option-list': isLargeScreen
-      }),
-      children: options.map((optionsSection, index) => /*#__PURE__*/jsxs(Section, {
-        className: clsx({
-          'p-x-2 p-y-1': isLargeScreen
-        }),
-        children: [optionsSection.title && /*#__PURE__*/jsx(Header, {
-          title: optionsSection.title
-        }), /*#__PURE__*/jsx(NavigationOptionList, {
-          children: optionsSection.options.map((option, index) => {
-            return /*#__PURE__*/jsx(NavigationOption, {
-              isContainerAligned: !isLargeScreen,
-              showMediaCircle: true,
-              showMediaAtAllSizes: true,
-              onClick: handleOnChange(option),
-              ...option
-            }, index);
-          })
-        })]
-      }, index))
-    });
-  }
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Option, {
-      ref: rootRef,
-      as: "div",
-      showMediaAtAllSizes: true,
-      disabled: disabled,
-      decision: false,
-      media: hasSelected ? selected.media : placeholder.media ?? /*#__PURE__*/jsx(Plus, {
-        size: 24
-      }),
-      title: (hasSelected ? selected : placeholder).title,
-      content: (hasSelected ? selected : placeholder).content,
-      className: clsx('np-select-option', 'clickable', hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder', props.className),
-      button: /*#__PURE__*/jsx("button", {
-        ...inputAttributes,
-        type: "button",
-        disabled: disabled,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-haspopup": "dialog",
-        "aria-expanded": showOptions,
-        className: hasSelected ? 'btn-unstyled' : 'np-action-btn',
-        "aria-label": hasSelected ? undefined : props['aria-label'],
-        onClick: handleOnClick(true),
-        children: hasSelected ? /*#__PURE__*/jsx(ChevronDown, {
-          title: intl.formatMessage(messages.selectedActionLabel)
-        }) : placeholder.actionLabel || intl.formatMessage(messages.actionLabel)
-      })
-    }), /*#__PURE__*/jsx(ResponsivePanel, {
-      anchorWidth: true,
-      altAxis: true,
-      anchorRef: rootRef,
-      open: showOptions,
-      position: Position.BOTTOM,
-      onClose: handleOnClick(false),
-      children: getOptions(isLargeScreen)
-    })]
-  });
-}
-
-export { SelectOption as default };
-//# sourceMappingURL=SelectOption.mjs.map

package/build/selectOption/SelectOption.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectOption.mjs","sources":["../../src/selectOption/SelectOption.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { ActionButtonProps } from '../actionButton';\nimport { clsx } from 'clsx';\nimport Option from '../common/Option';\nimport type { OptionProps } from '../common/Option/Option';\nimport { Breakpoint, Position } from '../common';\nimport Section from '../section';\nimport Header from '../header';\nimport { HeaderProps } from '../header/Header';\nimport NavigationOption from '../navigationOption';\nimport NavigationOptionsList from '../navigationOptionsList';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './SelectOption.messages';\nimport { useIntl } from 'react-intl';\nimport ResponsivePanel from '../common/responsivePanel';\nimport { useScreenSize } from '../common/hooks/useScreenSize';\nimport { ChevronDown, Plus } from '@transferwise/icons';\n\nexport type SelectOptiopsSection<T = unknown> = {\n  title?: HeaderProps['title'];\n  options: SelectOptionValue<T>[];\n};\n\nexport type SelectOptionValue<T = unknown> = Pick<\n  OptionProps,\n  'media' | 'title' | 'content' | 'disabled'\n> & {\n  value?: T;\n};\n\nexport type SelectOptionPlaceholder = Pick<OptionProps, 'media' | 'title' | 'content'> & {\n  actionLabel?: ActionButtonProps['children'];\n};\n\nexport type SelectOptionProps<T = unknown> = {\n  onChange: (selected: SelectOptionValue<T>) => void;\n  selected?: SelectOptionValue<T>;\n  options: SelectOptiopsSection<T>[];\n  placeholder: SelectOptionPlaceholder;\n} & Omit<\n  OptionProps,\n  'as' | 'title' | 'media' | 'content' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'\n>;\n\nexport default function SelectOption<T>({\n  selected = undefined,\n  options,\n  onChange,\n  placeholder,\n  disabled,\n  ...props\n}: SelectOptionProps<T>) {\n  const intl = useIntl();\n  const rootRef = useRef(null);\n  const [showOptions, setShowOptions] = useState(false);\n\n  const hasSelected = selected !== undefined;\n  const isLargeScreen = useScreenSize(Breakpoint.SMALL);\n\n  const inputAttributes = useInputAttributes();\n  const ariaLabelledBy = props['aria-labelledby'] ?? inputAttributes?.['aria-labelledby'];\n\n  function handleOnClick(showOptionsStatus: boolean) {\n    return () => {\n      setShowOptions(showOptionsStatus);\n    };\n  }\n\n  function handleOnChange(data: SelectOptionValue<T>) {\n    return () => {\n      setShowOptions(false);\n      onChange(data);\n    };\n  }\n\n  function getOptions(isLargeScreen = false) {\n    return (\n      <div className={clsx({ 'np-select-option-list': isLargeScreen })}>\n        {options.map((optionsSection, index) => (\n          <Section key={index} className={clsx({ 'p-x-2 p-y-1': isLargeScreen })}>\n            {optionsSection.title && <Header title={optionsSection.title} />}\n            <NavigationOptionsList>\n              {optionsSection.options.map((option, index) => {\n                return (\n                  <NavigationOption\n                    key={index}\n                    isContainerAligned={!isLargeScreen}\n                    showMediaCircle\n                    showMediaAtAllSizes\n                    onClick={handleOnChange(option)}\n                    {...option}\n                  />\n                );\n              })}\n            </NavigationOptionsList>\n          </Section>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <Option\n        ref={rootRef}\n        as=\"div\"\n        showMediaAtAllSizes\n        disabled={disabled}\n        decision={false}\n        media={hasSelected ? selected.media : (placeholder.media ?? <Plus size={24} />)}\n        title={(hasSelected ? selected : placeholder).title}\n        content={(hasSelected ? selected : placeholder).content}\n        className={clsx(\n          'np-select-option',\n          'clickable',\n          hasSelected ? 'np-select-option-selected' : 'np-select-option-placeholder',\n          props.className,\n        )}\n        button={\n          <button\n            {...inputAttributes}\n            type=\"button\"\n            disabled={disabled}\n            aria-labelledby={ariaLabelledBy}\n            aria-haspopup=\"dialog\"\n            aria-expanded={showOptions}\n            className={hasSelected ? 'btn-unstyled' : 'np-action-btn'}\n            aria-label={hasSelected ? undefined : props['aria-label']}\n            onClick={handleOnClick(true)}\n          >\n            {hasSelected ? (\n              <ChevronDown title={intl.formatMessage(messages.selectedActionLabel)} />\n            ) : (\n              placeholder.actionLabel || intl.formatMessage(messages.actionLabel)\n            )}\n          </button>\n        }\n      />\n      <ResponsivePanel\n        anchorWidth\n        altAxis\n        anchorRef={rootRef}\n        open={showOptions}\n        position={Position.BOTTOM}\n        onClose={handleOnClick(false)}\n      >\n        {getOptions(isLargeScreen)}\n      </ResponsivePanel>\n    </>\n  );\n}\n"],"names":["SelectOption","selected","undefined","options","onChange","placeholder","disabled","props","intl","useIntl","rootRef","useRef","showOptions","setShowOptions","useState","hasSelected","isLargeScreen","useScreenSize","Breakpoint","SMALL","inputAttributes","useInputAttributes","ariaLabelledBy","handleOnClick","showOptionsStatus","handleOnChange","data","getOptions","_jsx","className","clsx","children","map","optionsSection","index","_jsxs","Section","title","Header","NavigationOptionsList","option","NavigationOption","isContainerAligned","showMediaCircle","showMediaAtAllSizes","onClick","_Fragment","Option","ref","as","decision","media","Plus","size","content","button","type","ChevronDown","formatMessage","messages","selectedActionLabel","actionLabel","ResponsivePanel","anchorWidth","altAxis","anchorRef","open","position","Position","BOTTOM","onClose"],"mappings":"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"}