@transferwise/components 46.18.0 → 46.20.0
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 +70 -107
- package/build/index.esm.js.map +1 -1
- package/build/index.js +70 -107
- package/build/index.js.map +1 -1
- package/build/types/actionButton/ActionButton.d.ts +1 -1
- package/build/types/circularButton/CircularButton.d.ts +16 -20
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/circularButton/index.d.ts +2 -1
- package/build/types/circularButton/index.d.ts.map +1 -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 +2 -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/phoneNumberInput/PhoneNumberInput.d.ts +2 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.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/summary/Summary.d.ts.map +1 -1
- package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts +1 -1
- package/package.json +1 -1
- package/src/circularButton/{CircularButton.story.js → CircularButton.story.tsx} +2 -2
- package/src/circularButton/CircularButton.tsx +51 -0
- package/src/circularButton/index.ts +2 -0
- 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 +2 -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/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx +22 -0
- package/src/phoneNumberInput/PhoneNumberInput.tsx +3 -1
- 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/summary/Summary.tsx +7 -1
- package/src/typeahead/Typeahead.spec.js +9 -0
- package/src/typeahead/Typeahead.tsx +1 -1
- package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +3 -3
- package/src/circularButton/CircularButton.js +0 -57
- package/src/circularButton/index.js +0 -1
- package/src/popover/Popover.js +0 -101
- package/src/popover/index.js +0 -1
- /package/src/circularButton/{CircularButton.spec.js → CircularButton.spec.tsx} +0 -0
- /package/src/circularButton/__snapshots__/{CircularButton.spec.js.snap → CircularButton.spec.tsx.snap} +0 -0
- /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';
|
|
@@ -816,7 +816,7 @@ const StatusIcon = ({
|
|
|
816
816
|
});
|
|
817
817
|
};
|
|
818
818
|
|
|
819
|
-
function logActionRequired$
|
|
819
|
+
function logActionRequired$1(message) {
|
|
820
820
|
if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
|
|
821
821
|
// eslint-disable-next-line no-console
|
|
822
822
|
console.warn(message);
|
|
@@ -824,7 +824,7 @@ function logActionRequired$2(message) {
|
|
|
824
824
|
}
|
|
825
825
|
function logActionRequiredIf(message, conditional) {
|
|
826
826
|
if (conditional) {
|
|
827
|
-
logActionRequired$
|
|
827
|
+
logActionRequired$1(message);
|
|
828
828
|
}
|
|
829
829
|
}
|
|
830
830
|
|
|
@@ -855,7 +855,7 @@ const deprecated = (validator, {
|
|
|
855
855
|
}) => (props, propertyName, ...rest) => {
|
|
856
856
|
const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
|
|
857
857
|
if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
|
|
858
|
-
logActionRequired$
|
|
858
|
+
logActionRequired$1(deprecatedMessage({
|
|
859
859
|
component,
|
|
860
860
|
propName: propertyName,
|
|
861
861
|
message: newPropertyMessage,
|
|
@@ -884,7 +884,7 @@ function Markdown({
|
|
|
884
884
|
}
|
|
885
885
|
const linkTarget = config?.link?.target ?? '_self';
|
|
886
886
|
if (allowList != null && blockList != null) {
|
|
887
|
-
logActionRequired$
|
|
887
|
+
logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
|
|
888
888
|
}
|
|
889
889
|
const parser = nodes => {
|
|
890
890
|
const parsed = reader.parse(nodes);
|
|
@@ -1036,7 +1036,7 @@ const Alert = props => {
|
|
|
1036
1036
|
...props
|
|
1037
1037
|
});
|
|
1038
1038
|
}
|
|
1039
|
-
logActionRequired
|
|
1039
|
+
logActionRequired(props);
|
|
1040
1040
|
const mappedType = deprecatedTypeMap$1[type] || type;
|
|
1041
1041
|
const Icon = iconTypeMap[mappedType];
|
|
1042
1042
|
function generateIcon() {
|
|
@@ -1119,7 +1119,7 @@ const deprecatedTypeMapMessage$1 = {
|
|
|
1119
1119
|
[Sentiment.ERROR]: 'Sentiment.NEGATIVE'
|
|
1120
1120
|
};
|
|
1121
1121
|
const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
|
|
1122
|
-
function logActionRequired
|
|
1122
|
+
function logActionRequired({
|
|
1123
1123
|
size,
|
|
1124
1124
|
type
|
|
1125
1125
|
}) {
|
|
@@ -2656,16 +2656,16 @@ const CircularButton = ({
|
|
|
2656
2656
|
children,
|
|
2657
2657
|
disabled,
|
|
2658
2658
|
icon,
|
|
2659
|
-
priority,
|
|
2660
|
-
type,
|
|
2659
|
+
priority = Priority.PRIMARY,
|
|
2660
|
+
type = ControlType.ACCENT,
|
|
2661
2661
|
...rest
|
|
2662
2662
|
}) => {
|
|
2663
2663
|
const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
|
|
2664
|
-
const iconElement = icon.props.size !== 24 ? /*#__PURE__*/cloneElement(icon, {
|
|
2664
|
+
const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
|
|
2665
2665
|
size: 24
|
|
2666
2666
|
}) : icon;
|
|
2667
2667
|
return /*#__PURE__*/jsxs("label", {
|
|
2668
|
-
className: classNames('np-circular-btn', priority, type, disabled
|
|
2668
|
+
className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
|
|
2669
2669
|
children: [/*#__PURE__*/jsx("input", {
|
|
2670
2670
|
type: "button",
|
|
2671
2671
|
"aria-label": children,
|
|
@@ -2680,22 +2680,6 @@ const CircularButton = ({
|
|
|
2680
2680
|
})]
|
|
2681
2681
|
});
|
|
2682
2682
|
};
|
|
2683
|
-
CircularButton.propTypes = {
|
|
2684
|
-
className: PropTypes.string,
|
|
2685
|
-
children: PropTypes.string.isRequired,
|
|
2686
|
-
disabled: PropTypes.bool,
|
|
2687
|
-
icon: PropTypes.element.isRequired,
|
|
2688
|
-
onClick: PropTypes.func,
|
|
2689
|
-
priority: PropTypes.oneOf(['primary', 'secondary']),
|
|
2690
|
-
type: PropTypes.oneOf(['accent', 'positive', 'negative'])
|
|
2691
|
-
};
|
|
2692
|
-
CircularButton.defaultProps = {
|
|
2693
|
-
className: undefined,
|
|
2694
|
-
disabled: false,
|
|
2695
|
-
priority: Priority.PRIMARY,
|
|
2696
|
-
type: ControlType.ACCENT
|
|
2697
|
-
};
|
|
2698
|
-
var CircularButton$1 = CircularButton;
|
|
2699
2683
|
|
|
2700
2684
|
function getDayNames(locale, format = 'short') {
|
|
2701
2685
|
const days = [];
|
|
@@ -3135,7 +3119,8 @@ const Panel = /*#__PURE__*/forwardRef(({
|
|
|
3135
3119
|
onClose: onClose,
|
|
3136
3120
|
children: /*#__PURE__*/jsx("div", {
|
|
3137
3121
|
...rest,
|
|
3138
|
-
ref: setPopperElement
|
|
3122
|
+
ref: setPopperElement,
|
|
3123
|
+
role: "dialog"
|
|
3139
3124
|
// eslint-disable-next-line react/forbid-dom-props
|
|
3140
3125
|
,
|
|
3141
3126
|
style: {
|
|
@@ -5268,6 +5253,7 @@ const Logo = ({
|
|
|
5268
5253
|
const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
|
|
5269
5254
|
return /*#__PURE__*/jsxs("span", {
|
|
5270
5255
|
"aria-label": type === LogoType.WISE ? 'Wise' : 'Wise business',
|
|
5256
|
+
role: "img",
|
|
5271
5257
|
className: classNames(className, 'np-logo'),
|
|
5272
5258
|
children: [/*#__PURE__*/jsx(LogoSm, {
|
|
5273
5259
|
className: "np-logo-svg np-logo-svg--size-sm"
|
|
@@ -5791,22 +5777,33 @@ const Modal = ({
|
|
|
5791
5777
|
});
|
|
5792
5778
|
};
|
|
5793
5779
|
|
|
5794
|
-
|
|
5780
|
+
function resolvePlacement(preferredPlacement) {
|
|
5781
|
+
switch (preferredPlacement) {
|
|
5782
|
+
case 'left-top':
|
|
5783
|
+
case 'right-top':
|
|
5784
|
+
return 'top';
|
|
5785
|
+
case 'bottom-left':
|
|
5786
|
+
case 'bottom-right':
|
|
5787
|
+
return 'bottom';
|
|
5788
|
+
}
|
|
5789
|
+
return preferredPlacement;
|
|
5790
|
+
}
|
|
5791
|
+
function Popover$1({
|
|
5795
5792
|
children,
|
|
5796
5793
|
className,
|
|
5797
5794
|
content,
|
|
5798
|
-
preferredPlacement,
|
|
5795
|
+
preferredPlacement = Position.RIGHT,
|
|
5799
5796
|
title,
|
|
5800
5797
|
onClose
|
|
5801
|
-
})
|
|
5802
|
-
|
|
5803
|
-
|
|
5804
|
-
|
|
5798
|
+
}) {
|
|
5799
|
+
const resolvedPlacement = resolvePlacement(preferredPlacement);
|
|
5800
|
+
useEffect(() => {
|
|
5801
|
+
if (resolvedPlacement !== preferredPlacement) {
|
|
5802
|
+
logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
|
|
5803
|
+
}
|
|
5804
|
+
}, [preferredPlacement, resolvedPlacement]);
|
|
5805
5805
|
const anchorReference = useRef(null);
|
|
5806
5806
|
const [open, setOpen] = useState(false);
|
|
5807
|
-
const {
|
|
5808
|
-
isModern
|
|
5809
|
-
} = useTheme();
|
|
5810
5807
|
const handleOnClose = () => {
|
|
5811
5808
|
setOpen(false);
|
|
5812
5809
|
onClose?.();
|
|
@@ -5816,25 +5813,21 @@ const Popover$1 = ({
|
|
|
5816
5813
|
children: [/*#__PURE__*/jsx("span", {
|
|
5817
5814
|
ref: anchorReference,
|
|
5818
5815
|
className: "d-inline-block",
|
|
5819
|
-
children: /*#__PURE__*/cloneElement(children, {
|
|
5816
|
+
children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
|
|
5820
5817
|
onClick: () => {
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
}
|
|
5824
|
-
setOpen(!open);
|
|
5818
|
+
children.props.onClick?.();
|
|
5819
|
+
setOpen(prevOpen => !prevOpen);
|
|
5825
5820
|
}
|
|
5826
|
-
})
|
|
5821
|
+
}) : children
|
|
5827
5822
|
}), /*#__PURE__*/jsx(ResponsivePanel$1, {
|
|
5828
5823
|
open: open,
|
|
5829
5824
|
anchorRef: anchorReference,
|
|
5830
|
-
position:
|
|
5825
|
+
position: resolvedPlacement,
|
|
5831
5826
|
arrow: true,
|
|
5832
5827
|
className: "np-popover__container",
|
|
5833
5828
|
onClose: handleOnClose,
|
|
5834
5829
|
children: /*#__PURE__*/jsxs("div", {
|
|
5835
|
-
className:
|
|
5836
|
-
"aria-hidden": !open,
|
|
5837
|
-
role: "dialog",
|
|
5830
|
+
className: "np-popover__content np-text-default-body",
|
|
5838
5831
|
children: [title && /*#__PURE__*/jsx(Title, {
|
|
5839
5832
|
type: Typography.TITLE_BODY,
|
|
5840
5833
|
className: "m-b-1",
|
|
@@ -5843,36 +5836,7 @@ const Popover$1 = ({
|
|
|
5843
5836
|
})
|
|
5844
5837
|
})]
|
|
5845
5838
|
});
|
|
5846
|
-
}
|
|
5847
|
-
const logActionRequired = ({
|
|
5848
|
-
preferredPlacement
|
|
5849
|
-
}) => {
|
|
5850
|
-
logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
|
|
5851
|
-
};
|
|
5852
|
-
Popover$1.defaultProps = {
|
|
5853
|
-
className: undefined,
|
|
5854
|
-
preferredPlacement: Position.RIGHT,
|
|
5855
|
-
title: undefined
|
|
5856
|
-
};
|
|
5857
|
-
Popover$1.propTypes = {
|
|
5858
|
-
children: PropTypes.node.isRequired,
|
|
5859
|
-
className: PropTypes.string,
|
|
5860
|
-
content: PropTypes.node.isRequired,
|
|
5861
|
-
/**
|
|
5862
|
-
* `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
|
|
5863
|
-
* `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
|
|
5864
|
-
*/
|
|
5865
|
-
preferredPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
|
|
5866
|
-
onClose: PropTypes.func,
|
|
5867
|
-
title: PropTypes.node
|
|
5868
|
-
};
|
|
5869
|
-
const deprecatedPlacements = {
|
|
5870
|
-
[Position.BOTTOM_LEFT]: Position.BOTTOM,
|
|
5871
|
-
[Position.BOTTOM_RIGHT]: Position.BOTTOM,
|
|
5872
|
-
[Position.LEFT_TOP]: Position.TOP,
|
|
5873
|
-
[Position.RIGHT_TOP]: Position.TOP
|
|
5874
|
-
};
|
|
5875
|
-
var Popover$2 = Popover$1;
|
|
5839
|
+
}
|
|
5876
5840
|
|
|
5877
5841
|
var messages$6 = defineMessages({
|
|
5878
5842
|
ariaLabel: {
|
|
@@ -5923,7 +5887,7 @@ const Info = ({
|
|
|
5923
5887
|
title: title,
|
|
5924
5888
|
onClose: () => setOpen(false)
|
|
5925
5889
|
})]
|
|
5926
|
-
}) : /*#__PURE__*/jsx(Popover$
|
|
5890
|
+
}) : /*#__PURE__*/jsx(Popover$1, {
|
|
5927
5891
|
content: content,
|
|
5928
5892
|
preferredPlacement: preferredPlacement,
|
|
5929
5893
|
title: title,
|
|
@@ -6979,14 +6943,13 @@ const getSymbolsInPatternWithPosition = pattern => {
|
|
|
6979
6943
|
});
|
|
6980
6944
|
return patternWithSymbolsPosition;
|
|
6981
6945
|
};
|
|
6982
|
-
var getSymbolsInPatternWithPosition$1 = getSymbolsInPatternWithPosition;
|
|
6983
6946
|
|
|
6984
6947
|
const formatWithPattern = (value, pattern) => {
|
|
6985
6948
|
if (!value || value === '') {
|
|
6986
6949
|
return '';
|
|
6987
6950
|
}
|
|
6988
6951
|
const valueArray = value.toString().split('');
|
|
6989
|
-
const patternWithSymbolsPosition = getSymbolsInPatternWithPosition
|
|
6952
|
+
const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
|
|
6990
6953
|
let patternSymbol = [];
|
|
6991
6954
|
// valueArray.length increments during the cycle cause we are adding new elements.
|
|
6992
6955
|
for (let index = 0; index < valueArray.length; index += 1) {
|
|
@@ -7001,7 +6964,6 @@ const formatWithPattern = (value, pattern) => {
|
|
|
7001
6964
|
}
|
|
7002
6965
|
return valueArray.join('');
|
|
7003
6966
|
};
|
|
7004
|
-
var formatWithPattern$1 = formatWithPattern;
|
|
7005
6967
|
|
|
7006
6968
|
const unformatWithPattern = (value, pattern) => {
|
|
7007
6969
|
let valueArray = [''];
|
|
@@ -7012,18 +6974,16 @@ const unformatWithPattern = (value, pattern) => {
|
|
|
7012
6974
|
return valueArray.join('');
|
|
7013
6975
|
};
|
|
7014
6976
|
const getSymbolsInPattern = pattern => pattern.split('').filter(symbol => symbol !== '*');
|
|
7015
|
-
var unformatWithPattern$1 = unformatWithPattern;
|
|
7016
6977
|
|
|
7017
|
-
const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition
|
|
7018
|
-
var getCountOfSymbolsInSelection$1 = getCountOfSymbolsInSelection;
|
|
6978
|
+
const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
|
|
7019
6979
|
|
|
7020
6980
|
const getDistanceToNextSymbol = (selectionStart, pattern) => {
|
|
7021
|
-
const patternArray = getSymbolsInPatternWithPosition
|
|
6981
|
+
const patternArray = getSymbolsInPatternWithPosition(pattern);
|
|
7022
6982
|
const applicablePattern = patternArray.filter(symbol => symbol.index >= selectionStart);
|
|
7023
6983
|
return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
|
|
7024
6984
|
};
|
|
7025
6985
|
const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
|
|
7026
|
-
const patternArray = getSymbolsInPatternWithPosition
|
|
6986
|
+
const patternArray = getSymbolsInPatternWithPosition(pattern);
|
|
7027
6987
|
const applicablePattern = patternArray.filter(symbol => symbol.index < selectionStart).reverse();
|
|
7028
6988
|
return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
|
|
7029
6989
|
};
|
|
@@ -7053,7 +7013,7 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
|
|
|
7053
7013
|
}
|
|
7054
7014
|
break;
|
|
7055
7015
|
case 'Paste':
|
|
7056
|
-
cursorPosition += pastedLength + getCountOfSymbolsInSelection
|
|
7016
|
+
cursorPosition += pastedLength + getCountOfSymbolsInSelection(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
|
|
7057
7017
|
break;
|
|
7058
7018
|
case 'Cut':
|
|
7059
7019
|
case 'Delete':
|
|
@@ -7064,7 +7024,6 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
|
|
|
7064
7024
|
}
|
|
7065
7025
|
return cursorPosition;
|
|
7066
7026
|
};
|
|
7067
|
-
var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
|
|
7068
7027
|
|
|
7069
7028
|
class WithDisplayFormat extends Component {
|
|
7070
7029
|
static defaultProps = {
|
|
@@ -7074,9 +7033,9 @@ class WithDisplayFormat extends Component {
|
|
|
7074
7033
|
};
|
|
7075
7034
|
constructor(props) {
|
|
7076
7035
|
super(props);
|
|
7077
|
-
const unformattedValue = unformatWithPattern
|
|
7036
|
+
const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
|
|
7078
7037
|
this.state = {
|
|
7079
|
-
value: formatWithPattern
|
|
7038
|
+
value: formatWithPattern(unformattedValue, props.displayPattern),
|
|
7080
7039
|
historyNavigator: new HistoryNavigator$1(),
|
|
7081
7040
|
prevDisplayPattern: props.displayPattern,
|
|
7082
7041
|
triggerType: 'Initial',
|
|
@@ -7094,11 +7053,11 @@ class WithDisplayFormat extends Component {
|
|
|
7094
7053
|
historyNavigator
|
|
7095
7054
|
}) {
|
|
7096
7055
|
if (prevDisplayPattern !== displayPattern) {
|
|
7097
|
-
const unFormattedValue = unformatWithPattern
|
|
7056
|
+
const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
|
|
7098
7057
|
historyNavigator.reset();
|
|
7099
7058
|
return {
|
|
7100
7059
|
prevDisplayPattern: displayPattern,
|
|
7101
|
-
value: formatWithPattern
|
|
7060
|
+
value: formatWithPattern(unFormattedValue, displayPattern),
|
|
7102
7061
|
triggerType: null,
|
|
7103
7062
|
triggerEvent: null,
|
|
7104
7063
|
pastedLength: 0
|
|
@@ -7128,7 +7087,7 @@ class WithDisplayFormat extends Component {
|
|
|
7128
7087
|
return 'Delete';
|
|
7129
7088
|
}
|
|
7130
7089
|
// Android Fix.
|
|
7131
|
-
if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern
|
|
7090
|
+
if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
|
|
7132
7091
|
return 'Backspace';
|
|
7133
7092
|
}
|
|
7134
7093
|
return triggerEvent.key;
|
|
@@ -7166,13 +7125,13 @@ class WithDisplayFormat extends Component {
|
|
|
7166
7125
|
// Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
|
|
7167
7126
|
let newFormattedValue = '';
|
|
7168
7127
|
if (this.detectUndoRedo(event) === 'Undo') {
|
|
7169
|
-
newFormattedValue = formatWithPattern
|
|
7128
|
+
newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
|
|
7170
7129
|
this.setState({
|
|
7171
7130
|
value: newFormattedValue,
|
|
7172
7131
|
triggerType: 'Undo'
|
|
7173
7132
|
});
|
|
7174
7133
|
} else if (this.detectUndoRedo(event) === 'Redo') {
|
|
7175
|
-
newFormattedValue = formatWithPattern
|
|
7134
|
+
newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
|
|
7176
7135
|
this.setState({
|
|
7177
7136
|
value: newFormattedValue,
|
|
7178
7137
|
triggerType: 'Redo'
|
|
@@ -7190,7 +7149,7 @@ class WithDisplayFormat extends Component {
|
|
|
7190
7149
|
const {
|
|
7191
7150
|
displayPattern
|
|
7192
7151
|
} = this.props;
|
|
7193
|
-
const pastedLength = unformatWithPattern
|
|
7152
|
+
const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
|
|
7194
7153
|
this.setState({
|
|
7195
7154
|
triggerType: 'Paste',
|
|
7196
7155
|
pastedLength
|
|
@@ -7220,7 +7179,7 @@ class WithDisplayFormat extends Component {
|
|
|
7220
7179
|
const {
|
|
7221
7180
|
value
|
|
7222
7181
|
} = event.target;
|
|
7223
|
-
let unformattedValue = unformatWithPattern
|
|
7182
|
+
let unformattedValue = unformatWithPattern(value, displayPattern);
|
|
7224
7183
|
const action = this.getUserAction(unformattedValue);
|
|
7225
7184
|
if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
|
|
7226
7185
|
return;
|
|
@@ -7228,7 +7187,7 @@ class WithDisplayFormat extends Component {
|
|
|
7228
7187
|
if (action === 'Backspace' || action === 'Delete') {
|
|
7229
7188
|
unformattedValue = this.handleDelete(unformattedValue, action);
|
|
7230
7189
|
}
|
|
7231
|
-
const newFormattedValue = formatWithPattern
|
|
7190
|
+
const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
|
|
7232
7191
|
historyNavigator.add(unformattedValue);
|
|
7233
7192
|
this.handleCursorPositioning(action);
|
|
7234
7193
|
this.setState({
|
|
@@ -7236,13 +7195,13 @@ class WithDisplayFormat extends Component {
|
|
|
7236
7195
|
}, () => {
|
|
7237
7196
|
this.resetEvent();
|
|
7238
7197
|
if (onChange) {
|
|
7239
|
-
const broadcastValue = unformatWithPattern
|
|
7198
|
+
const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
|
|
7240
7199
|
onChange(broadcastValue);
|
|
7241
7200
|
}
|
|
7242
7201
|
});
|
|
7243
7202
|
};
|
|
7244
7203
|
handleOnBlur = event => {
|
|
7245
|
-
this.props.onBlur?.(unformatWithPattern
|
|
7204
|
+
this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
|
|
7246
7205
|
};
|
|
7247
7206
|
handleOnFocus = event => {
|
|
7248
7207
|
const {
|
|
@@ -7251,7 +7210,7 @@ class WithDisplayFormat extends Component {
|
|
|
7251
7210
|
} = this.props;
|
|
7252
7211
|
if (onFocus) {
|
|
7253
7212
|
this.handleOnChange(event);
|
|
7254
|
-
onFocus(unformatWithPattern
|
|
7213
|
+
onFocus(unformatWithPattern(event.target.value, displayPattern));
|
|
7255
7214
|
}
|
|
7256
7215
|
};
|
|
7257
7216
|
handleDelete = (unformattedValue, action) => {
|
|
@@ -7264,7 +7223,7 @@ class WithDisplayFormat extends Component {
|
|
|
7264
7223
|
} = this.state;
|
|
7265
7224
|
const newStack = [...unformattedValue];
|
|
7266
7225
|
if (selectionStart === selectionEnd) {
|
|
7267
|
-
let startPosition = selectionStart - getCountOfSymbolsInSelection
|
|
7226
|
+
let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
|
|
7268
7227
|
let toDelete = 0;
|
|
7269
7228
|
let count = getDistanceToNextSymbol(selectionStart, displayPattern);
|
|
7270
7229
|
if (action === 'Backspace') {
|
|
@@ -7288,7 +7247,7 @@ class WithDisplayFormat extends Component {
|
|
|
7288
7247
|
selectionEnd,
|
|
7289
7248
|
pastedLength
|
|
7290
7249
|
} = this.state;
|
|
7291
|
-
const cursorPosition =
|
|
7250
|
+
const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
|
|
7292
7251
|
setTimeout(() => {
|
|
7293
7252
|
if (triggerEvent) {
|
|
7294
7253
|
triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
|
|
@@ -9402,6 +9361,7 @@ const defaultSelectProps = {};
|
|
|
9402
9361
|
const defaultDisabledCountries = [];
|
|
9403
9362
|
const PhoneNumberInput = ({
|
|
9404
9363
|
id,
|
|
9364
|
+
'aria-labelledby': ariaLabelledBy,
|
|
9405
9365
|
required,
|
|
9406
9366
|
disabled,
|
|
9407
9367
|
initialValue,
|
|
@@ -9464,6 +9424,7 @@ const PhoneNumberInput = ({
|
|
|
9464
9424
|
setBroadcastedValue(internalValue);
|
|
9465
9425
|
}, [onChange, broadcastedValue, internalValue]);
|
|
9466
9426
|
return /*#__PURE__*/jsxs("div", {
|
|
9427
|
+
"aria-labelledby": ariaLabelledBy,
|
|
9467
9428
|
className: "tw-telephone",
|
|
9468
9429
|
children: [/*#__PURE__*/jsx("div", {
|
|
9469
9430
|
className: "tw-telephone__country-select",
|
|
@@ -11090,6 +11051,8 @@ const Summary = ({
|
|
|
11090
11051
|
className: "np-summary__title d-flex",
|
|
11091
11052
|
children: [/*#__PURE__*/jsx(Body, {
|
|
11092
11053
|
as: "span",
|
|
11054
|
+
role: "heading",
|
|
11055
|
+
"aria-level": 4,
|
|
11093
11056
|
type: Typography.BODY_LARGE_BOLD,
|
|
11094
11057
|
className: "text-primary m-b-1",
|
|
11095
11058
|
children: title
|
|
@@ -11953,7 +11916,7 @@ class TypeaheadInput extends Component {
|
|
|
11953
11916
|
autoFocus,
|
|
11954
11917
|
multiple,
|
|
11955
11918
|
name,
|
|
11956
|
-
|
|
11919
|
+
dropdownOpen,
|
|
11957
11920
|
placeholder,
|
|
11958
11921
|
selected,
|
|
11959
11922
|
value,
|
|
@@ -11975,7 +11938,7 @@ class TypeaheadInput extends Component {
|
|
|
11975
11938
|
autoFocus: autoFocus,
|
|
11976
11939
|
placeholder: hasPlaceholder ? placeholder : '',
|
|
11977
11940
|
"aria-autocomplete": "list",
|
|
11978
|
-
"aria-expanded":
|
|
11941
|
+
"aria-expanded": dropdownOpen,
|
|
11979
11942
|
"aria-haspopup": "listbox",
|
|
11980
11943
|
"aria-controls": `menu-${typeaheadId}`,
|
|
11981
11944
|
autoComplete: autoComplete,
|
|
@@ -12477,7 +12440,7 @@ class Typeahead extends Component {
|
|
|
12477
12440
|
}), /*#__PURE__*/jsx(TypeaheadInput, {
|
|
12478
12441
|
autoFocus,
|
|
12479
12442
|
multiple,
|
|
12480
|
-
|
|
12443
|
+
dropdownOpen,
|
|
12481
12444
|
placeholder,
|
|
12482
12445
|
selected,
|
|
12483
12446
|
maxHeight,
|
|
@@ -15129,5 +15092,5 @@ const translations = {
|
|
|
15129
15092
|
'zh-HK': zhHK
|
|
15130
15093
|
};
|
|
15131
15094
|
|
|
15132
|
-
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
|
|
15095
|
+
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 };
|
|
15133
15096
|
//# sourceMappingURL=index.esm.js.map
|