@transferwise/components 0.0.0-experimental-4553cce → 0.0.0-experimental-03e1dec
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/index.js +133 -290
- package/build/index.js.map +1 -1
- package/build/index.mjs +135 -292
- package/build/index.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts +47 -58
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/alert/index.d.ts +2 -1
- package/build/types/alert/index.d.ts.map +1 -1
- package/build/types/common/propsValues/sentiment.d.ts +0 -1
- 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 +2 -4
- package/build/types/inlineAlert/InlineAlert.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 +2 -2
- package/src/alert/{Alert.spec.js → Alert.spec.tsx} +42 -44
- package/src/alert/Alert.story.tsx +1 -2
- package/src/alert/Alert.tsx +222 -0
- package/src/alert/index.ts +2 -0
- package/src/common/propsValues/sentiment.ts +0 -10
- package/src/index.ts +1 -1
- package/src/inlineAlert/InlineAlert.spec.tsx +0 -7
- package/src/inlineAlert/InlineAlert.tsx +19 -47
- package/src/statusIcon/StatusIcon.tsx +14 -14
- package/build/types/alert/withArrow/alertArrowPositions.d.ts +0 -9
- package/build/types/alert/withArrow/alertArrowPositions.d.ts.map +0 -1
- package/build/types/alert/withArrow/index.d.ts +0 -3
- package/build/types/alert/withArrow/index.d.ts.map +0 -1
- package/build/types/alert/withArrow/withArrow.d.ts +0 -11
- package/build/types/alert/withArrow/withArrow.d.ts.map +0 -1
- package/src/alert/Alert.js +0 -196
- package/src/alert/index.js +0 -1
- package/src/alert/withArrow/alertArrowPositions.ts +0 -9
- package/src/alert/withArrow/index.js +0 -2
- package/src/alert/withArrow/withArrow.js +0 -50
- package/src/alert/withArrow/withArrow.spec.js +0 -51
package/build/index.mjs
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
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, useRef, useMemo,
|
|
4
|
+
import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, 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$1, ClockBorderless, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, 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';
|
|
9
10
|
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
10
11
|
import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
|
|
11
12
|
import { Transition, Listbox } from '@headlessui/react';
|
|
@@ -19,7 +20,6 @@ import { usePopper } from 'react-popper';
|
|
|
19
20
|
import throttle from 'lodash.throttle';
|
|
20
21
|
import { createPortal } from 'react-dom';
|
|
21
22
|
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
|
+
};
|
|
778
788
|
const StatusIcon = ({
|
|
779
|
-
sentiment =
|
|
780
|
-
size =
|
|
789
|
+
sentiment = 'neutral',
|
|
790
|
+
size = 'md'
|
|
781
791
|
}) => {
|
|
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';
|
|
793
792
|
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
|
|
803
|
+
function logActionRequired(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,48 +808,10 @@ function logActionRequired$1(message) {
|
|
|
808
808
|
}
|
|
809
809
|
function logActionRequiredIf(message, conditional) {
|
|
810
810
|
if (conditional) {
|
|
811
|
-
logActionRequired
|
|
811
|
+
logActionRequired(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
|
-
|
|
853
815
|
const reader = new commonmark.Parser();
|
|
854
816
|
const writer = new commonmark.HtmlRenderer({
|
|
855
817
|
safe: true
|
|
@@ -868,7 +830,7 @@ function Markdown({
|
|
|
868
830
|
}
|
|
869
831
|
const linkTarget = config?.link?.target ?? '_self';
|
|
870
832
|
if (allowList != null && blockList != null) {
|
|
871
|
-
logActionRequired
|
|
833
|
+
logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
872
834
|
}
|
|
873
835
|
const parser = nodes => {
|
|
874
836
|
const parsed = reader.parse(nodes);
|
|
@@ -929,146 +891,98 @@ InlineMarkdown.defaultProps = {
|
|
|
929
891
|
};
|
|
930
892
|
var InlineMarkdown$1 = InlineMarkdown;
|
|
931
893
|
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
};
|
|
952
|
-
AlertWithArrow.defaultProps = {
|
|
953
|
-
className: undefined
|
|
954
|
-
};
|
|
955
|
-
return AlertWithArrow;
|
|
894
|
+
var AlertArrowPosition;
|
|
895
|
+
(function (AlertArrowPosition) {
|
|
896
|
+
AlertArrowPosition["TOP_LEFT"] = "up-left";
|
|
897
|
+
AlertArrowPosition["TOP"] = "up-center";
|
|
898
|
+
AlertArrowPosition["TOP_RIGHT"] = "up-right";
|
|
899
|
+
AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
|
|
900
|
+
AlertArrowPosition["BOTTOM"] = "down-center";
|
|
901
|
+
AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
|
|
902
|
+
})(AlertArrowPosition || (AlertArrowPosition = {}));
|
|
903
|
+
function resolveType(type) {
|
|
904
|
+
switch (type) {
|
|
905
|
+
case 'success':
|
|
906
|
+
return 'positive';
|
|
907
|
+
case 'info':
|
|
908
|
+
return 'neutral';
|
|
909
|
+
case 'error':
|
|
910
|
+
return 'negative';
|
|
911
|
+
}
|
|
912
|
+
return type;
|
|
956
913
|
}
|
|
957
|
-
function
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
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;
|
|
914
|
+
function Alert({
|
|
915
|
+
arrow,
|
|
916
|
+
action,
|
|
917
|
+
children,
|
|
918
|
+
className,
|
|
919
|
+
dismissible,
|
|
920
|
+
icon,
|
|
921
|
+
onDismiss,
|
|
922
|
+
message,
|
|
923
|
+
size,
|
|
924
|
+
title,
|
|
925
|
+
type = 'neutral',
|
|
926
|
+
variant = 'desktop'
|
|
927
|
+
}) {
|
|
928
|
+
useEffect(() => {
|
|
929
|
+
if (arrow !== undefined) {
|
|
930
|
+
logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
|
|
982
931
|
}
|
|
983
|
-
}
|
|
984
|
-
|
|
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
|
-
};
|
|
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;
|
|
1016
|
-
const closeButtonReference = useRef(null);
|
|
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
|
-
});
|
|
932
|
+
}, [arrow]);
|
|
933
|
+
useEffect(() => {
|
|
934
|
+
if (children !== undefined) {
|
|
935
|
+
logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
|
|
1032
936
|
}
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
});
|
|
1038
|
-
} else {
|
|
1039
|
-
return /*#__PURE__*/jsx(Icon, {
|
|
1040
|
-
size: 24
|
|
1041
|
-
});
|
|
937
|
+
}, [children]);
|
|
938
|
+
useEffect(() => {
|
|
939
|
+
if (dismissible !== undefined) {
|
|
940
|
+
logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
|
|
1042
941
|
}
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
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.`);
|
|
952
|
+
}
|
|
953
|
+
}, [resolvedType, type]);
|
|
954
|
+
const [shouldFire, setShouldFire] = useState(false);
|
|
955
|
+
const closeButtonReference = useRef(null);
|
|
956
|
+
return /*#__PURE__*/jsxs("div", {
|
|
957
|
+
className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
|
|
958
|
+
"data-testid": "alert",
|
|
959
|
+
onTouchStart: () => setShouldFire(true),
|
|
960
|
+
onTouchEnd: event => {
|
|
961
|
+
if (shouldFire && action &&
|
|
1048
962
|
// Check if current event is triggered from closeButton
|
|
1049
|
-
|
|
1050
|
-
if (action
|
|
1051
|
-
window.top
|
|
963
|
+
closeButtonReference.current && !closeButtonReference.current.contains(event.currentTarget)) {
|
|
964
|
+
if (action.target === '_blank') {
|
|
965
|
+
window.top?.open(action.href);
|
|
1052
966
|
} else {
|
|
1053
|
-
window.top
|
|
967
|
+
window.top?.location.assign(action.href);
|
|
1054
968
|
}
|
|
1055
969
|
}
|
|
1056
|
-
|
|
1057
|
-
|
|
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,
|
|
970
|
+
setShouldFire(false);
|
|
971
|
+
},
|
|
972
|
+
onTouchMove: () => setShouldFire(false),
|
|
1065
973
|
children: [/*#__PURE__*/jsxs("div", {
|
|
1066
974
|
className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
|
|
1067
975
|
"data-testid": variant,
|
|
1068
|
-
children: [
|
|
976
|
+
children: [icon ? /*#__PURE__*/jsx("div", {
|
|
977
|
+
className: "alert__icon",
|
|
978
|
+
children: icon
|
|
979
|
+
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
980
|
+
size: Size.LARGE,
|
|
981
|
+
sentiment: resolvedType
|
|
982
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
1069
983
|
className: "alert__message",
|
|
1070
984
|
children: [/*#__PURE__*/jsxs("div", {
|
|
1071
|
-
role: Sentiment.NEGATIVE ===
|
|
985
|
+
role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
|
|
1072
986
|
children: [title && /*#__PURE__*/jsx(Title, {
|
|
1073
987
|
className: "m-b-1",
|
|
1074
988
|
type: Typography.TITLE_BODY,
|
|
@@ -1096,72 +1010,28 @@ const Alert = props => {
|
|
|
1096
1010
|
onClick: onDismiss
|
|
1097
1011
|
})]
|
|
1098
1012
|
});
|
|
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));
|
|
1112
1013
|
}
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
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;
|
|
1014
|
+
function alertArrowClassNames(arrow) {
|
|
1015
|
+
if (arrow) {
|
|
1016
|
+
const classes = 'arrow';
|
|
1017
|
+
switch (arrow) {
|
|
1018
|
+
case 'down-center':
|
|
1019
|
+
return `${classes} arrow-bottom arrow-center`;
|
|
1020
|
+
case 'down-left':
|
|
1021
|
+
return `${classes} arrow-bottom arrow-left`;
|
|
1022
|
+
case 'down-right':
|
|
1023
|
+
return `${classes} arrow-bottom arrow-right`;
|
|
1024
|
+
case 'up-center':
|
|
1025
|
+
return `${classes} arrow-center`;
|
|
1026
|
+
case 'up-right':
|
|
1027
|
+
return `${classes} arrow-right`;
|
|
1028
|
+
case 'up-left':
|
|
1029
|
+
default:
|
|
1030
|
+
return classes;
|
|
1031
|
+
}
|
|
1032
|
+
}
|
|
1033
|
+
return '';
|
|
1034
|
+
}
|
|
1165
1035
|
|
|
1166
1036
|
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
1167
1037
|
var AvatarType;
|
|
@@ -2160,7 +2030,7 @@ var messages$b = defineMessages({
|
|
|
2160
2030
|
}
|
|
2161
2031
|
});
|
|
2162
2032
|
|
|
2163
|
-
const typeClassMap
|
|
2033
|
+
const typeClassMap = {
|
|
2164
2034
|
[ControlType.ACCENT]: 'btn-accent',
|
|
2165
2035
|
[ControlType.POSITIVE]: 'btn-positive',
|
|
2166
2036
|
[ControlType.NEGATIVE]: 'btn-negative'
|
|
@@ -2244,7 +2114,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
2244
2114
|
},
|
|
2245
2115
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2246
2116
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2247
|
-
typeClassMap
|
|
2117
|
+
typeClassMap[newType],
|
|
2248
2118
|
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
2249
2119
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
2250
2120
|
priorityClassMap[newPriority], className);
|
|
@@ -2629,7 +2499,7 @@ const CircularButton = ({
|
|
|
2629
2499
|
type = ControlType.ACCENT,
|
|
2630
2500
|
...rest
|
|
2631
2501
|
}) => {
|
|
2632
|
-
const classes = classNames('btn np-btn', typeClassMap
|
|
2502
|
+
const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
|
|
2633
2503
|
const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
|
|
2634
2504
|
size: 24
|
|
2635
2505
|
}) : icon;
|
|
@@ -5799,7 +5669,7 @@ function Popover$1({
|
|
|
5799
5669
|
const resolvedPlacement = resolvePlacement(preferredPlacement);
|
|
5800
5670
|
useEffect(() => {
|
|
5801
5671
|
if (resolvedPlacement !== preferredPlacement) {
|
|
5802
|
-
logActionRequired
|
|
5672
|
+
logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5803
5673
|
}
|
|
5804
5674
|
}, [preferredPlacement, resolvedPlacement]);
|
|
5805
5675
|
const anchorReference = useRef(null);
|
|
@@ -5904,49 +5774,22 @@ const Info = ({
|
|
|
5904
5774
|
});
|
|
5905
5775
|
};
|
|
5906
5776
|
|
|
5907
|
-
|
|
5908
|
-
[Sentiment.ERROR]: 'danger',
|
|
5909
|
-
[Sentiment.NEGATIVE]: 'danger'
|
|
5910
|
-
};
|
|
5911
|
-
const InlineAlert = ({
|
|
5777
|
+
function InlineAlert({
|
|
5912
5778
|
id,
|
|
5913
5779
|
type = Sentiment.NEUTRAL,
|
|
5914
5780
|
className,
|
|
5915
5781
|
children
|
|
5916
|
-
})
|
|
5917
|
-
const
|
|
5918
|
-
|
|
5919
|
-
|
|
5920
|
-
|
|
5921
|
-
|
|
5922
|
-
|
|
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),
|
|
5782
|
+
}) {
|
|
5783
|
+
const danger = type === 'negative' || type === 'error';
|
|
5784
|
+
return /*#__PURE__*/jsxs("div", {
|
|
5785
|
+
role: "alert",
|
|
5786
|
+
id: id,
|
|
5787
|
+
className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
|
|
5788
|
+
children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
|
|
5939
5789
|
children: children
|
|
5940
|
-
})
|
|
5941
|
-
};
|
|
5942
|
-
const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
|
|
5943
|
-
return /*#__PURE__*/jsx(AlertWithArrow, {
|
|
5944
|
-
id,
|
|
5945
|
-
type,
|
|
5946
|
-
className,
|
|
5947
|
-
children
|
|
5790
|
+
})]
|
|
5948
5791
|
});
|
|
5949
|
-
}
|
|
5792
|
+
}
|
|
5950
5793
|
|
|
5951
5794
|
/*
|
|
5952
5795
|
* Inspired by:
|
|
@@ -13982,7 +13825,7 @@ function CriticalCommsBanner({
|
|
|
13982
13825
|
type: AvatarType.ICON,
|
|
13983
13826
|
className: classNames(isModern ? 'm-r-2' : 'm-r-1'),
|
|
13984
13827
|
backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
|
|
13985
|
-
children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$
|
|
13828
|
+
children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$1, {
|
|
13986
13829
|
size: 24
|
|
13987
13830
|
})
|
|
13988
13831
|
}), /*#__PURE__*/jsxs("div", {
|
|
@@ -15071,5 +14914,5 @@ const translations = {
|
|
|
15071
14914
|
'zh-HK': zhHK
|
|
15072
14915
|
};
|
|
15073
14916
|
|
|
15074
|
-
export { Accordion, ActionButton, ActionOption, Alert
|
|
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 };
|
|
15075
14918
|
//# sourceMappingURL=index.mjs.map
|