@transferwise/components 0.0.0-experimental-5a0aa47 → 0.0.0-experimental-0b80b83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/i18n/ja.json +13 -13
- package/build/index.js +304 -147
- package/build/index.js.map +1 -1
- package/build/index.mjs +306 -149
- package/build/index.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts +58 -47
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/alert/index.d.ts +1 -2
- package/build/types/alert/index.d.ts.map +1 -1
- package/build/types/alert/withArrow/alertArrowPositions.d.ts +9 -0
- package/build/types/alert/withArrow/alertArrowPositions.d.ts.map +1 -0
- package/build/types/alert/withArrow/index.d.ts +3 -0
- package/build/types/alert/withArrow/index.d.ts.map +1 -0
- package/build/types/alert/withArrow/withArrow.d.ts +11 -0
- package/build/types/alert/withArrow/withArrow.d.ts.map +1 -0
- package/build/types/common/propsValues/sentiment.d.ts +1 -0
- package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/inlineAlert/InlineAlert.d.ts +4 -2
- package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
- package/build/types/provider/Provider.d.ts +1 -1
- package/build/types/provider/Provider.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/alert/Alert.js +196 -0
- package/src/alert/{Alert.spec.tsx → Alert.spec.js} +40 -43
- package/src/alert/Alert.story.tsx +2 -1
- package/src/alert/index.js +1 -0
- package/src/alert/withArrow/alertArrowPositions.ts +9 -0
- package/src/alert/withArrow/index.js +2 -0
- package/src/alert/withArrow/withArrow.js +50 -0
- package/src/alert/withArrow/withArrow.spec.js +51 -0
- package/src/common/propsValues/sentiment.ts +10 -0
- package/src/i18n/ja.json +13 -13
- package/src/index.ts +1 -1
- package/src/inlineAlert/InlineAlert.spec.tsx +7 -0
- package/src/inlineAlert/InlineAlert.tsx +47 -19
- package/src/provider/Provider.tsx +2 -1
- package/src/statusIcon/StatusIcon.tsx +14 -14
- package/src/alert/Alert.tsx +0 -223
- package/src/alert/index.ts +0 -2
package/build/index.mjs
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, cloneElement, useState,
|
|
4
|
+
import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
|
|
5
5
|
import { useId } from '@radix-ui/react-id';
|
|
6
|
-
import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$
|
|
6
|
+
import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
|
|
7
7
|
import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
|
-
import commonmark from 'commonmark';
|
|
10
9
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
11
10
|
import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
|
|
12
11
|
import { Transition, Listbox } from '@headlessui/react';
|
|
@@ -20,6 +19,7 @@ import { usePopper } from 'react-popper';
|
|
|
20
19
|
import throttle from 'lodash.throttle';
|
|
21
20
|
import { createPortal } from 'react-dom';
|
|
22
21
|
import { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
|
|
22
|
+
import commonmark from 'commonmark';
|
|
23
23
|
import { Flag, Illustration } from '@wise/art';
|
|
24
24
|
import clamp$2 from 'lodash.clamp';
|
|
25
25
|
import debounce from 'lodash.debounce';
|
|
@@ -775,22 +775,22 @@ const Link = ({
|
|
|
775
775
|
});
|
|
776
776
|
};
|
|
777
777
|
|
|
778
|
-
const iconTypeMap = {
|
|
779
|
-
positive: Check,
|
|
780
|
-
neutral: Info$1,
|
|
781
|
-
warning: Alert$1,
|
|
782
|
-
negative: Cross,
|
|
783
|
-
pending: ClockBorderless,
|
|
784
|
-
info: Info$1,
|
|
785
|
-
error: Cross,
|
|
786
|
-
success: Check
|
|
787
|
-
};
|
|
788
778
|
const StatusIcon = ({
|
|
789
|
-
sentiment =
|
|
790
|
-
size =
|
|
779
|
+
sentiment = Sentiment.NEUTRAL,
|
|
780
|
+
size = Size.MEDIUM
|
|
791
781
|
}) => {
|
|
782
|
+
const iconTypeMap = {
|
|
783
|
+
[Sentiment.POSITIVE]: Check,
|
|
784
|
+
[Sentiment.NEUTRAL]: Info$1,
|
|
785
|
+
[Sentiment.WARNING]: Alert$2,
|
|
786
|
+
[Sentiment.NEGATIVE]: Cross,
|
|
787
|
+
[Sentiment.PENDING]: ClockBorderless,
|
|
788
|
+
[Sentiment.INFO]: Info$1,
|
|
789
|
+
[Sentiment.ERROR]: Cross,
|
|
790
|
+
[Sentiment.SUCCESS]: Check
|
|
791
|
+
};
|
|
792
|
+
const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
|
|
792
793
|
const Icon = iconTypeMap[sentiment];
|
|
793
|
-
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
794
794
|
return /*#__PURE__*/jsx("span", {
|
|
795
795
|
"data-testid": "status-icon",
|
|
796
796
|
className: classNames('status-circle', 'status-circle-' + size, sentiment),
|
|
@@ -800,7 +800,7 @@ const StatusIcon = ({
|
|
|
800
800
|
});
|
|
801
801
|
};
|
|
802
802
|
|
|
803
|
-
function logActionRequired(message) {
|
|
803
|
+
function logActionRequired$1(message) {
|
|
804
804
|
if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
|
|
805
805
|
// eslint-disable-next-line no-console
|
|
806
806
|
console.warn(message);
|
|
@@ -808,10 +808,48 @@ function logActionRequired(message) {
|
|
|
808
808
|
}
|
|
809
809
|
function logActionRequiredIf(message, conditional) {
|
|
810
810
|
if (conditional) {
|
|
811
|
-
logActionRequired(message);
|
|
811
|
+
logActionRequired$1(message);
|
|
812
812
|
}
|
|
813
813
|
}
|
|
814
814
|
|
|
815
|
+
const deprecatedMessage = ({
|
|
816
|
+
component,
|
|
817
|
+
propName,
|
|
818
|
+
message,
|
|
819
|
+
expiryDate
|
|
820
|
+
}) => {
|
|
821
|
+
const messages = [`${component} has deprecated the use of ${propName}.`];
|
|
822
|
+
if (message) {
|
|
823
|
+
messages.push(message);
|
|
824
|
+
}
|
|
825
|
+
if (expiryDate) {
|
|
826
|
+
messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
|
|
827
|
+
year: 'numeric',
|
|
828
|
+
month: 'numeric',
|
|
829
|
+
day: 'numeric'
|
|
830
|
+
})}`);
|
|
831
|
+
}
|
|
832
|
+
return messages.join(' ');
|
|
833
|
+
};
|
|
834
|
+
const deprecated = (validator, {
|
|
835
|
+
component,
|
|
836
|
+
message = '',
|
|
837
|
+
newProp: newProperty = null,
|
|
838
|
+
expiryDate = null
|
|
839
|
+
}) => (props, propertyName, ...rest) => {
|
|
840
|
+
const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
|
|
841
|
+
if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
|
|
842
|
+
logActionRequired$1(deprecatedMessage({
|
|
843
|
+
component,
|
|
844
|
+
propName: propertyName,
|
|
845
|
+
message: newPropertyMessage,
|
|
846
|
+
expiryDate
|
|
847
|
+
}));
|
|
848
|
+
}
|
|
849
|
+
return validator(props, propertyName, ...rest);
|
|
850
|
+
};
|
|
851
|
+
var deprecated$1 = deprecated;
|
|
852
|
+
|
|
815
853
|
const reader = new commonmark.Parser();
|
|
816
854
|
const writer = new commonmark.HtmlRenderer({
|
|
817
855
|
safe: true
|
|
@@ -830,7 +868,7 @@ function Markdown({
|
|
|
830
868
|
}
|
|
831
869
|
const linkTarget = config?.link?.target ?? '_self';
|
|
832
870
|
if (allowList != null && blockList != null) {
|
|
833
|
-
logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
871
|
+
logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
834
872
|
}
|
|
835
873
|
const parser = nodes => {
|
|
836
874
|
const parsed = reader.parse(nodes);
|
|
@@ -891,98 +929,146 @@ InlineMarkdown.defaultProps = {
|
|
|
891
929
|
};
|
|
892
930
|
var InlineMarkdown$1 = InlineMarkdown;
|
|
893
931
|
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
932
|
+
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
933
|
+
var ArrowPosition;
|
|
934
|
+
(function (ArrowPosition) {
|
|
935
|
+
ArrowPosition["TOP_LEFT"] = "up-left";
|
|
936
|
+
ArrowPosition["TOP"] = "up-center";
|
|
937
|
+
ArrowPosition["TOP_RIGHT"] = "up-right";
|
|
938
|
+
ArrowPosition["BOTTOM_LEFT"] = "down-left";
|
|
939
|
+
ArrowPosition["BOTTOM"] = "down-center";
|
|
940
|
+
ArrowPosition["BOTTOM_RIGHT"] = "down-right";
|
|
941
|
+
})(ArrowPosition || (ArrowPosition = {}));
|
|
942
|
+
|
|
943
|
+
function withArrow(Alert, arrow) {
|
|
944
|
+
const AlertWithArrow = props => /*#__PURE__*/jsx(Alert, {
|
|
945
|
+
...props,
|
|
946
|
+
className: classNames(props.className, arrowClasses(arrow)),
|
|
947
|
+
arrow: undefined
|
|
948
|
+
});
|
|
949
|
+
AlertWithArrow.propTypes = {
|
|
950
|
+
className: PropTypes.string
|
|
951
|
+
};
|
|
952
|
+
AlertWithArrow.defaultProps = {
|
|
953
|
+
className: undefined
|
|
954
|
+
};
|
|
955
|
+
return AlertWithArrow;
|
|
913
956
|
}
|
|
914
|
-
function
|
|
915
|
-
arrow
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
if (dismissible !== undefined) {
|
|
940
|
-
logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
|
|
941
|
-
}
|
|
942
|
-
}, [dismissible]);
|
|
943
|
-
useEffect(() => {
|
|
944
|
-
if (size !== undefined) {
|
|
945
|
-
logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
|
|
946
|
-
}
|
|
947
|
-
}, [size]);
|
|
948
|
-
const resolvedType = resolveType(type);
|
|
949
|
-
useEffect(() => {
|
|
950
|
-
if (resolvedType !== type) {
|
|
951
|
-
logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
|
|
957
|
+
function arrowClasses(arrow) {
|
|
958
|
+
if (arrow) {
|
|
959
|
+
const classes = ['arrow'];
|
|
960
|
+
const {
|
|
961
|
+
BOTTOM,
|
|
962
|
+
BOTTOM_LEFT,
|
|
963
|
+
BOTTOM_RIGHT,
|
|
964
|
+
TOP,
|
|
965
|
+
TOP_RIGHT,
|
|
966
|
+
TOP_LEFT
|
|
967
|
+
} = ArrowPosition;
|
|
968
|
+
switch (arrow) {
|
|
969
|
+
case BOTTOM:
|
|
970
|
+
return classes.concat('arrow-bottom', 'arrow-center');
|
|
971
|
+
case BOTTOM_LEFT:
|
|
972
|
+
return classes.concat('arrow-bottom', 'arrow-left');
|
|
973
|
+
case BOTTOM_RIGHT:
|
|
974
|
+
return classes.concat('arrow-bottom', 'arrow-right');
|
|
975
|
+
case TOP:
|
|
976
|
+
return classes.concat('arrow-center');
|
|
977
|
+
case TOP_RIGHT:
|
|
978
|
+
return classes.concat('arrow-right');
|
|
979
|
+
case TOP_LEFT:
|
|
980
|
+
default:
|
|
981
|
+
return classes;
|
|
952
982
|
}
|
|
953
|
-
}
|
|
983
|
+
}
|
|
984
|
+
return '';
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
const deprecatedTypeMap$1 = {
|
|
988
|
+
[Sentiment.SUCCESS]: Sentiment.POSITIVE,
|
|
989
|
+
[Sentiment.INFO]: Sentiment.NEUTRAL,
|
|
990
|
+
[Sentiment.ERROR]: Sentiment.NEGATIVE
|
|
991
|
+
};
|
|
992
|
+
const Alert = props => {
|
|
993
|
+
const {
|
|
994
|
+
isModern
|
|
995
|
+
} = useTheme();
|
|
996
|
+
const iconTypeMap = {
|
|
997
|
+
[Sentiment.POSITIVE]: CheckCircle,
|
|
998
|
+
[Sentiment.NEUTRAL]: InfoCircle,
|
|
999
|
+
[Sentiment.WARNING]: Warning,
|
|
1000
|
+
[Sentiment.NEGATIVE]: CrossCircle,
|
|
1001
|
+
[Sentiment.PENDING]: Clock
|
|
1002
|
+
};
|
|
954
1003
|
const [shouldFire, setShouldFire] = useState(false);
|
|
1004
|
+
const {
|
|
1005
|
+
arrow,
|
|
1006
|
+
action,
|
|
1007
|
+
children,
|
|
1008
|
+
className,
|
|
1009
|
+
icon,
|
|
1010
|
+
onDismiss,
|
|
1011
|
+
message,
|
|
1012
|
+
title,
|
|
1013
|
+
type,
|
|
1014
|
+
variant
|
|
1015
|
+
} = props;
|
|
955
1016
|
const closeButtonReference = useRef(null);
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
1017
|
+
if (arrow) {
|
|
1018
|
+
const AlertWithArrow = withArrow(Alert, arrow);
|
|
1019
|
+
return /*#__PURE__*/jsx(AlertWithArrow, {
|
|
1020
|
+
...props
|
|
1021
|
+
});
|
|
1022
|
+
}
|
|
1023
|
+
logActionRequired(props);
|
|
1024
|
+
const mappedType = deprecatedTypeMap$1[type] || type;
|
|
1025
|
+
const Icon = iconTypeMap[mappedType];
|
|
1026
|
+
function generateIcon() {
|
|
1027
|
+
if (icon) {
|
|
1028
|
+
return /*#__PURE__*/jsx("div", {
|
|
1029
|
+
className: "alert__icon",
|
|
1030
|
+
children: icon
|
|
1031
|
+
});
|
|
1032
|
+
}
|
|
1033
|
+
if (isModern) {
|
|
1034
|
+
return /*#__PURE__*/jsx(StatusIcon, {
|
|
1035
|
+
size: Size.LARGE,
|
|
1036
|
+
sentiment: mappedType
|
|
1037
|
+
});
|
|
1038
|
+
} else {
|
|
1039
|
+
return /*#__PURE__*/jsx(Icon, {
|
|
1040
|
+
size: 24
|
|
1041
|
+
});
|
|
1042
|
+
}
|
|
1043
|
+
}
|
|
1044
|
+
const handleTouchStart = () => setShouldFire(true);
|
|
1045
|
+
const handleTouchMove = () => setShouldFire(false);
|
|
1046
|
+
const handleTouchEnd = event => {
|
|
1047
|
+
if (shouldFire && action) {
|
|
962
1048
|
// Check if current event is triggered from closeButton
|
|
963
|
-
|
|
964
|
-
if (action
|
|
965
|
-
window.top
|
|
1049
|
+
if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
|
|
1050
|
+
if (action?.target === '_blank') {
|
|
1051
|
+
window.top.open(action.href);
|
|
966
1052
|
} else {
|
|
967
|
-
window.top
|
|
1053
|
+
window.top.location.assign(action.href);
|
|
968
1054
|
}
|
|
969
1055
|
}
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
1056
|
+
}
|
|
1057
|
+
setShouldFire(false);
|
|
1058
|
+
};
|
|
1059
|
+
return /*#__PURE__*/jsxs("div", {
|
|
1060
|
+
className: classNames('alert d-flex', `alert-${mappedType}`, className),
|
|
1061
|
+
"data-testid": "alert",
|
|
1062
|
+
onTouchStart: handleTouchStart,
|
|
1063
|
+
onTouchEnd: handleTouchEnd,
|
|
1064
|
+
onTouchMove: handleTouchMove,
|
|
973
1065
|
children: [/*#__PURE__*/jsxs("div", {
|
|
974
1066
|
className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
|
|
975
1067
|
"data-testid": variant,
|
|
976
|
-
children: [
|
|
977
|
-
className: "alert__icon",
|
|
978
|
-
children: icon
|
|
979
|
-
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
980
|
-
size: Size.LARGE,
|
|
981
|
-
sentiment: resolvedType
|
|
982
|
-
}), /*#__PURE__*/jsxs("div", {
|
|
1068
|
+
children: [generateIcon(), /*#__PURE__*/jsxs("div", {
|
|
983
1069
|
className: "alert__message",
|
|
984
1070
|
children: [/*#__PURE__*/jsxs("div", {
|
|
985
|
-
role: Sentiment.NEGATIVE ===
|
|
1071
|
+
role: Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
|
|
986
1072
|
children: [title && /*#__PURE__*/jsx(Title, {
|
|
987
1073
|
className: "m-b-1",
|
|
988
1074
|
type: Typography.TITLE_BODY,
|
|
@@ -1010,28 +1096,72 @@ function Alert({
|
|
|
1010
1096
|
onClick: onDismiss
|
|
1011
1097
|
})]
|
|
1012
1098
|
});
|
|
1099
|
+
};
|
|
1100
|
+
const deprecatedTypeMapMessage$1 = {
|
|
1101
|
+
[Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
|
|
1102
|
+
[Sentiment.INFO]: 'Sentiment.NEUTRAL',
|
|
1103
|
+
[Sentiment.ERROR]: 'Sentiment.NEGATIVE'
|
|
1104
|
+
};
|
|
1105
|
+
const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
|
|
1106
|
+
function logActionRequired({
|
|
1107
|
+
size,
|
|
1108
|
+
type
|
|
1109
|
+
}) {
|
|
1110
|
+
logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
|
|
1111
|
+
logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
|
|
1013
1112
|
}
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1113
|
+
Alert.propTypes = {
|
|
1114
|
+
/** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
|
|
1115
|
+
action: PropTypes.shape({
|
|
1116
|
+
'aria-label': PropTypes.string,
|
|
1117
|
+
href: PropTypes.string.isRequired,
|
|
1118
|
+
target: PropTypes.string,
|
|
1119
|
+
text: PropTypes.node.isRequired
|
|
1120
|
+
}),
|
|
1121
|
+
className: PropTypes.string,
|
|
1122
|
+
/** An optional icon. If not provided, we will default the icon to something appropriate for the type */
|
|
1123
|
+
icon: PropTypes.element,
|
|
1124
|
+
/** Title for the alert component */
|
|
1125
|
+
title: PropTypes.string,
|
|
1126
|
+
/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
|
|
1127
|
+
message: requiredIf(PropTypes.node, ({
|
|
1128
|
+
children
|
|
1129
|
+
}) => !children),
|
|
1130
|
+
/** The presence of the onDismiss handler will trigger the visibility of the close button */
|
|
1131
|
+
onDismiss: PropTypes.func,
|
|
1132
|
+
/** The type dictates which icon and colour will be used */
|
|
1133
|
+
type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
|
|
1134
|
+
variant: PropTypes.oneOf(['desktop', 'mobile']),
|
|
1135
|
+
/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
|
|
1136
|
+
arrow: deprecated$1(PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
|
|
1137
|
+
component: 'Alert',
|
|
1138
|
+
expiryDate: new Date('03-01-2021')
|
|
1139
|
+
}),
|
|
1140
|
+
/** @deprecated use `message` property instead */
|
|
1141
|
+
children: deprecated$1(requiredIf(PropTypes.node, ({
|
|
1142
|
+
message
|
|
1143
|
+
}) => !message), {
|
|
1144
|
+
component: 'Alert',
|
|
1145
|
+
message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
|
|
1146
|
+
expiryDate: new Date('03-01-2021')
|
|
1147
|
+
}),
|
|
1148
|
+
/** @deprecated use `onDismiss` instead */
|
|
1149
|
+
dismissible: deprecated$1(PropTypes.bool, {
|
|
1150
|
+
component: 'Alert',
|
|
1151
|
+
message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
|
|
1152
|
+
expiryDate: new Date('03-01-2021')
|
|
1153
|
+
})
|
|
1154
|
+
};
|
|
1155
|
+
Alert.defaultProps = {
|
|
1156
|
+
action: undefined,
|
|
1157
|
+
arrow: undefined,
|
|
1158
|
+
className: undefined,
|
|
1159
|
+
dismissible: undefined,
|
|
1160
|
+
icon: undefined,
|
|
1161
|
+
type: Sentiment.NEUTRAL,
|
|
1162
|
+
variant: Variant.DESKTOP
|
|
1163
|
+
};
|
|
1164
|
+
var Alert$1 = Alert;
|
|
1035
1165
|
|
|
1036
1166
|
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
1037
1167
|
var AvatarType;
|
|
@@ -2030,7 +2160,7 @@ var messages$b = defineMessages({
|
|
|
2030
2160
|
}
|
|
2031
2161
|
});
|
|
2032
2162
|
|
|
2033
|
-
const typeClassMap = {
|
|
2163
|
+
const typeClassMap$1 = {
|
|
2034
2164
|
[ControlType.ACCENT]: 'btn-accent',
|
|
2035
2165
|
[ControlType.POSITIVE]: 'btn-positive',
|
|
2036
2166
|
[ControlType.NEGATIVE]: 'btn-negative'
|
|
@@ -2114,7 +2244,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
2114
2244
|
},
|
|
2115
2245
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2116
2246
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2117
|
-
typeClassMap[newType],
|
|
2247
|
+
typeClassMap$1[newType],
|
|
2118
2248
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2119
2249
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2120
2250
|
priorityClassMap[newPriority], className);
|
|
@@ -2499,7 +2629,7 @@ const CircularButton = ({
|
|
|
2499
2629
|
type = ControlType.ACCENT,
|
|
2500
2630
|
...rest
|
|
2501
2631
|
}) => {
|
|
2502
|
-
const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
|
|
2632
|
+
const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
|
|
2503
2633
|
const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
|
|
2504
2634
|
size: 24
|
|
2505
2635
|
}) : icon;
|
|
@@ -5669,7 +5799,7 @@ function Popover$1({
|
|
|
5669
5799
|
const resolvedPlacement = resolvePlacement(preferredPlacement);
|
|
5670
5800
|
useEffect(() => {
|
|
5671
5801
|
if (resolvedPlacement !== preferredPlacement) {
|
|
5672
|
-
logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5802
|
+
logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5673
5803
|
}
|
|
5674
5804
|
}, [preferredPlacement, resolvedPlacement]);
|
|
5675
5805
|
const anchorReference = useRef(null);
|
|
@@ -5774,22 +5904,49 @@ const Info = ({
|
|
|
5774
5904
|
});
|
|
5775
5905
|
};
|
|
5776
5906
|
|
|
5777
|
-
|
|
5907
|
+
const typeClassMap = {
|
|
5908
|
+
[Sentiment.ERROR]: 'danger',
|
|
5909
|
+
[Sentiment.NEGATIVE]: 'danger'
|
|
5910
|
+
};
|
|
5911
|
+
const InlineAlert = ({
|
|
5778
5912
|
id,
|
|
5779
|
-
type =
|
|
5913
|
+
type = Sentiment.NEUTRAL,
|
|
5780
5914
|
className,
|
|
5781
5915
|
children
|
|
5782
|
-
}) {
|
|
5783
|
-
const
|
|
5784
|
-
|
|
5785
|
-
|
|
5786
|
-
|
|
5787
|
-
|
|
5788
|
-
|
|
5916
|
+
}) => {
|
|
5917
|
+
const {
|
|
5918
|
+
isModern
|
|
5919
|
+
} = useTheme();
|
|
5920
|
+
const typeClass = `alert-${typeClassMap[type] || type}`;
|
|
5921
|
+
if (isModern) {
|
|
5922
|
+
return /*#__PURE__*/jsxs("div", {
|
|
5923
|
+
role: "alert",
|
|
5924
|
+
id: id,
|
|
5925
|
+
className: classNames('alert alert-detach', typeClass, className),
|
|
5926
|
+
children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
5927
|
+
children: children
|
|
5928
|
+
})]
|
|
5929
|
+
});
|
|
5930
|
+
}
|
|
5931
|
+
const getAlertContents = ({
|
|
5932
|
+
children,
|
|
5933
|
+
className
|
|
5934
|
+
}) => {
|
|
5935
|
+
return /*#__PURE__*/jsx("div", {
|
|
5936
|
+
role: "alert",
|
|
5937
|
+
id: id,
|
|
5938
|
+
className: classNames('alert alert-detach p-x-2 p-y-1', typeClass, className),
|
|
5789
5939
|
children: children
|
|
5790
|
-
})
|
|
5940
|
+
});
|
|
5941
|
+
};
|
|
5942
|
+
const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
|
|
5943
|
+
return /*#__PURE__*/jsx(AlertWithArrow, {
|
|
5944
|
+
id,
|
|
5945
|
+
type,
|
|
5946
|
+
className,
|
|
5947
|
+
children
|
|
5791
5948
|
});
|
|
5792
|
-
}
|
|
5949
|
+
};
|
|
5793
5950
|
|
|
5794
5951
|
/*
|
|
5795
5952
|
* Inspired by:
|
|
@@ -13825,7 +13982,7 @@ function CriticalCommsBanner({
|
|
|
13825
13982
|
type: AvatarType.ICON,
|
|
13826
13983
|
className: classNames(isModern ? 'm-r-2' : 'm-r-1'),
|
|
13827
13984
|
backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
|
|
13828
|
-
children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$
|
|
13985
|
+
children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$2, {
|
|
13829
13986
|
size: 24
|
|
13830
13987
|
})
|
|
13831
13988
|
}), /*#__PURE__*/jsxs("div", {
|
|
@@ -14315,8 +14472,8 @@ var it = {
|
|
|
14315
14472
|
|
|
14316
14473
|
var ja = {
|
|
14317
14474
|
"neptune.Button.loadingAriaLabel": "読み込み中…",
|
|
14318
|
-
"neptune.Chips.ariaLabel": "{choice}
|
|
14319
|
-
"neptune.ClearButton.ariaLabel": "
|
|
14475
|
+
"neptune.Chips.ariaLabel": "{choice}を消去する",
|
|
14476
|
+
"neptune.ClearButton.ariaLabel": "消去する",
|
|
14320
14477
|
"neptune.CloseButton.ariaLabel": "閉じる",
|
|
14321
14478
|
"neptune.DateInput.day.label": "日",
|
|
14322
14479
|
"neptune.DateInput.day.placeholder": "日",
|
|
@@ -14336,19 +14493,19 @@ var ja = {
|
|
|
14336
14493
|
"neptune.Link.opensInNewTab": "(新しいタブで開きます)",
|
|
14337
14494
|
"neptune.MoneyInput.Select.placeholder": "選択してください...",
|
|
14338
14495
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
|
|
14339
|
-
"neptune.Select.searchPlaceholder": "
|
|
14496
|
+
"neptune.Select.searchPlaceholder": "検索する... ",
|
|
14340
14497
|
"neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
|
|
14341
14498
|
"neptune.Summary.statusDone": "完了",
|
|
14342
|
-
"neptune.Summary.statusNotDone": "
|
|
14499
|
+
"neptune.Summary.statusNotDone": "未完了",
|
|
14343
14500
|
"neptune.Summary.statusPending": "保留中",
|
|
14344
14501
|
"neptune.Upload.csButtonText": "別のファイルをアップロードしますか?",
|
|
14345
14502
|
"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
|
|
14346
14503
|
"neptune.Upload.csSuccessText": "アップロードが完了しました。",
|
|
14347
14504
|
"neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
|
|
14348
14505
|
"neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
|
|
14349
|
-
"neptune.Upload.psButtonText": "
|
|
14350
|
-
"neptune.Upload.psProcessingText": "
|
|
14351
|
-
"neptune.Upload.usButtonText": "
|
|
14506
|
+
"neptune.Upload.psButtonText": "キャンセルする",
|
|
14507
|
+
"neptune.Upload.psProcessingText": "アップロードしています…",
|
|
14508
|
+
"neptune.Upload.usButtonText": "またはファイルを選択する",
|
|
14352
14509
|
"neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
|
|
14353
14510
|
"neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ&ドロップしてください",
|
|
14354
14511
|
"neptune.UploadButton.allFileTypes": "すべてのファイル種類",
|
|
@@ -14357,18 +14514,18 @@ var ja = {
|
|
|
14357
14514
|
"neptune.UploadButton.uploadFile": "ファイルをアップロードする",
|
|
14358
14515
|
"neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
|
|
14359
14516
|
"neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
|
|
14360
|
-
"neptune.UploadInput.deleteModalCancelButtonText": "
|
|
14361
|
-
"neptune.UploadInput.deleteModalConfirmButtonText": "
|
|
14517
|
+
"neptune.UploadInput.deleteModalCancelButtonText": "キャンセルする",
|
|
14518
|
+
"neptune.UploadInput.deleteModalConfirmButtonText": "削除する",
|
|
14362
14519
|
"neptune.UploadInput.deleteModalTitle": "このファイルを削除しますか?",
|
|
14363
14520
|
"neptune.UploadInput.fileIsTooLarge": "ファイルが大きすぎます。",
|
|
14364
14521
|
"neptune.UploadInput.fileTypeNotSupported": "このファイルの種類はサポートされていません",
|
|
14365
14522
|
"neptune.UploadInput.maximumFilesAlreadyUploaded": "申し訳ございませんが、このアップロードに失敗しました。一度に{maxFilesAllowed}個のファイルのみ受付可能です。",
|
|
14366
|
-
"neptune.UploadItem.deleting": "
|
|
14367
|
-
"neptune.UploadItem.removeFile": "{filename}
|
|
14523
|
+
"neptune.UploadItem.deleting": "削除しています...",
|
|
14524
|
+
"neptune.UploadItem.removeFile": "{filename}のファイルを削除する",
|
|
14368
14525
|
"neptune.UploadItem.uploaded": "アップロード済み",
|
|
14369
14526
|
"neptune.UploadItem.uploadedFile": "アップロード済みのファイル",
|
|
14370
|
-
"neptune.UploadItem.uploading": "
|
|
14371
|
-
"neptune.UploadItem.uploadingFailed": "
|
|
14527
|
+
"neptune.UploadItem.uploading": "アップロードしています…",
|
|
14528
|
+
"neptune.UploadItem.uploadingFailed": "アップロードに失敗しました"
|
|
14372
14529
|
};
|
|
14373
14530
|
|
|
14374
14531
|
var pl = {
|
|
@@ -14914,5 +15071,5 @@ const translations = {
|
|
|
14914
15071
|
'zh-HK': zhHK
|
|
14915
15072
|
};
|
|
14916
15073
|
|
|
14917
|
-
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$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, 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 };
|
|
15074
|
+
export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, 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$1 as DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, 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 };
|
|
14918
15075
|
//# sourceMappingURL=index.mjs.map
|