@transferwise/components 46.19.0 → 46.20.1
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.esm.js +61 -100
- package/build/index.esm.js.map +1 -1
- package/build/index.js +60 -99
- package/build/index.js.map +1 -1
- package/build/types/common/index.d.ts +0 -1
- package/build/types/common/panel/Panel.d.ts.map +1 -1
- package/build/types/common/textFormat/formatWithPattern/index.d.ts +1 -1
- package/build/types/common/textFormat/formatWithPattern/index.d.ts.map +1 -1
- package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts +1 -1
- package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts.map +1 -1
- package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts +1 -1
- package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts.map +1 -1
- package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts +1 -1
- package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts.map +1 -1
- package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts +2 -2
- package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts.map +1 -1
- package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts +1 -1
- package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts.map +1 -1
- package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts +1 -1
- package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts.map +1 -1
- package/build/types/common/textFormat/index.d.ts +7 -6
- package/build/types/common/textFormat/index.d.ts.map +1 -1
- package/build/types/common/textFormat/unformatWithPattern/index.d.ts +1 -1
- package/build/types/common/textFormat/unformatWithPattern/index.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/info/Info.d.ts +3 -2
- package/build/types/info/Info.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts.map +1 -1
- package/build/types/popover/Popover.d.ts +16 -21
- package/build/types/popover/Popover.d.ts.map +1 -1
- package/build/types/popover/index.d.ts +2 -1
- package/build/types/popover/index.d.ts.map +1 -1
- package/build/types/promoCard/PromoCard.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/common/index.js +0 -1
- package/src/common/panel/Panel.tsx +1 -0
- package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.js → getCountOfSymbolsInSelection.ts} +5 -1
- package/src/common/textFormat/getCursorPositionAfterKeystroke/{getCursorPositionAfterKeystroke.spec.js → getCursorPositionAfterKeystroke.spec.ts} +15 -18
- package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.spec.js → getDistanceToSymbol.spec.ts} +3 -3
- package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.js → getDistanceToSymbol.ts} +8 -3
- package/src/index.ts +1 -0
- package/src/info/Info.tsx +2 -2
- package/src/logo/Logo.js +1 -0
- package/src/logo/__snapshots__/Logo.spec.js.snap +6 -0
- package/src/popover/{Popover.spec.js → Popover.spec.tsx} +5 -2
- package/src/popover/Popover.tsx +101 -0
- package/src/popover/__snapshots__/{Popover.spec.js.snap → Popover.spec.tsx.snap} +2 -3
- package/src/popover/index.ts +2 -0
- package/src/promoCard/PromoCard.tsx +5 -3
- package/build/types/common/randomId.d.ts +0 -13
- package/build/types/common/randomId.d.ts.map +0 -1
- package/src/common/randomId.ts +0 -14
- package/src/popover/Popover.js +0 -101
- package/src/popover/index.js +0 -1
- /package/src/common/textFormat/formatWithPattern/{formatWithPattern.spec.js → formatWithPattern.spec.ts} +0 -0
- /package/src/common/textFormat/formatWithPattern/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.spec.js → getCountOfSymbolsInSelection.spec.ts} +0 -0
- /package/src/common/textFormat/getCountOfSymbolsInSelection/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/getCursorPositionAfterKeystroke/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/getDistanceToSymbol/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/getSymbolsInPatternWithPosition/{getSymbolsInPatternWithPosition.spec.js → getSymbolsInPatternWithPosition.spec.ts} +0 -0
- /package/src/common/textFormat/getSymbolsInPatternWithPosition/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/unformatWithPattern/{index.js → index.ts} +0 -0
- /package/src/common/textFormat/unformatWithPattern/{unformatWithPattern.spec.js → unformatWithPattern.spec.ts} +0 -0
- /package/src/popover/{Popover.story.js → Popover.story.tsx} +0 -0
package/build/index.esm.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, Children, Fragment as Fragment$1 } from 'react';
|
|
4
|
+
import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
|
|
5
5
|
import { useId } from '@radix-ui/react-id';
|
|
6
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';
|
|
@@ -404,21 +404,6 @@ function getDirectionFromLocale(locale) {
|
|
|
404
404
|
return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language) ? Direction.RTL : Direction.LTR;
|
|
405
405
|
}
|
|
406
406
|
|
|
407
|
-
/**
|
|
408
|
-
* generateRandomId() function
|
|
409
|
-
*
|
|
410
|
-
* This function generates a random string of characters that can be used as
|
|
411
|
-
* an ID.
|
|
412
|
-
*
|
|
413
|
-
* @returns {string} A random string of characters.
|
|
414
|
-
* @example
|
|
415
|
-
* const id = generateRandomId();
|
|
416
|
-
* // id will be a random string of characters, such as "id-4711".
|
|
417
|
-
*/
|
|
418
|
-
const generateRandomId = () => {
|
|
419
|
-
return `id-${Math.random().toString(36).slice(7)}`;
|
|
420
|
-
};
|
|
421
|
-
|
|
422
407
|
const DEFAULT_TYPE$1 = Typography.TITLE_GROUP;
|
|
423
408
|
const titleTypeMapping = {
|
|
424
409
|
[Typography.TITLE_SCREEN]: 'h1',
|
|
@@ -816,7 +801,7 @@ const StatusIcon = ({
|
|
|
816
801
|
});
|
|
817
802
|
};
|
|
818
803
|
|
|
819
|
-
function logActionRequired$
|
|
804
|
+
function logActionRequired$1(message) {
|
|
820
805
|
if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
|
|
821
806
|
// eslint-disable-next-line no-console
|
|
822
807
|
console.warn(message);
|
|
@@ -824,7 +809,7 @@ function logActionRequired$2(message) {
|
|
|
824
809
|
}
|
|
825
810
|
function logActionRequiredIf(message, conditional) {
|
|
826
811
|
if (conditional) {
|
|
827
|
-
logActionRequired$
|
|
812
|
+
logActionRequired$1(message);
|
|
828
813
|
}
|
|
829
814
|
}
|
|
830
815
|
|
|
@@ -855,7 +840,7 @@ const deprecated = (validator, {
|
|
|
855
840
|
}) => (props, propertyName, ...rest) => {
|
|
856
841
|
const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
|
|
857
842
|
if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
|
|
858
|
-
logActionRequired$
|
|
843
|
+
logActionRequired$1(deprecatedMessage({
|
|
859
844
|
component,
|
|
860
845
|
propName: propertyName,
|
|
861
846
|
message: newPropertyMessage,
|
|
@@ -884,7 +869,7 @@ function Markdown({
|
|
|
884
869
|
}
|
|
885
870
|
const linkTarget = config?.link?.target ?? '_self';
|
|
886
871
|
if (allowList != null && blockList != null) {
|
|
887
|
-
logActionRequired$
|
|
872
|
+
logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
888
873
|
}
|
|
889
874
|
const parser = nodes => {
|
|
890
875
|
const parsed = reader.parse(nodes);
|
|
@@ -1036,7 +1021,7 @@ const Alert = props => {
|
|
|
1036
1021
|
...props
|
|
1037
1022
|
});
|
|
1038
1023
|
}
|
|
1039
|
-
logActionRequired
|
|
1024
|
+
logActionRequired(props);
|
|
1040
1025
|
const mappedType = deprecatedTypeMap$1[type] || type;
|
|
1041
1026
|
const Icon = iconTypeMap[mappedType];
|
|
1042
1027
|
function generateIcon() {
|
|
@@ -1119,7 +1104,7 @@ const deprecatedTypeMapMessage$1 = {
|
|
|
1119
1104
|
[Sentiment.ERROR]: 'Sentiment.NEGATIVE'
|
|
1120
1105
|
};
|
|
1121
1106
|
const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
|
|
1122
|
-
function logActionRequired
|
|
1107
|
+
function logActionRequired({
|
|
1123
1108
|
size,
|
|
1124
1109
|
type
|
|
1125
1110
|
}) {
|
|
@@ -3119,7 +3104,8 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3119
3104
|
onClose: onClose,
|
|
3120
3105
|
children: /*#__PURE__*/jsx("div", {
|
|
3121
3106
|
...rest,
|
|
3122
|
-
ref: setPopperElement
|
|
3107
|
+
ref: setPopperElement,
|
|
3108
|
+
role: "dialog"
|
|
3123
3109
|
// eslint-disable-next-line react/forbid-dom-props
|
|
3124
3110
|
,
|
|
3125
3111
|
style: {
|
|
@@ -5252,6 +5238,7 @@ const Logo = ({
|
|
|
5252
5238
|
const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
|
|
5253
5239
|
return /*#__PURE__*/jsxs("span", {
|
|
5254
5240
|
"aria-label": type === LogoType.WISE ? 'Wise' : 'Wise business',
|
|
5241
|
+
role: "img",
|
|
5255
5242
|
className: classNames(className, 'np-logo'),
|
|
5256
5243
|
children: [/*#__PURE__*/jsx(LogoSm, {
|
|
5257
5244
|
className: "np-logo-svg np-logo-svg--size-sm"
|
|
@@ -5775,22 +5762,33 @@ const Modal = ({
|
|
|
5775
5762
|
});
|
|
5776
5763
|
};
|
|
5777
5764
|
|
|
5778
|
-
|
|
5765
|
+
function resolvePlacement(preferredPlacement) {
|
|
5766
|
+
switch (preferredPlacement) {
|
|
5767
|
+
case 'left-top':
|
|
5768
|
+
case 'right-top':
|
|
5769
|
+
return 'top';
|
|
5770
|
+
case 'bottom-left':
|
|
5771
|
+
case 'bottom-right':
|
|
5772
|
+
return 'bottom';
|
|
5773
|
+
}
|
|
5774
|
+
return preferredPlacement;
|
|
5775
|
+
}
|
|
5776
|
+
function Popover$1({
|
|
5779
5777
|
children,
|
|
5780
5778
|
className,
|
|
5781
5779
|
content,
|
|
5782
|
-
preferredPlacement,
|
|
5780
|
+
preferredPlacement = Position.RIGHT,
|
|
5783
5781
|
title,
|
|
5784
5782
|
onClose
|
|
5785
|
-
})
|
|
5786
|
-
|
|
5787
|
-
|
|
5788
|
-
|
|
5783
|
+
}) {
|
|
5784
|
+
const resolvedPlacement = resolvePlacement(preferredPlacement);
|
|
5785
|
+
useEffect(() => {
|
|
5786
|
+
if (resolvedPlacement !== preferredPlacement) {
|
|
5787
|
+
logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5788
|
+
}
|
|
5789
|
+
}, [preferredPlacement, resolvedPlacement]);
|
|
5789
5790
|
const anchorReference = useRef(null);
|
|
5790
5791
|
const [open, setOpen] = useState(false);
|
|
5791
|
-
const {
|
|
5792
|
-
isModern
|
|
5793
|
-
} = useTheme();
|
|
5794
5792
|
const handleOnClose = () => {
|
|
5795
5793
|
setOpen(false);
|
|
5796
5794
|
onClose?.();
|
|
@@ -5800,25 +5798,21 @@ const Popover$1 = ({
|
|
|
5800
5798
|
children: [/*#__PURE__*/jsx("span", {
|
|
5801
5799
|
ref: anchorReference,
|
|
5802
5800
|
className: "d-inline-block",
|
|
5803
|
-
children: /*#__PURE__*/cloneElement(children, {
|
|
5801
|
+
children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
|
|
5804
5802
|
onClick: () => {
|
|
5805
|
-
|
|
5806
|
-
|
|
5807
|
-
}
|
|
5808
|
-
setOpen(!open);
|
|
5803
|
+
children.props.onClick?.();
|
|
5804
|
+
setOpen(prevOpen => !prevOpen);
|
|
5809
5805
|
}
|
|
5810
|
-
})
|
|
5806
|
+
}) : children
|
|
5811
5807
|
}), /*#__PURE__*/jsx(ResponsivePanel$1, {
|
|
5812
5808
|
open: open,
|
|
5813
5809
|
anchorRef: anchorReference,
|
|
5814
|
-
position:
|
|
5810
|
+
position: resolvedPlacement,
|
|
5815
5811
|
arrow: true,
|
|
5816
5812
|
className: "np-popover__container",
|
|
5817
5813
|
onClose: handleOnClose,
|
|
5818
5814
|
children: /*#__PURE__*/jsxs("div", {
|
|
5819
|
-
className:
|
|
5820
|
-
"aria-hidden": !open,
|
|
5821
|
-
role: "dialog",
|
|
5815
|
+
className: "np-popover__content np-text-default-body",
|
|
5822
5816
|
children: [title && /*#__PURE__*/jsx(Title, {
|
|
5823
5817
|
type: Typography.TITLE_BODY,
|
|
5824
5818
|
className: "m-b-1",
|
|
@@ -5827,36 +5821,7 @@ const Popover$1 = ({
|
|
|
5827
5821
|
})
|
|
5828
5822
|
})]
|
|
5829
5823
|
});
|
|
5830
|
-
}
|
|
5831
|
-
const logActionRequired = ({
|
|
5832
|
-
preferredPlacement
|
|
5833
|
-
}) => {
|
|
5834
|
-
logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
|
|
5835
|
-
};
|
|
5836
|
-
Popover$1.defaultProps = {
|
|
5837
|
-
className: undefined,
|
|
5838
|
-
preferredPlacement: Position.RIGHT,
|
|
5839
|
-
title: undefined
|
|
5840
|
-
};
|
|
5841
|
-
Popover$1.propTypes = {
|
|
5842
|
-
children: PropTypes.node.isRequired,
|
|
5843
|
-
className: PropTypes.string,
|
|
5844
|
-
content: PropTypes.node.isRequired,
|
|
5845
|
-
/**
|
|
5846
|
-
* `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
|
|
5847
|
-
* `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
|
|
5848
|
-
*/
|
|
5849
|
-
preferredPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
|
|
5850
|
-
onClose: PropTypes.func,
|
|
5851
|
-
title: PropTypes.node
|
|
5852
|
-
};
|
|
5853
|
-
const deprecatedPlacements = {
|
|
5854
|
-
[Position.BOTTOM_LEFT]: Position.BOTTOM,
|
|
5855
|
-
[Position.BOTTOM_RIGHT]: Position.BOTTOM,
|
|
5856
|
-
[Position.LEFT_TOP]: Position.TOP,
|
|
5857
|
-
[Position.RIGHT_TOP]: Position.TOP
|
|
5858
|
-
};
|
|
5859
|
-
var Popover$2 = Popover$1;
|
|
5824
|
+
}
|
|
5860
5825
|
|
|
5861
5826
|
var messages$6 = defineMessages({
|
|
5862
5827
|
ariaLabel: {
|
|
@@ -5907,7 +5872,7 @@ const Info = ({
|
|
|
5907
5872
|
title: title,
|
|
5908
5873
|
onClose: () => setOpen(false)
|
|
5909
5874
|
})]
|
|
5910
|
-
}) : /*#__PURE__*/jsx(Popover$
|
|
5875
|
+
}) : /*#__PURE__*/jsx(Popover$1, {
|
|
5911
5876
|
content: content,
|
|
5912
5877
|
preferredPlacement: preferredPlacement,
|
|
5913
5878
|
title: title,
|
|
@@ -6963,14 +6928,13 @@ const getSymbolsInPatternWithPosition = pattern => {
|
|
|
6963
6928
|
});
|
|
6964
6929
|
return patternWithSymbolsPosition;
|
|
6965
6930
|
};
|
|
6966
|
-
var getSymbolsInPatternWithPosition$1 = getSymbolsInPatternWithPosition;
|
|
6967
6931
|
|
|
6968
6932
|
const formatWithPattern = (value, pattern) => {
|
|
6969
6933
|
if (!value || value === '') {
|
|
6970
6934
|
return '';
|
|
6971
6935
|
}
|
|
6972
6936
|
const valueArray = value.toString().split('');
|
|
6973
|
-
const patternWithSymbolsPosition = getSymbolsInPatternWithPosition
|
|
6937
|
+
const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
|
|
6974
6938
|
let patternSymbol = [];
|
|
6975
6939
|
// valueArray.length increments during the cycle cause we are adding new elements.
|
|
6976
6940
|
for (let index = 0; index < valueArray.length; index += 1) {
|
|
@@ -6985,7 +6949,6 @@ const formatWithPattern = (value, pattern) => {
|
|
|
6985
6949
|
}
|
|
6986
6950
|
return valueArray.join('');
|
|
6987
6951
|
};
|
|
6988
|
-
var formatWithPattern$1 = formatWithPattern;
|
|
6989
6952
|
|
|
6990
6953
|
const unformatWithPattern = (value, pattern) => {
|
|
6991
6954
|
let valueArray = [''];
|
|
@@ -6996,18 +6959,16 @@ const unformatWithPattern = (value, pattern) => {
|
|
|
6996
6959
|
return valueArray.join('');
|
|
6997
6960
|
};
|
|
6998
6961
|
const getSymbolsInPattern = pattern => pattern.split('').filter(symbol => symbol !== '*');
|
|
6999
|
-
var unformatWithPattern$1 = unformatWithPattern;
|
|
7000
6962
|
|
|
7001
|
-
const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition
|
|
7002
|
-
var getCountOfSymbolsInSelection$1 = getCountOfSymbolsInSelection;
|
|
6963
|
+
const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
|
|
7003
6964
|
|
|
7004
6965
|
const getDistanceToNextSymbol = (selectionStart, pattern) => {
|
|
7005
|
-
const patternArray = getSymbolsInPatternWithPosition
|
|
6966
|
+
const patternArray = getSymbolsInPatternWithPosition(pattern);
|
|
7006
6967
|
const applicablePattern = patternArray.filter(symbol => symbol.index >= selectionStart);
|
|
7007
6968
|
return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
|
|
7008
6969
|
};
|
|
7009
6970
|
const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
|
|
7010
|
-
const patternArray = getSymbolsInPatternWithPosition
|
|
6971
|
+
const patternArray = getSymbolsInPatternWithPosition(pattern);
|
|
7011
6972
|
const applicablePattern = patternArray.filter(symbol => symbol.index < selectionStart).reverse();
|
|
7012
6973
|
return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
|
|
7013
6974
|
};
|
|
@@ -7037,7 +6998,7 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
|
|
|
7037
6998
|
}
|
|
7038
6999
|
break;
|
|
7039
7000
|
case 'Paste':
|
|
7040
|
-
cursorPosition += pastedLength + getCountOfSymbolsInSelection
|
|
7001
|
+
cursorPosition += pastedLength + getCountOfSymbolsInSelection(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
|
|
7041
7002
|
break;
|
|
7042
7003
|
case 'Cut':
|
|
7043
7004
|
case 'Delete':
|
|
@@ -7048,7 +7009,6 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
|
|
|
7048
7009
|
}
|
|
7049
7010
|
return cursorPosition;
|
|
7050
7011
|
};
|
|
7051
|
-
var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
|
|
7052
7012
|
|
|
7053
7013
|
class WithDisplayFormat extends Component {
|
|
7054
7014
|
static defaultProps = {
|
|
@@ -7058,9 +7018,9 @@ class WithDisplayFormat extends Component {
|
|
|
7058
7018
|
};
|
|
7059
7019
|
constructor(props) {
|
|
7060
7020
|
super(props);
|
|
7061
|
-
const unformattedValue = unformatWithPattern
|
|
7021
|
+
const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
|
|
7062
7022
|
this.state = {
|
|
7063
|
-
value: formatWithPattern
|
|
7023
|
+
value: formatWithPattern(unformattedValue, props.displayPattern),
|
|
7064
7024
|
historyNavigator: new HistoryNavigator$1(),
|
|
7065
7025
|
prevDisplayPattern: props.displayPattern,
|
|
7066
7026
|
triggerType: 'Initial',
|
|
@@ -7078,11 +7038,11 @@ class WithDisplayFormat extends Component {
|
|
|
7078
7038
|
historyNavigator
|
|
7079
7039
|
}) {
|
|
7080
7040
|
if (prevDisplayPattern !== displayPattern) {
|
|
7081
|
-
const unFormattedValue = unformatWithPattern
|
|
7041
|
+
const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
|
|
7082
7042
|
historyNavigator.reset();
|
|
7083
7043
|
return {
|
|
7084
7044
|
prevDisplayPattern: displayPattern,
|
|
7085
|
-
value: formatWithPattern
|
|
7045
|
+
value: formatWithPattern(unFormattedValue, displayPattern),
|
|
7086
7046
|
triggerType: null,
|
|
7087
7047
|
triggerEvent: null,
|
|
7088
7048
|
pastedLength: 0
|
|
@@ -7112,7 +7072,7 @@ class WithDisplayFormat extends Component {
|
|
|
7112
7072
|
return 'Delete';
|
|
7113
7073
|
}
|
|
7114
7074
|
// Android Fix.
|
|
7115
|
-
if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern
|
|
7075
|
+
if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
|
|
7116
7076
|
return 'Backspace';
|
|
7117
7077
|
}
|
|
7118
7078
|
return triggerEvent.key;
|
|
@@ -7150,13 +7110,13 @@ class WithDisplayFormat extends Component {
|
|
|
7150
7110
|
// Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
|
|
7151
7111
|
let newFormattedValue = '';
|
|
7152
7112
|
if (this.detectUndoRedo(event) === 'Undo') {
|
|
7153
|
-
newFormattedValue = formatWithPattern
|
|
7113
|
+
newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
|
|
7154
7114
|
this.setState({
|
|
7155
7115
|
value: newFormattedValue,
|
|
7156
7116
|
triggerType: 'Undo'
|
|
7157
7117
|
});
|
|
7158
7118
|
} else if (this.detectUndoRedo(event) === 'Redo') {
|
|
7159
|
-
newFormattedValue = formatWithPattern
|
|
7119
|
+
newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
|
|
7160
7120
|
this.setState({
|
|
7161
7121
|
value: newFormattedValue,
|
|
7162
7122
|
triggerType: 'Redo'
|
|
@@ -7174,7 +7134,7 @@ class WithDisplayFormat extends Component {
|
|
|
7174
7134
|
const {
|
|
7175
7135
|
displayPattern
|
|
7176
7136
|
} = this.props;
|
|
7177
|
-
const pastedLength = unformatWithPattern
|
|
7137
|
+
const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
|
|
7178
7138
|
this.setState({
|
|
7179
7139
|
triggerType: 'Paste',
|
|
7180
7140
|
pastedLength
|
|
@@ -7204,7 +7164,7 @@ class WithDisplayFormat extends Component {
|
|
|
7204
7164
|
const {
|
|
7205
7165
|
value
|
|
7206
7166
|
} = event.target;
|
|
7207
|
-
let unformattedValue = unformatWithPattern
|
|
7167
|
+
let unformattedValue = unformatWithPattern(value, displayPattern);
|
|
7208
7168
|
const action = this.getUserAction(unformattedValue);
|
|
7209
7169
|
if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
|
|
7210
7170
|
return;
|
|
@@ -7212,7 +7172,7 @@ class WithDisplayFormat extends Component {
|
|
|
7212
7172
|
if (action === 'Backspace' || action === 'Delete') {
|
|
7213
7173
|
unformattedValue = this.handleDelete(unformattedValue, action);
|
|
7214
7174
|
}
|
|
7215
|
-
const newFormattedValue = formatWithPattern
|
|
7175
|
+
const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
|
|
7216
7176
|
historyNavigator.add(unformattedValue);
|
|
7217
7177
|
this.handleCursorPositioning(action);
|
|
7218
7178
|
this.setState({
|
|
@@ -7220,13 +7180,13 @@ class WithDisplayFormat extends Component {
|
|
|
7220
7180
|
}, () => {
|
|
7221
7181
|
this.resetEvent();
|
|
7222
7182
|
if (onChange) {
|
|
7223
|
-
const broadcastValue = unformatWithPattern
|
|
7183
|
+
const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
|
|
7224
7184
|
onChange(broadcastValue);
|
|
7225
7185
|
}
|
|
7226
7186
|
});
|
|
7227
7187
|
};
|
|
7228
7188
|
handleOnBlur = event => {
|
|
7229
|
-
this.props.onBlur?.(unformatWithPattern
|
|
7189
|
+
this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
|
|
7230
7190
|
};
|
|
7231
7191
|
handleOnFocus = event => {
|
|
7232
7192
|
const {
|
|
@@ -7235,7 +7195,7 @@ class WithDisplayFormat extends Component {
|
|
|
7235
7195
|
} = this.props;
|
|
7236
7196
|
if (onFocus) {
|
|
7237
7197
|
this.handleOnChange(event);
|
|
7238
|
-
onFocus(unformatWithPattern
|
|
7198
|
+
onFocus(unformatWithPattern(event.target.value, displayPattern));
|
|
7239
7199
|
}
|
|
7240
7200
|
};
|
|
7241
7201
|
handleDelete = (unformattedValue, action) => {
|
|
@@ -7248,7 +7208,7 @@ class WithDisplayFormat extends Component {
|
|
|
7248
7208
|
} = this.state;
|
|
7249
7209
|
const newStack = [...unformattedValue];
|
|
7250
7210
|
if (selectionStart === selectionEnd) {
|
|
7251
|
-
let startPosition = selectionStart - getCountOfSymbolsInSelection
|
|
7211
|
+
let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
|
|
7252
7212
|
let toDelete = 0;
|
|
7253
7213
|
let count = getDistanceToNextSymbol(selectionStart, displayPattern);
|
|
7254
7214
|
if (action === 'Backspace') {
|
|
@@ -7272,7 +7232,7 @@ class WithDisplayFormat extends Component {
|
|
|
7272
7232
|
selectionEnd,
|
|
7273
7233
|
pastedLength
|
|
7274
7234
|
} = this.state;
|
|
7275
|
-
const cursorPosition =
|
|
7235
|
+
const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
|
|
7276
7236
|
setTimeout(() => {
|
|
7277
7237
|
if (triggerEvent) {
|
|
7278
7238
|
triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
|
|
@@ -9660,7 +9620,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
|
|
|
9660
9620
|
setChecked(!checked); // Update local state for checkbox
|
|
9661
9621
|
}
|
|
9662
9622
|
};
|
|
9663
|
-
const
|
|
9623
|
+
const fallbackId = useId();
|
|
9624
|
+
const componentId = id || fallbackId;
|
|
9664
9625
|
// Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
|
|
9665
9626
|
// `'download'` if `download` is truthy. If neither condition is true, set
|
|
9666
9627
|
// `icon` to `undefined`.
|
|
@@ -15117,5 +15078,5 @@ const translations = {
|
|
|
15117
15078
|
'zh-HK': zhHK
|
|
15118
15079
|
};
|
|
15119
15080
|
|
|
15120
|
-
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$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$
|
|
15081
|
+
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$1 as Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 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$1 as Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
|
|
15121
15082
|
//# sourceMappingURL=index.esm.js.map
|