@transferwise/components 0.0.0-experimental-9a6de5f → 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 -222
- package/src/alert/index.ts +0 -2
package/build/index.js
CHANGED
|
@@ -7,7 +7,6 @@ var reactId = require('@radix-ui/react-id');
|
|
|
7
7
|
var icons = require('@transferwise/icons');
|
|
8
8
|
var reactIntl = require('react-intl');
|
|
9
9
|
var PropTypes = require('prop-types');
|
|
10
|
-
var commonmark = require('commonmark');
|
|
11
10
|
var componentsTheming = require('@wise/components-theming');
|
|
12
11
|
var formatting = require('@transferwise/formatting');
|
|
13
12
|
var react$1 = require('@headlessui/react');
|
|
@@ -21,6 +20,7 @@ var reactPopper = require('react-popper');
|
|
|
21
20
|
var throttle = require('lodash.throttle');
|
|
22
21
|
var reactDom = require('react-dom');
|
|
23
22
|
var neptuneValidation = require('@transferwise/neptune-validation');
|
|
23
|
+
var commonmark = require('commonmark');
|
|
24
24
|
var art = require('@wise/art');
|
|
25
25
|
var clamp$2 = require('lodash.clamp');
|
|
26
26
|
var debounce = require('lodash.debounce');
|
|
@@ -51,9 +51,9 @@ function _interopNamespace(e) {
|
|
|
51
51
|
var classNames__default = /*#__PURE__*/_interopDefault(classNames);
|
|
52
52
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
53
53
|
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
54
|
-
var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
|
|
55
54
|
var mergeProps__default = /*#__PURE__*/_interopDefault(mergeProps);
|
|
56
55
|
var throttle__default = /*#__PURE__*/_interopDefault(throttle);
|
|
56
|
+
var commonmark__default = /*#__PURE__*/_interopDefault(commonmark);
|
|
57
57
|
var clamp__default = /*#__PURE__*/_interopDefault(clamp$2);
|
|
58
58
|
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
|
|
59
59
|
var requiredIf__default = /*#__PURE__*/_interopDefault(requiredIf);
|
|
@@ -807,22 +807,22 @@ const Link = ({
|
|
|
807
807
|
});
|
|
808
808
|
};
|
|
809
809
|
|
|
810
|
-
const iconTypeMap = {
|
|
811
|
-
positive: icons.Check,
|
|
812
|
-
neutral: icons.Info,
|
|
813
|
-
warning: icons.Alert,
|
|
814
|
-
negative: icons.Cross,
|
|
815
|
-
pending: icons.ClockBorderless,
|
|
816
|
-
info: icons.Info,
|
|
817
|
-
error: icons.Cross,
|
|
818
|
-
success: icons.Check
|
|
819
|
-
};
|
|
820
810
|
const StatusIcon = ({
|
|
821
|
-
sentiment =
|
|
822
|
-
size =
|
|
811
|
+
sentiment = exports.Sentiment.NEUTRAL,
|
|
812
|
+
size = exports.Size.MEDIUM
|
|
823
813
|
}) => {
|
|
814
|
+
const iconTypeMap = {
|
|
815
|
+
[exports.Sentiment.POSITIVE]: icons.Check,
|
|
816
|
+
[exports.Sentiment.NEUTRAL]: icons.Info,
|
|
817
|
+
[exports.Sentiment.WARNING]: icons.Alert,
|
|
818
|
+
[exports.Sentiment.NEGATIVE]: icons.Cross,
|
|
819
|
+
[exports.Sentiment.PENDING]: icons.ClockBorderless,
|
|
820
|
+
[exports.Sentiment.INFO]: icons.Info,
|
|
821
|
+
[exports.Sentiment.ERROR]: icons.Cross,
|
|
822
|
+
[exports.Sentiment.SUCCESS]: icons.Check
|
|
823
|
+
};
|
|
824
|
+
const iconColor = [exports.Sentiment.WARNING, exports.Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
|
|
824
825
|
const Icon = iconTypeMap[sentiment];
|
|
825
|
-
const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
|
|
826
826
|
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
827
827
|
"data-testid": "status-icon",
|
|
828
828
|
className: classNames__default.default('status-circle', 'status-circle-' + size, sentiment),
|
|
@@ -832,7 +832,7 @@ const StatusIcon = ({
|
|
|
832
832
|
});
|
|
833
833
|
};
|
|
834
834
|
|
|
835
|
-
function logActionRequired(message) {
|
|
835
|
+
function logActionRequired$1(message) {
|
|
836
836
|
if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
|
|
837
837
|
// eslint-disable-next-line no-console
|
|
838
838
|
console.warn(message);
|
|
@@ -840,10 +840,48 @@ function logActionRequired(message) {
|
|
|
840
840
|
}
|
|
841
841
|
function logActionRequiredIf(message, conditional) {
|
|
842
842
|
if (conditional) {
|
|
843
|
-
logActionRequired(message);
|
|
843
|
+
logActionRequired$1(message);
|
|
844
844
|
}
|
|
845
845
|
}
|
|
846
846
|
|
|
847
|
+
const deprecatedMessage = ({
|
|
848
|
+
component,
|
|
849
|
+
propName,
|
|
850
|
+
message,
|
|
851
|
+
expiryDate
|
|
852
|
+
}) => {
|
|
853
|
+
const messages = [`${component} has deprecated the use of ${propName}.`];
|
|
854
|
+
if (message) {
|
|
855
|
+
messages.push(message);
|
|
856
|
+
}
|
|
857
|
+
if (expiryDate) {
|
|
858
|
+
messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
|
|
859
|
+
year: 'numeric',
|
|
860
|
+
month: 'numeric',
|
|
861
|
+
day: 'numeric'
|
|
862
|
+
})}`);
|
|
863
|
+
}
|
|
864
|
+
return messages.join(' ');
|
|
865
|
+
};
|
|
866
|
+
const deprecated = (validator, {
|
|
867
|
+
component,
|
|
868
|
+
message = '',
|
|
869
|
+
newProp: newProperty = null,
|
|
870
|
+
expiryDate = null
|
|
871
|
+
}) => (props, propertyName, ...rest) => {
|
|
872
|
+
const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
|
|
873
|
+
if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
|
|
874
|
+
logActionRequired$1(deprecatedMessage({
|
|
875
|
+
component,
|
|
876
|
+
propName: propertyName,
|
|
877
|
+
message: newPropertyMessage,
|
|
878
|
+
expiryDate
|
|
879
|
+
}));
|
|
880
|
+
}
|
|
881
|
+
return validator(props, propertyName, ...rest);
|
|
882
|
+
};
|
|
883
|
+
var deprecated$1 = deprecated;
|
|
884
|
+
|
|
847
885
|
const reader = new commonmark__default.default.Parser();
|
|
848
886
|
const writer = new commonmark__default.default.HtmlRenderer({
|
|
849
887
|
safe: true
|
|
@@ -862,7 +900,7 @@ function Markdown({
|
|
|
862
900
|
}
|
|
863
901
|
const linkTarget = config?.link?.target ?? '_self';
|
|
864
902
|
if (allowList != null && blockList != null) {
|
|
865
|
-
logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
903
|
+
logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
866
904
|
}
|
|
867
905
|
const parser = nodes => {
|
|
868
906
|
const parsed = reader.parse(nodes);
|
|
@@ -923,98 +961,146 @@ InlineMarkdown.defaultProps = {
|
|
|
923
961
|
};
|
|
924
962
|
var InlineMarkdown$1 = InlineMarkdown;
|
|
925
963
|
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
964
|
+
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
965
|
+
exports.AlertArrowPosition = void 0;
|
|
966
|
+
(function (ArrowPosition) {
|
|
967
|
+
ArrowPosition["TOP_LEFT"] = "up-left";
|
|
968
|
+
ArrowPosition["TOP"] = "up-center";
|
|
969
|
+
ArrowPosition["TOP_RIGHT"] = "up-right";
|
|
970
|
+
ArrowPosition["BOTTOM_LEFT"] = "down-left";
|
|
971
|
+
ArrowPosition["BOTTOM"] = "down-center";
|
|
972
|
+
ArrowPosition["BOTTOM_RIGHT"] = "down-right";
|
|
973
|
+
})(exports.AlertArrowPosition || (exports.AlertArrowPosition = {}));
|
|
974
|
+
|
|
975
|
+
function withArrow(Alert, arrow) {
|
|
976
|
+
const AlertWithArrow = props => /*#__PURE__*/jsxRuntime.jsx(Alert, {
|
|
977
|
+
...props,
|
|
978
|
+
className: classNames__default.default(props.className, arrowClasses(arrow)),
|
|
979
|
+
arrow: undefined
|
|
980
|
+
});
|
|
981
|
+
AlertWithArrow.propTypes = {
|
|
982
|
+
className: PropTypes__default.default.string
|
|
983
|
+
};
|
|
984
|
+
AlertWithArrow.defaultProps = {
|
|
985
|
+
className: undefined
|
|
986
|
+
};
|
|
987
|
+
return AlertWithArrow;
|
|
945
988
|
}
|
|
946
|
-
function
|
|
947
|
-
arrow
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
if (dismissible !== undefined) {
|
|
972
|
-
logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
|
|
973
|
-
}
|
|
974
|
-
}, [dismissible]);
|
|
975
|
-
React.useEffect(() => {
|
|
976
|
-
if (size !== undefined) {
|
|
977
|
-
logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
|
|
978
|
-
}
|
|
979
|
-
}, [size]);
|
|
980
|
-
const resolvedType = resolveType(type);
|
|
981
|
-
React.useEffect(() => {
|
|
982
|
-
if (resolvedType !== type) {
|
|
983
|
-
logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
|
|
989
|
+
function arrowClasses(arrow) {
|
|
990
|
+
if (arrow) {
|
|
991
|
+
const classes = ['arrow'];
|
|
992
|
+
const {
|
|
993
|
+
BOTTOM,
|
|
994
|
+
BOTTOM_LEFT,
|
|
995
|
+
BOTTOM_RIGHT,
|
|
996
|
+
TOP,
|
|
997
|
+
TOP_RIGHT,
|
|
998
|
+
TOP_LEFT
|
|
999
|
+
} = exports.AlertArrowPosition;
|
|
1000
|
+
switch (arrow) {
|
|
1001
|
+
case BOTTOM:
|
|
1002
|
+
return classes.concat('arrow-bottom', 'arrow-center');
|
|
1003
|
+
case BOTTOM_LEFT:
|
|
1004
|
+
return classes.concat('arrow-bottom', 'arrow-left');
|
|
1005
|
+
case BOTTOM_RIGHT:
|
|
1006
|
+
return classes.concat('arrow-bottom', 'arrow-right');
|
|
1007
|
+
case TOP:
|
|
1008
|
+
return classes.concat('arrow-center');
|
|
1009
|
+
case TOP_RIGHT:
|
|
1010
|
+
return classes.concat('arrow-right');
|
|
1011
|
+
case TOP_LEFT:
|
|
1012
|
+
default:
|
|
1013
|
+
return classes;
|
|
984
1014
|
}
|
|
985
|
-
}
|
|
1015
|
+
}
|
|
1016
|
+
return '';
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
const deprecatedTypeMap$1 = {
|
|
1020
|
+
[exports.Sentiment.SUCCESS]: exports.Sentiment.POSITIVE,
|
|
1021
|
+
[exports.Sentiment.INFO]: exports.Sentiment.NEUTRAL,
|
|
1022
|
+
[exports.Sentiment.ERROR]: exports.Sentiment.NEGATIVE
|
|
1023
|
+
};
|
|
1024
|
+
const Alert = props => {
|
|
1025
|
+
const {
|
|
1026
|
+
isModern
|
|
1027
|
+
} = componentsTheming.useTheme();
|
|
1028
|
+
const iconTypeMap = {
|
|
1029
|
+
[exports.Sentiment.POSITIVE]: icons.CheckCircle,
|
|
1030
|
+
[exports.Sentiment.NEUTRAL]: icons.InfoCircle,
|
|
1031
|
+
[exports.Sentiment.WARNING]: icons.Warning,
|
|
1032
|
+
[exports.Sentiment.NEGATIVE]: icons.CrossCircle,
|
|
1033
|
+
[exports.Sentiment.PENDING]: icons.Clock
|
|
1034
|
+
};
|
|
986
1035
|
const [shouldFire, setShouldFire] = React.useState(false);
|
|
1036
|
+
const {
|
|
1037
|
+
arrow,
|
|
1038
|
+
action,
|
|
1039
|
+
children,
|
|
1040
|
+
className,
|
|
1041
|
+
icon,
|
|
1042
|
+
onDismiss,
|
|
1043
|
+
message,
|
|
1044
|
+
title,
|
|
1045
|
+
type,
|
|
1046
|
+
variant
|
|
1047
|
+
} = props;
|
|
987
1048
|
const closeButtonReference = React.useRef(null);
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
1049
|
+
if (arrow) {
|
|
1050
|
+
const AlertWithArrow = withArrow(Alert, arrow);
|
|
1051
|
+
return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
|
|
1052
|
+
...props
|
|
1053
|
+
});
|
|
1054
|
+
}
|
|
1055
|
+
logActionRequired(props);
|
|
1056
|
+
const mappedType = deprecatedTypeMap$1[type] || type;
|
|
1057
|
+
const Icon = iconTypeMap[mappedType];
|
|
1058
|
+
function generateIcon() {
|
|
1059
|
+
if (icon) {
|
|
1060
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
1061
|
+
className: "alert__icon",
|
|
1062
|
+
children: icon
|
|
1063
|
+
});
|
|
1064
|
+
}
|
|
1065
|
+
if (isModern) {
|
|
1066
|
+
return /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
|
|
1067
|
+
size: exports.Size.LARGE,
|
|
1068
|
+
sentiment: mappedType
|
|
1069
|
+
});
|
|
1070
|
+
} else {
|
|
1071
|
+
return /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
1072
|
+
size: 24
|
|
1073
|
+
});
|
|
1074
|
+
}
|
|
1075
|
+
}
|
|
1076
|
+
const handleTouchStart = () => setShouldFire(true);
|
|
1077
|
+
const handleTouchMove = () => setShouldFire(false);
|
|
1078
|
+
const handleTouchEnd = event => {
|
|
1079
|
+
if (shouldFire && action) {
|
|
994
1080
|
// Check if current event is triggered from closeButton
|
|
995
|
-
closeButtonReference
|
|
996
|
-
if (action
|
|
997
|
-
window.top
|
|
1081
|
+
if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
|
|
1082
|
+
if (action?.target === '_blank') {
|
|
1083
|
+
window.top.open(action.href);
|
|
998
1084
|
} else {
|
|
999
|
-
window.top
|
|
1085
|
+
window.top.location.assign(action.href);
|
|
1000
1086
|
}
|
|
1001
1087
|
}
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1088
|
+
}
|
|
1089
|
+
setShouldFire(false);
|
|
1090
|
+
};
|
|
1091
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
1092
|
+
className: classNames__default.default('alert d-flex', `alert-${mappedType}`, className),
|
|
1093
|
+
"data-testid": "alert",
|
|
1094
|
+
onTouchStart: handleTouchStart,
|
|
1095
|
+
onTouchEnd: handleTouchEnd,
|
|
1096
|
+
onTouchMove: handleTouchMove,
|
|
1005
1097
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
1006
1098
|
className: classNames__default.default('alert__content', 'd-flex', 'flex-grow-1', variant),
|
|
1007
1099
|
"data-testid": variant,
|
|
1008
|
-
children: [
|
|
1009
|
-
className: "alert__icon",
|
|
1010
|
-
children: icon
|
|
1011
|
-
}) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
|
|
1012
|
-
size: exports.Size.LARGE,
|
|
1013
|
-
sentiment: resolvedType
|
|
1014
|
-
}), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
1100
|
+
children: [generateIcon(), /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
1015
1101
|
className: "alert__message",
|
|
1016
1102
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
1017
|
-
role: exports.Sentiment.NEGATIVE ===
|
|
1103
|
+
role: exports.Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
|
|
1018
1104
|
children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
1019
1105
|
className: "m-b-1",
|
|
1020
1106
|
type: exports.Typography.TITLE_BODY,
|
|
@@ -1042,28 +1128,72 @@ function Alert({
|
|
|
1042
1128
|
onClick: onDismiss
|
|
1043
1129
|
})]
|
|
1044
1130
|
});
|
|
1131
|
+
};
|
|
1132
|
+
const deprecatedTypeMapMessage$1 = {
|
|
1133
|
+
[exports.Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
|
|
1134
|
+
[exports.Sentiment.INFO]: 'Sentiment.NEUTRAL',
|
|
1135
|
+
[exports.Sentiment.ERROR]: 'Sentiment.NEGATIVE'
|
|
1136
|
+
};
|
|
1137
|
+
const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
|
|
1138
|
+
function logActionRequired({
|
|
1139
|
+
size,
|
|
1140
|
+
type
|
|
1141
|
+
}) {
|
|
1142
|
+
logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
|
|
1143
|
+
logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
|
|
1045
1144
|
}
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1145
|
+
Alert.propTypes = {
|
|
1146
|
+
/** 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 */
|
|
1147
|
+
action: PropTypes__default.default.shape({
|
|
1148
|
+
'aria-label': PropTypes__default.default.string,
|
|
1149
|
+
href: PropTypes__default.default.string.isRequired,
|
|
1150
|
+
target: PropTypes__default.default.string,
|
|
1151
|
+
text: PropTypes__default.default.node.isRequired
|
|
1152
|
+
}),
|
|
1153
|
+
className: PropTypes__default.default.string,
|
|
1154
|
+
/** An optional icon. If not provided, we will default the icon to something appropriate for the type */
|
|
1155
|
+
icon: PropTypes__default.default.element,
|
|
1156
|
+
/** Title for the alert component */
|
|
1157
|
+
title: PropTypes__default.default.string,
|
|
1158
|
+
/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
|
|
1159
|
+
message: requiredIf__default.default(PropTypes__default.default.node, ({
|
|
1160
|
+
children
|
|
1161
|
+
}) => !children),
|
|
1162
|
+
/** The presence of the onDismiss handler will trigger the visibility of the close button */
|
|
1163
|
+
onDismiss: PropTypes__default.default.func,
|
|
1164
|
+
/** The type dictates which icon and colour will be used */
|
|
1165
|
+
type: PropTypes__default.default.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
|
|
1166
|
+
variant: PropTypes__default.default.oneOf(['desktop', 'mobile']),
|
|
1167
|
+
/** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
|
|
1168
|
+
arrow: deprecated$1(PropTypes__default.default.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
|
|
1169
|
+
component: 'Alert',
|
|
1170
|
+
expiryDate: new Date('03-01-2021')
|
|
1171
|
+
}),
|
|
1172
|
+
/** @deprecated use `message` property instead */
|
|
1173
|
+
children: deprecated$1(requiredIf__default.default(PropTypes__default.default.node, ({
|
|
1174
|
+
message
|
|
1175
|
+
}) => !message), {
|
|
1176
|
+
component: 'Alert',
|
|
1177
|
+
message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
|
|
1178
|
+
expiryDate: new Date('03-01-2021')
|
|
1179
|
+
}),
|
|
1180
|
+
/** @deprecated use `onDismiss` instead */
|
|
1181
|
+
dismissible: deprecated$1(PropTypes__default.default.bool, {
|
|
1182
|
+
component: 'Alert',
|
|
1183
|
+
message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
|
|
1184
|
+
expiryDate: new Date('03-01-2021')
|
|
1185
|
+
})
|
|
1186
|
+
};
|
|
1187
|
+
Alert.defaultProps = {
|
|
1188
|
+
action: undefined,
|
|
1189
|
+
arrow: undefined,
|
|
1190
|
+
className: undefined,
|
|
1191
|
+
dismissible: undefined,
|
|
1192
|
+
icon: undefined,
|
|
1193
|
+
type: exports.Sentiment.NEUTRAL,
|
|
1194
|
+
variant: exports.Variant.DESKTOP
|
|
1195
|
+
};
|
|
1196
|
+
var Alert$1 = Alert;
|
|
1067
1197
|
|
|
1068
1198
|
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
1069
1199
|
exports.AvatarType = void 0;
|
|
@@ -2062,7 +2192,7 @@ var messages$b = reactIntl.defineMessages({
|
|
|
2062
2192
|
}
|
|
2063
2193
|
});
|
|
2064
2194
|
|
|
2065
|
-
const typeClassMap = {
|
|
2195
|
+
const typeClassMap$1 = {
|
|
2066
2196
|
[exports.ControlType.ACCENT]: 'btn-accent',
|
|
2067
2197
|
[exports.ControlType.POSITIVE]: 'btn-positive',
|
|
2068
2198
|
[exports.ControlType.NEGATIVE]: 'btn-negative'
|
|
@@ -2146,7 +2276,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
2146
2276
|
},
|
|
2147
2277
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2148
2278
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2149
|
-
typeClassMap[newType],
|
|
2279
|
+
typeClassMap$1[newType],
|
|
2150
2280
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2151
2281
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2152
2282
|
priorityClassMap[newPriority], className);
|
|
@@ -2531,7 +2661,7 @@ const CircularButton = ({
|
|
|
2531
2661
|
type = exports.ControlType.ACCENT,
|
|
2532
2662
|
...rest
|
|
2533
2663
|
}) => {
|
|
2534
|
-
const classes = classNames__default.default('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
|
|
2664
|
+
const classes = classNames__default.default('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
|
|
2535
2665
|
const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/React.cloneElement(icon, {
|
|
2536
2666
|
size: 24
|
|
2537
2667
|
}) : icon;
|
|
@@ -5701,7 +5831,7 @@ function Popover$1({
|
|
|
5701
5831
|
const resolvedPlacement = resolvePlacement(preferredPlacement);
|
|
5702
5832
|
React.useEffect(() => {
|
|
5703
5833
|
if (resolvedPlacement !== preferredPlacement) {
|
|
5704
|
-
logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5834
|
+
logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5705
5835
|
}
|
|
5706
5836
|
}, [preferredPlacement, resolvedPlacement]);
|
|
5707
5837
|
const anchorReference = React.useRef(null);
|
|
@@ -5806,22 +5936,49 @@ const Info = ({
|
|
|
5806
5936
|
});
|
|
5807
5937
|
};
|
|
5808
5938
|
|
|
5809
|
-
|
|
5939
|
+
const typeClassMap = {
|
|
5940
|
+
[exports.Sentiment.ERROR]: 'danger',
|
|
5941
|
+
[exports.Sentiment.NEGATIVE]: 'danger'
|
|
5942
|
+
};
|
|
5943
|
+
const InlineAlert = ({
|
|
5810
5944
|
id,
|
|
5811
|
-
type =
|
|
5945
|
+
type = exports.Sentiment.NEUTRAL,
|
|
5812
5946
|
className,
|
|
5813
5947
|
children
|
|
5814
|
-
}) {
|
|
5815
|
-
const
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5948
|
+
}) => {
|
|
5949
|
+
const {
|
|
5950
|
+
isModern
|
|
5951
|
+
} = componentsTheming.useTheme();
|
|
5952
|
+
const typeClass = `alert-${typeClassMap[type] || type}`;
|
|
5953
|
+
if (isModern) {
|
|
5954
|
+
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
5955
|
+
role: "alert",
|
|
5956
|
+
id: id,
|
|
5957
|
+
className: classNames__default.default('alert alert-detach', typeClass, className),
|
|
5958
|
+
children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircle, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5959
|
+
children: children
|
|
5960
|
+
})]
|
|
5961
|
+
});
|
|
5962
|
+
}
|
|
5963
|
+
const getAlertContents = ({
|
|
5964
|
+
children,
|
|
5965
|
+
className
|
|
5966
|
+
}) => {
|
|
5967
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
5968
|
+
role: "alert",
|
|
5969
|
+
id: id,
|
|
5970
|
+
className: classNames__default.default('alert alert-detach p-x-2 p-y-1', typeClass, className),
|
|
5821
5971
|
children: children
|
|
5822
|
-
})
|
|
5972
|
+
});
|
|
5973
|
+
};
|
|
5974
|
+
const AlertWithArrow = withArrow(getAlertContents, exports.AlertArrowPosition.TOP_LEFT);
|
|
5975
|
+
return /*#__PURE__*/jsxRuntime.jsx(AlertWithArrow, {
|
|
5976
|
+
id,
|
|
5977
|
+
type,
|
|
5978
|
+
className,
|
|
5979
|
+
children
|
|
5823
5980
|
});
|
|
5824
|
-
}
|
|
5981
|
+
};
|
|
5825
5982
|
|
|
5826
5983
|
/*
|
|
5827
5984
|
* Inspired by:
|
|
@@ -14347,8 +14504,8 @@ var it = {
|
|
|
14347
14504
|
|
|
14348
14505
|
var ja = {
|
|
14349
14506
|
"neptune.Button.loadingAriaLabel": "読み込み中…",
|
|
14350
|
-
"neptune.Chips.ariaLabel": "{choice}
|
|
14351
|
-
"neptune.ClearButton.ariaLabel": "
|
|
14507
|
+
"neptune.Chips.ariaLabel": "{choice}を消去する",
|
|
14508
|
+
"neptune.ClearButton.ariaLabel": "消去する",
|
|
14352
14509
|
"neptune.CloseButton.ariaLabel": "閉じる",
|
|
14353
14510
|
"neptune.DateInput.day.label": "日",
|
|
14354
14511
|
"neptune.DateInput.day.placeholder": "日",
|
|
@@ -14368,19 +14525,19 @@ var ja = {
|
|
|
14368
14525
|
"neptune.Link.opensInNewTab": "(新しいタブで開きます)",
|
|
14369
14526
|
"neptune.MoneyInput.Select.placeholder": "選択してください...",
|
|
14370
14527
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "選択してください…",
|
|
14371
|
-
"neptune.Select.searchPlaceholder": "
|
|
14528
|
+
"neptune.Select.searchPlaceholder": "検索する... ",
|
|
14372
14529
|
"neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
|
|
14373
14530
|
"neptune.Summary.statusDone": "完了",
|
|
14374
|
-
"neptune.Summary.statusNotDone": "
|
|
14531
|
+
"neptune.Summary.statusNotDone": "未完了",
|
|
14375
14532
|
"neptune.Summary.statusPending": "保留中",
|
|
14376
14533
|
"neptune.Upload.csButtonText": "別のファイルをアップロードしますか?",
|
|
14377
14534
|
"neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
|
|
14378
14535
|
"neptune.Upload.csSuccessText": "アップロードが完了しました。",
|
|
14379
14536
|
"neptune.Upload.csTooLargeMessage": "{maxSize}MB以下のファイルをアップロードしてください",
|
|
14380
14537
|
"neptune.Upload.csWrongTypeMessage": "ファイルの種類はサポートされていません。別のファイルで再度お試しください",
|
|
14381
|
-
"neptune.Upload.psButtonText": "
|
|
14382
|
-
"neptune.Upload.psProcessingText": "
|
|
14383
|
-
"neptune.Upload.usButtonText": "
|
|
14538
|
+
"neptune.Upload.psButtonText": "キャンセルする",
|
|
14539
|
+
"neptune.Upload.psProcessingText": "アップロードしています…",
|
|
14540
|
+
"neptune.Upload.usButtonText": "またはファイルを選択する",
|
|
14384
14541
|
"neptune.Upload.usDropMessage": "ファイルをドロップしてアップロードする",
|
|
14385
14542
|
"neptune.Upload.usPlaceholder": "{maxSize}MB以下のファイルをドラッグ&ドロップしてください",
|
|
14386
14543
|
"neptune.UploadButton.allFileTypes": "すべてのファイル種類",
|
|
@@ -14389,18 +14546,18 @@ var ja = {
|
|
|
14389
14546
|
"neptune.UploadButton.uploadFile": "ファイルをアップロードする",
|
|
14390
14547
|
"neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
|
|
14391
14548
|
"neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
|
|
14392
|
-
"neptune.UploadInput.deleteModalCancelButtonText": "
|
|
14393
|
-
"neptune.UploadInput.deleteModalConfirmButtonText": "
|
|
14549
|
+
"neptune.UploadInput.deleteModalCancelButtonText": "キャンセルする",
|
|
14550
|
+
"neptune.UploadInput.deleteModalConfirmButtonText": "削除する",
|
|
14394
14551
|
"neptune.UploadInput.deleteModalTitle": "このファイルを削除しますか?",
|
|
14395
14552
|
"neptune.UploadInput.fileIsTooLarge": "ファイルが大きすぎます。",
|
|
14396
14553
|
"neptune.UploadInput.fileTypeNotSupported": "このファイルの種類はサポートされていません",
|
|
14397
14554
|
"neptune.UploadInput.maximumFilesAlreadyUploaded": "申し訳ございませんが、このアップロードに失敗しました。一度に{maxFilesAllowed}個のファイルのみ受付可能です。",
|
|
14398
|
-
"neptune.UploadItem.deleting": "
|
|
14399
|
-
"neptune.UploadItem.removeFile": "{filename}
|
|
14555
|
+
"neptune.UploadItem.deleting": "削除しています...",
|
|
14556
|
+
"neptune.UploadItem.removeFile": "{filename}のファイルを削除する",
|
|
14400
14557
|
"neptune.UploadItem.uploaded": "アップロード済み",
|
|
14401
14558
|
"neptune.UploadItem.uploadedFile": "アップロード済みのファイル",
|
|
14402
|
-
"neptune.UploadItem.uploading": "
|
|
14403
|
-
"neptune.UploadItem.uploadingFailed": "
|
|
14559
|
+
"neptune.UploadItem.uploading": "アップロードしています…",
|
|
14560
|
+
"neptune.UploadItem.uploadingFailed": "アップロードに失敗しました"
|
|
14404
14561
|
};
|
|
14405
14562
|
|
|
14406
14563
|
var pl = {
|
|
@@ -14949,7 +15106,7 @@ const translations = {
|
|
|
14949
15106
|
exports.Accordion = Accordion;
|
|
14950
15107
|
exports.ActionButton = ActionButton;
|
|
14951
15108
|
exports.ActionOption = ActionOption;
|
|
14952
|
-
exports.Alert = Alert;
|
|
15109
|
+
exports.Alert = Alert$1;
|
|
14953
15110
|
exports.Avatar = Avatar;
|
|
14954
15111
|
exports.AvatarWrapper = AvatarWrapper;
|
|
14955
15112
|
exports.Badge = Badge;
|