@transferwise/components 0.0.0-experimental-4533565 → 0.0.0-experimental-da1781d

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.
Files changed (127) hide show
  1. package/build/flowNavigation/animatedLabel/AnimatedLabel.js +1 -1
  2. package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
  3. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs +1 -1
  4. package/build/flowNavigation/animatedLabel/AnimatedLabel.mjs.map +1 -1
  5. package/build/index.js +3 -3
  6. package/build/index.mjs +2 -2
  7. package/build/{listItem/ListItem.js → legacylistItem/LegacyListItem.js} +3 -3
  8. package/build/legacylistItem/LegacyListItem.js.map +1 -0
  9. package/build/{listItem/ListItem.mjs → legacylistItem/LegacyListItem.mjs} +3 -3
  10. package/build/legacylistItem/LegacyListItem.mjs.map +1 -0
  11. package/build/legacylistItem/List.js.map +1 -0
  12. package/build/legacylistItem/List.mjs.map +1 -0
  13. package/build/main.css +60 -57
  14. package/build/phoneNumberInput/PhoneNumberInput.js +1 -1
  15. package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
  16. package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -1
  17. package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
  18. package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js +2 -2
  19. package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js.map +1 -1
  20. package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.mjs +2 -2
  21. package/build/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.mjs.map +1 -1
  22. package/build/styles/legacylistItem/LegacyListItem.css +6 -0
  23. package/build/styles/listItem/ListItem.css +185 -3
  24. package/build/styles/main.css +60 -57
  25. package/build/styles/switch/Switch.css +3 -0
  26. package/build/types/index.d.ts +3 -3
  27. package/build/types/index.d.ts.map +1 -1
  28. package/build/types/legacylistItem/LegacyListItem.d.ts +13 -0
  29. package/build/types/legacylistItem/LegacyListItem.d.ts.map +1 -0
  30. package/build/types/legacylistItem/List.d.ts.map +1 -0
  31. package/build/types/legacylistItem/index.d.ts +5 -0
  32. package/build/types/legacylistItem/index.d.ts.map +1 -0
  33. package/build/types/listItem/ListItem.d.ts +38 -8
  34. package/build/types/listItem/ListItem.d.ts.map +1 -1
  35. package/build/types/listItem/ListItemAdditionalInfo.d.ts +9 -0
  36. package/build/types/listItem/ListItemAdditionalInfo.d.ts.map +1 -0
  37. package/build/types/listItem/ListItemButton.d.ts +4 -0
  38. package/build/types/listItem/ListItemButton.d.ts.map +1 -0
  39. package/build/types/listItem/ListItemCheckbox.d.ts +4 -0
  40. package/build/types/listItem/ListItemCheckbox.d.ts.map +1 -0
  41. package/build/types/listItem/ListItemIconButton.d.ts +7 -0
  42. package/build/types/listItem/ListItemIconButton.d.ts.map +1 -0
  43. package/build/types/listItem/ListItemMedia.d.ts +19 -0
  44. package/build/types/listItem/ListItemMedia.d.ts.map +1 -0
  45. package/build/types/listItem/ListItemNavigation.d.ts +4 -0
  46. package/build/types/listItem/ListItemNavigation.d.ts.map +1 -0
  47. package/build/types/{item/ItemSwitch.d.ts → listItem/ListItemSwitch.d.ts} +1 -1
  48. package/build/types/listItem/ListItemSwitch.d.ts.map +1 -0
  49. package/build/types/listItem/index.d.ts +4 -3
  50. package/build/types/listItem/index.d.ts.map +1 -1
  51. package/build/types/{item → listItem}/prompt/Prompt.d.ts +3 -3
  52. package/build/types/listItem/prompt/Prompt.d.ts.map +1 -0
  53. package/build/types/listItem/useItemControl.d.ts +5 -0
  54. package/build/types/listItem/useItemControl.d.ts.map +1 -0
  55. package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts +2 -2
  56. package/build/types/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.d.ts.map +1 -1
  57. package/package.json +3 -3
  58. package/src/flowNavigation/animatedLabel/AnimatedLabel.tsx +1 -1
  59. package/src/index.ts +3 -3
  60. package/src/legacylistItem/LegacyListItem.css +6 -0
  61. package/src/legacylistItem/LegacyListItem.less +7 -0
  62. package/src/legacylistItem/LegacyListItem.story.tsx +120 -0
  63. package/src/{listItem/ListItem.tests.story.tsx → legacylistItem/LegacyListItem.tests.story.tsx} +7 -7
  64. package/src/legacylistItem/LegacyListItem.tsx +53 -0
  65. package/src/legacylistItem/index.ts +4 -0
  66. package/src/listItem/ListItem.css +185 -3
  67. package/src/listItem/ListItem.less +180 -5
  68. package/src/listItem/ListItem.story.tsx +250 -97
  69. package/src/listItem/ListItem.tsx +167 -37
  70. package/src/{item/ItemAdditionalInfo.tsx → listItem/ListItemAdditionalInfo.tsx} +5 -5
  71. package/src/{item/ItemButton.spec.tsx → listItem/ListItemButton.spec.tsx} +4 -4
  72. package/src/{item/ItemButton.tsx → listItem/ListItemButton.tsx} +2 -2
  73. package/src/{item/ItemCheckbox.tsx → listItem/ListItemCheckbox.tsx} +5 -2
  74. package/src/{item/ItemIconButton.tsx → listItem/ListItemIconButton.tsx} +2 -2
  75. package/src/{item/ItemMedia.tsx → listItem/ListItemMedia.tsx} +9 -9
  76. package/src/{item/ItemNavigation.tsx → listItem/ListItemNavigation.tsx} +2 -2
  77. package/src/listItem/index.ts +9 -3
  78. package/src/{item → listItem}/prompt/Prompt.spec.tsx +12 -12
  79. package/src/{item → listItem}/prompt/Prompt.story.tsx +27 -27
  80. package/src/{item → listItem}/prompt/Prompt.tsx +4 -4
  81. package/src/listItem/useItemControl.tsx +12 -0
  82. package/src/main.css +60 -57
  83. package/src/main.less +2 -2
  84. package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +4 -4
  85. package/src/phoneNumberInput/PhoneNumberInput.story.tsx +22 -0
  86. package/src/phoneNumberInput/PhoneNumberInput.tsx +1 -1
  87. package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts +4 -3
  88. package/src/switch/Switch.css +3 -0
  89. package/src/switch/Switch.less +1 -0
  90. package/build/listItem/List.js.map +0 -1
  91. package/build/listItem/List.mjs.map +0 -1
  92. package/build/listItem/ListItem.js.map +0 -1
  93. package/build/listItem/ListItem.mjs.map +0 -1
  94. package/build/styles/item/Item.css +0 -188
  95. package/build/types/item/Item.d.ts +0 -43
  96. package/build/types/item/Item.d.ts.map +0 -1
  97. package/build/types/item/ItemAdditionalInfo.d.ts +0 -9
  98. package/build/types/item/ItemAdditionalInfo.d.ts.map +0 -1
  99. package/build/types/item/ItemButton.d.ts +0 -4
  100. package/build/types/item/ItemButton.d.ts.map +0 -1
  101. package/build/types/item/ItemCheckbox.d.ts +0 -4
  102. package/build/types/item/ItemCheckbox.d.ts.map +0 -1
  103. package/build/types/item/ItemIconButton.d.ts +0 -7
  104. package/build/types/item/ItemIconButton.d.ts.map +0 -1
  105. package/build/types/item/ItemMedia.d.ts +0 -19
  106. package/build/types/item/ItemMedia.d.ts.map +0 -1
  107. package/build/types/item/ItemNavigation.d.ts +0 -4
  108. package/build/types/item/ItemNavigation.d.ts.map +0 -1
  109. package/build/types/item/ItemSwitch.d.ts.map +0 -1
  110. package/build/types/item/index.d.ts +0 -6
  111. package/build/types/item/index.d.ts.map +0 -1
  112. package/build/types/item/prompt/Prompt.d.ts.map +0 -1
  113. package/build/types/item/useItemControl.d.ts +0 -5
  114. package/build/types/item/useItemControl.d.ts.map +0 -1
  115. package/build/types/listItem/List.d.ts.map +0 -1
  116. package/src/item/Item.css +0 -188
  117. package/src/item/Item.less +0 -182
  118. package/src/item/Item.story.tsx +0 -273
  119. package/src/item/Item.tsx +0 -181
  120. package/src/item/index.ts +0 -6
  121. package/src/item/useItemControl.tsx +0 -12
  122. /package/build/{listItem → legacylistItem}/List.js +0 -0
  123. /package/build/{listItem → legacylistItem}/List.mjs +0 -0
  124. /package/build/types/{listItem → legacylistItem}/List.d.ts +0 -0
  125. /package/src/{listItem/ListItem.spec.tsx → legacylistItem/LegacyListItem.spec.tsx} +0 -0
  126. /package/src/{listItem → legacylistItem}/List.tsx +0 -0
  127. /package/src/{item/ItemSwitch.tsx → listItem/ListItemSwitch.tsx} +0 -0
@@ -8,7 +8,7 @@ var BottomSheet = require('../../common/bottomSheet/BottomSheet.js');
8
8
  var Option = require('../../common/Option/Option.js');
9
9
  var icons = require('@transferwise/icons');
10
10
  var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');
11
- var List = require('../../listItem/List.js');
11
+ var List = require('../../legacylistItem/List.js');
12
12
  require('../../body/Body.js');
13
13
  var jsxRuntime = require('react/jsx-runtime');
14
14
 
@@ -1 +1 @@
1
- {"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../listItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
1
+ {"version":3,"file":"AnimatedLabel.js","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":";;;;;;;;;;;;;;AAgBMA,MAAAA,aAAa,GAAGA,CAAC;EAAEC,WAAW;EAAEC,SAAS;AAAEC,EAAAA,KAAAA;AAA2B,CAAA,KAAI;AAC9E,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EAEjD,SAASC,gBAAgBA,CAACC,OAAwB,EAAA;AAChD,IAAA,OAAO,MAAK;MACVH,YAAY,CAAC,KAAK,CAAC,CAAA;AACnBG,MAAAA,OAAO,IAAI,CAAA;KACZ,CAAA;AACH,GAAA;EAEA,oBACEC,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,IAAI,EAAEP,SAAU;AAAAQ,IAAAA,QAAA,eACjCH,cAAA,CAACI,kCAAgB,CAACC,QAAQ,EAAA;MAAAF,QAAA,EACtBG,SAAS,IAAI;QACb,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAL,UAAAA,QAAA,gBACEH,cAAA,CAAA,QAAA,EAAA;AACES,YAAAA,IAAI,EAAC,QAAQ;AACbC,YAAAA,EAAE,EAAEjB,OAAQ;AACZ,YAAA,eAAA,EAAc,MAAM;AACpB,YAAA,eAAA,EAAea,SAAU;AACzB,YAAA,eAAA,EAAeX,SAAU;YACzBJ,SAAS,EAAEoB,SAAI,CACb,mBAAmB,EACnB,cAAc,EACd,yBAAyB,EACzBpB,SAAS,CACT;AACFQ,YAAAA,OAAO,EAAEA,MAAMH,YAAY,CAAC,IAAI,CAAE;AAAAO,YAAAA,QAAA,EAEjCX,KAAK,CAACoB,GAAG,CAAC,CAAC;AAAEC,cAAAA,KAAAA;aAAO,EAAEC,KAAK,KAAI;AAC9B,cAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK,CAAA;AAC3C,cAAA,MAAME,aAAa,GAAGF,KAAK,GAAG,CAAC,CAAA;AAC/B,cAAA,oBACEP,eAAA,CAAA,KAAA,EAAA;AAEE,gBAAA,aAAA,EAAa,CAACQ,aAAc;gBAC5BxB,SAAS,EAAEoB,SAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE;AACvE,kBAAA,yCAAyC,EAAEI,aAAAA;AAC5C,iBAAA,CAAE;gBAAAZ,QAAA,EAAA,CAEFU,KAAK,EAAE,GAAA,eAAAb,cAAA,CAACiB,iBAAW,EAAA,EACtB,CAAA,CAAA;AAAA,eAAA,EAPOD,aAOF,CAAC,CAAA;aAET,CAAA;AAAC,WACI,CACR,eAAAhB,cAAA,CAACkB,mBAAW,EAAA;AACVC,YAAAA,IAAI,EAAC,MAAM;AACX,YAAA,iBAAA,EAAiB1B,OAAQ;AACzBS,YAAAA,IAAI,EAAEP,SAAU;AAChByB,YAAAA,OAAO,EAAEA,MAAMxB,YAAY,CAAC,KAAK,CAAE;YAAAO,QAAA,eAEnCH,cAAA,CAACqB,SAAI,EAAA;AAAC9B,cAAAA,SAAS,EAAC,aAAa;cAAAY,QAAA,EAC1BX,KAAK,CAACoB,GAAG,CAAC,CAACU,IAAI,EAAER,KAAK,KAAI;AACzB,gBAAA,MAAMC,aAAa,GAAGzB,WAAW,KAAKwB,KAAK,CAAA;AAC3C,gBAAA,MAAMS,UAAU,GAAGjC,WAAW,GAAGwB,KAAK,CAAA;AACtC,gBAAA,MAAMU,MAAM,GAAG,CAAQV,KAAAA,EAAAA,KAAK,CAAE,CAAA,CAAA;gBAC9B,oBACEd,cAAA,CAACyB,cAAM,EAAA;AAELf,kBAAAA,EAAE,EAAEc,MAAO;AACXE,kBAAAA,EAAE,EAAC,IAAI;AACPP,kBAAAA,IAAI,EAAC,UAAU;AACfQ,kBAAAA,QAAQ,EAAE,KAAM;kBAChBpC,SAAS,EAAEoB,SAAI,CAAC,0BAA0B,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE;AACrEiB,oBAAAA,SAAS,EAAE,CAACL,UAAAA;AACb,mBAAA,CAAE;kBACHM,KAAK,EAAEP,IAAI,CAACT,KAAM;kBAClBiB,OAAO,EAAER,IAAI,CAACS,UAAW;AACzBC,kBAAAA,MAAM,EAAEjB,aAAa,gBAAGf,cAAA,CAACiC,WAAK,EAAA;AAACC,oBAAAA,IAAI,EAAE,EAAA;oBAAM,GAAG,IAAK;AACnD,kBAAA,cAAA,EAAcnB,aAAa,GAAG,MAAM,GAAG,KAAM;AAC7C,kBAAA,eAAA,EAAeQ,UAAW;AAC1BY,kBAAAA,QAAQ,EAAEZ,UAAW;kBACrBa,kBAAkB,EAAA,IAAA;kBAAA,IACb,CAACb,UAAU,IAAI;AAClBc,oBAAAA,QAAQ,EAAE,CAAC;AACXtC,oBAAAA,OAAO,EAAED,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC;oBACvCuC,SAAS,EAAGC,KAAK,IAAI;sBACnBA,KAAK,CAACC,cAAc,EAAE,CAAA;sBACtB,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,IAAIF,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;AACpD3C,wBAAAA,gBAAgB,CAACwB,IAAI,CAACvB,OAAO,CAAC,EAAE,CAAA;AAClC,uBAAA;AACF,qBAAA;mBACD,CAAA;AAAA,iBAAA,EAxBIyB,MAyBL,CAAA,CAAA;eAEL,CAAA;aACG,CAAA;AACR,WAAa,CACf,CAAA;AAAA,SAAA,CAAG,CAAA;AAEP,OAAA;KACyB,CAAA;AAC7B,GAAmB,CAAC,CAAA;AAExB;;;;"}
@@ -4,7 +4,7 @@ import BottomSheet from '../../common/bottomSheet/BottomSheet.mjs';
4
4
  import Option from '../../common/Option/Option.mjs';
5
5
  import { ChevronDown, Check } from '@transferwise/icons';
6
6
  import { OverlayIdProvider, OverlayIdContext } from '../../provider/overlay/OverlayIdProvider.mjs';
7
- import { List } from '../../listItem/List.mjs';
7
+ import { List } from '../../legacylistItem/List.mjs';
8
8
  import '../../body/Body.mjs';
9
9
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
10
10
 
@@ -1 +1 @@
1
- {"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../listItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
1
+ {"version":3,"file":"AnimatedLabel.mjs","sources":["../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { Step } from '../../stepper/Stepper';\nimport BottomSheet from '../../common/bottomSheet';\nimport Option from '../../common/Option';\nimport { Check, ChevronDown } from '@transferwise/icons';\nimport { OverlayIdContext, OverlayIdProvider } from '../../provider/overlay/OverlayIdProvider';\nimport { List } from '../../legacylistItem';\n\nexport interface AnimatedLabelProps {\n activeLabel: number;\n className?: string;\n steps: readonly Step[];\n}\n\nconst AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) => {\n const labelId = useId();\n const [showSteps, setShowSteps] = useState(false);\n\n function handleStepAction(onClick: Step['onClick']) {\n return () => {\n setShowSteps(false);\n onClick?.();\n };\n }\n\n return (\n <OverlayIdProvider open={showSteps}>\n <OverlayIdContext.Consumer>\n {(overlayId) => {\n return (\n <>\n <button\n type=\"button\"\n id={labelId}\n aria-haspopup=\"menu\"\n aria-controls={overlayId}\n aria-expanded={showSteps}\n className={clsx(\n 'np-animated-label',\n 'btn-unstyled',\n 'np-text-body-large-bold',\n className,\n )}\n onClick={() => setShowSteps(true)}\n >\n {steps.map(({ label }, index) => {\n const isCurrentStep = activeLabel === index;\n const previousIndex = index - 1;\n return (\n <div\n key={previousIndex}\n aria-hidden={!isCurrentStep}\n className={clsx('text-xs-center', 'd-inline-flex', 'align-items-center', {\n 'np-animated-label--active text-ellipsis': isCurrentStep,\n })}\n >\n {label} <ChevronDown />\n </div>\n );\n })}\n </button>\n <BottomSheet\n role=\"menu\"\n aria-labelledby={labelId}\n open={showSteps}\n onClose={() => setShowSteps(false)}\n >\n <List className=\"m-b-0 p-a-1\">\n {steps.map((step, index) => {\n const isCurrentStep = activeLabel === index;\n const isDisabled = activeLabel < index;\n const itemId = `step-${index}`;\n return (\n <Option\n key={itemId}\n id={itemId}\n as=\"li\"\n role=\"menuitem\"\n decision={false}\n className={clsx('np-animated-label-option', 'p-x-3', 'p-y-1', 'm-y-1', {\n clickable: !isDisabled,\n })}\n title={step.label}\n content={step.hoverLabel}\n button={isCurrentStep ? <Check size={24} /> : null}\n aria-current={isCurrentStep ? 'step' : false}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n isContainerAligned\n {...(!isDisabled && {\n tabIndex: 0,\n onClick: handleStepAction(step.onClick),\n onKeyDown: (event) => {\n event.preventDefault();\n if (event.code === 'Enter' || event.code === 'Space') {\n handleStepAction(step.onClick)();\n }\n },\n })}\n />\n );\n })}\n </List>\n </BottomSheet>\n </>\n );\n }}\n </OverlayIdContext.Consumer>\n </OverlayIdProvider>\n );\n};\n\nexport default AnimatedLabel;\n"],"names":["AnimatedLabel","activeLabel","className","steps","labelId","useId","showSteps","setShowSteps","useState","handleStepAction","onClick","_jsx","OverlayIdProvider","open","children","OverlayIdContext","Consumer","overlayId","_jsxs","_Fragment","type","id","clsx","map","label","index","isCurrentStep","previousIndex","ChevronDown","BottomSheet","role","onClose","List","step","isDisabled","itemId","Option","as","decision","clickable","title","content","hoverLabel","button","Check","size","disabled","isContainerAligned","tabIndex","onKeyDown","event","preventDefault","code"],"mappings":"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"}
package/build/index.js CHANGED
@@ -61,8 +61,8 @@ var TextArea = require('./inputs/TextArea.js');
61
61
  var InstructionsList = require('./instructionsList/InstructionsList.js');
62
62
  var Label = require('./label/Label.js');
63
63
  var Link = require('./link/Link.js');
64
- var List = require('./listItem/List.js');
65
- var ListItem = require('./listItem/ListItem.js');
64
+ var List = require('./legacylistItem/List.js');
65
+ var LegacyListItem = require('./legacylistItem/LegacyListItem.js');
66
66
  var Loader = require('./loader/Loader.js');
67
67
  var Logo = require('./logo/Logo.js');
68
68
  var Markdown = require('./markdown/Markdown.js');
@@ -220,7 +220,7 @@ exports.InstructionsList = InstructionsList.default;
220
220
  exports.Label = Label.Label;
221
221
  exports.Link = Link.default;
222
222
  exports.List = List.List;
223
- exports.ListItem = ListItem.default;
223
+ exports.LegacyListItem = LegacyListItem.default;
224
224
  exports.Loader = Loader.default;
225
225
  exports.Logo = Logo.default;
226
226
  Object.defineProperty(exports, "LogoType", {
package/build/index.mjs CHANGED
@@ -59,8 +59,8 @@ export { TextArea } from './inputs/TextArea.mjs';
59
59
  export { default as InstructionsList } from './instructionsList/InstructionsList.mjs';
60
60
  export { Label } from './label/Label.mjs';
61
61
  export { default as Link } from './link/Link.mjs';
62
- export { List } from './listItem/List.mjs';
63
- export { default as ListItem } from './listItem/ListItem.mjs';
62
+ export { List } from './legacylistItem/List.mjs';
63
+ export { default as LegacyListItem } from './legacylistItem/LegacyListItem.mjs';
64
64
  export { default as Loader } from './loader/Loader.mjs';
65
65
  export { default as Logo, LogoType } from './logo/Logo.mjs';
66
66
  export { default as Markdown } from './markdown/Markdown.mjs';
@@ -6,7 +6,7 @@ var clsx = require('clsx');
6
6
  var Body = require('../body/Body.js');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
 
9
- const ListItem = ({
9
+ const LegacyListItem = ({
10
10
  media,
11
11
  action,
12
12
  className,
@@ -43,5 +43,5 @@ const ListItem = ({
43
43
  });
44
44
  };
45
45
 
46
- exports.default = ListItem;
47
- //# sourceMappingURL=ListItem.js.map
46
+ exports.default = LegacyListItem;
47
+ //# sourceMappingURL=LegacyListItem.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LegacyListItem.js","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;;;;;AAeMA,MAAAA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,eAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,SAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,eAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,SAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,cAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,cAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
2
2
  import Body from '../body/Body.mjs';
3
3
  import { jsxs, jsx } from 'react/jsx-runtime';
4
4
 
5
- const ListItem = ({
5
+ const LegacyListItem = ({
6
6
  media,
7
7
  action,
8
8
  className,
@@ -39,5 +39,5 @@ const ListItem = ({
39
39
  });
40
40
  };
41
41
 
42
- export { ListItem as default };
43
- //# sourceMappingURL=ListItem.mjs.map
42
+ export { LegacyListItem as default };
43
+ //# sourceMappingURL=LegacyListItem.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"LegacyListItem.mjs","sources":["../../src/legacylistItem/LegacyListItem.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, FC, ReactNode } from 'react';\n\nimport Body from '../body/Body';\n\nexport type LegacyListItemProps = {\n title: ReactNode;\n value: ReactNode;\n media?: ReactNode;\n action?: ReactNode;\n className?: string;\n isContainerAligned?: boolean;\n as?: ElementType;\n};\n\nconst LegacyListItem: FC<LegacyListItemProps> = ({\n media,\n action,\n className,\n title,\n value,\n isContainerAligned,\n as = 'li',\n ...rest\n}) => {\n const Element = as;\n\n return (\n <Element\n className={clsx('np-list-item d-flex align-items-center p-y-2', className, {\n 'p-x-2': !isContainerAligned,\n })}\n {...rest}\n >\n {media}\n\n <div className={clsx('d-flex flex-column', { 'p-l-2': !!media, 'p-r-2': !!action })}>\n <Body type=\"body-default\" className=\"text-secondary m-b-0\">\n {title}\n </Body>\n {value && (\n <Body type=\"body-large\" className=\"text-primary text-overflow-wrap m-b-0\">\n {value}\n </Body>\n )}\n </div>\n\n {action ? <div className=\"np-list-item__action m-l-auto\">{action}</div> : null}\n </Element>\n );\n};\n\nexport default LegacyListItem;\n"],"names":["LegacyListItem","media","action","className","title","value","isContainerAligned","as","rest","Element","_jsxs","clsx","children","_jsx","Body","type"],"mappings":";;;;AAeMA,MAAAA,cAAc,GAA4BA,CAAC;EAC/CC,KAAK;EACLC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,kBAAkB;AAClBC,EAAAA,EAAE,GAAG,IAAI;EACT,GAAGC,IAAAA;AACJ,CAAA,KAAI;EACH,MAAMC,OAAO,GAAGF,EAAE,CAAA;EAElB,oBACEG,IAAA,CAACD,OAAO,EAAA;AACNN,IAAAA,SAAS,EAAEQ,IAAI,CAAC,8CAA8C,EAAER,SAAS,EAAE;AACzE,MAAA,OAAO,EAAE,CAACG,kBAAAA;AACX,KAAA,CAAE;AAAA,IAAA,GACCE,IAAI;IAAAI,QAAA,EAAA,CAEPX,KAAK,eAENS,IAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAEQ,IAAI,CAAC,oBAAoB,EAAE;QAAE,OAAO,EAAE,CAAC,CAACV,KAAK;QAAE,OAAO,EAAE,CAAC,CAACC,MAAAA;AAAM,OAAE,CAAE;MAAAU,QAAA,EAAA,cAClFC,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,cAAc;AAACZ,QAAAA,SAAS,EAAC,sBAAsB;AAAAS,QAAAA,QAAA,EACvDR,KAAAA;AAAK,OACF,CACN,EAACC,KAAK,iBACJQ,GAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAC,YAAY;AAACZ,QAAAA,SAAS,EAAC,uCAAuC;AAAAS,QAAAA,QAAA,EACtEP,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACE,CAEL,EAACH,MAAM,gBAAGW,GAAA,CAAA,KAAA,EAAA;AAAKV,MAAAA,SAAS,EAAC,+BAA+B;AAAAS,MAAAA,QAAA,EAAEV,MAAAA;KAAY,CAAC,GAAG,IAAI,CAAA;AAAA,GACvE,CAAC,CAAA;AAEd;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"List.js","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n className?: string;\n children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,cAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,SAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"List.mjs","sources":["../../src/legacylistItem/List.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport interface ListProps {\n className?: string;\n children?: React.ReactNode;\n}\n\nexport function List({ className, children }: ListProps) {\n return <ul className={clsx(className, 'list-unstyled')}>{children}</ul>;\n}\n"],"names":["List","className","children","_jsx","clsx"],"mappings":";;;SAOgBA,IAAIA,CAAC;EAAEC,SAAS;AAAEC,EAAAA,QAAAA;AAAqB,CAAA,EAAA;AACrD,EAAA,oBAAOC,GAAA,CAAA,IAAA,EAAA;AAAIF,IAAAA,SAAS,EAAEG,IAAI,CAACH,SAAS,EAAE,eAAe,CAAE;AAAAC,IAAAA,QAAA,EAAEA,QAAAA;AAAQ,GAAK,CAAC,CAAA;AACzE;;;;"}
package/build/main.css CHANGED
@@ -2648,7 +2648,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2648
2648
  border-radius: 9999px !important;
2649
2649
  border-radius: var(--radius-full) !important;
2650
2650
  }
2651
- .np-item {
2651
+ .wds-list-item {
2652
2652
  padding: 16px;
2653
2653
  padding: var(--size-16);
2654
2654
  border-radius: 24px;
@@ -2658,63 +2658,63 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2658
2658
  gap: 16px;
2659
2659
  gap: var(--size-16);
2660
2660
  }
2661
- .np-item-interactive {
2661
+ .wds-list-item-interactive {
2662
2662
  cursor: pointer;
2663
2663
  }
2664
- .np-item-interactive:hover {
2664
+ .wds-list-item-interactive:hover {
2665
2665
  background-color: var(--color-background-screen-hover);
2666
2666
  }
2667
- .np-item-interactive:active {
2667
+ .wds-list-item-interactive:active {
2668
2668
  background-color: var(--color-background-screen-active);
2669
2669
  }
2670
- .np-item-media-image {
2670
+ .wds-list-item-media-image {
2671
2671
  width: var(--item-media-image-size);
2672
2672
  height: var(--item-media-image-size);
2673
2673
  }
2674
- .np-item-body {
2674
+ .wds-list-item-body {
2675
2675
  width: 100%;
2676
2676
  }
2677
- .np-item-title {
2677
+ .wds-list-item-title {
2678
2678
  color: #37517e;
2679
2679
  color: var(--color-content-primary);
2680
2680
  }
2681
- .np-item-additional-info {
2681
+ .wds-list-item-additional-info {
2682
2682
  color: #768e9c;
2683
2683
  color: var(--color-content-tertiary);
2684
2684
  }
2685
- .np-item-value {
2685
+ .wds-list-item-value {
2686
2686
  flex: 0 0 auto;
2687
2687
  }
2688
- .np-item-control {
2688
+ .wds-list-item-control {
2689
2689
  flex: 0 0 auto;
2690
2690
  }
2691
- .np-item-spotlight-active {
2691
+ .wds-list-item-spotlight-active {
2692
2692
  background-color: rgba(134,167,189,0.10196);
2693
2693
  background-color: var(--color-background-neutral);
2694
2694
  }
2695
- .np-item-spotlight-active:hover {
2695
+ .wds-list-item-spotlight-active:hover {
2696
2696
  background-color: var(--color-background-neutral-hover);
2697
2697
  }
2698
- .np-item-spotlight-active:active {
2698
+ .wds-list-item-spotlight-active:active {
2699
2699
  background-color: var(--color-background-neutral-active);
2700
2700
  }
2701
- .np-item-spotlight-inactive {
2701
+ .wds-list-item-spotlight-inactive {
2702
2702
  background-color: rgba(134, 167, 189, 0.025);
2703
2703
  border: 1px dashed rgba(0,0,0,0.10196);
2704
2704
  border: 1px dashed var(--color-border-neutral);
2705
2705
  }
2706
2706
  @supports (color: color-mix(in lch, red, blue)) {
2707
- .np-item-spotlight-inactive {
2707
+ .wds-list-item-spotlight-inactive {
2708
2708
  background-color: color-mix(in srgb, var(--color-background-neutral) 25%, transparent);
2709
2709
  }
2710
2710
  }
2711
- .np-item-spotlight-inactive:hover {
2711
+ .wds-list-item-spotlight-inactive:hover {
2712
2712
  background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
2713
2713
  }
2714
- .np-item-spotlight-inactive:active {
2714
+ .wds-list-item-spotlight-inactive:active {
2715
2715
  background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
2716
2716
  }
2717
- .np-item-prompt {
2717
+ .wds-list-item-prompt {
2718
2718
  display: inline-flex;
2719
2719
  padding-top: calc(8px / 2);
2720
2720
  padding-top: calc(var(--padding-x-small) / 2);
@@ -2729,7 +2729,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2729
2729
  word-break: break-word;
2730
2730
  word-wrap: break-word;
2731
2731
  }
2732
- .np-item-prompt .np-prompt-icon {
2732
+ .wds-list-item-prompt .np-prompt-icon {
2733
2733
  padding-right: calc(12px / 2);
2734
2734
  padding-right: calc(var(--size-12) / 2);
2735
2735
  padding-top: calc(4px - 1px);
@@ -2737,103 +2737,103 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
2737
2737
  padding-bottom: calc(4px - 1px);
2738
2738
  padding-bottom: calc(var(--size-4) - 1px);
2739
2739
  }
2740
- .np-item-prompt .np-prompt-icon .tw-icon-tags,
2741
- .np-item-prompt .np-prompt-icon .tw-icon-confetti {
2740
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-tags,
2741
+ .wds-list-item-prompt .np-prompt-icon .tw-icon-confetti {
2742
2742
  color: var(--color-sentiment-positive-primary);
2743
2743
  }
2744
- .np-item-prompt a {
2744
+ .wds-list-item-prompt a {
2745
2745
  text-underline-offset: calc(4px / 2);
2746
2746
  text-underline-offset: calc(var(--size-4) / 2);
2747
2747
  }
2748
- .np-item-prompt.np-prompt-interactive {
2748
+ .wds-list-item-prompt.np-prompt-interactive {
2749
2749
  -webkit-text-decoration: none;
2750
2750
  text-decoration: none;
2751
2751
  cursor: pointer;
2752
2752
  border: none;
2753
2753
  }
2754
- .np-item-prompt.negative {
2754
+ .wds-list-item-prompt.negative {
2755
2755
  background-color: var(--color-sentiment-negative-secondary);
2756
2756
  color: var(--color-sentiment-negative-primary);
2757
2757
  }
2758
- .np-item-prompt.negative a {
2758
+ .wds-list-item-prompt.negative a {
2759
2759
  color: var(--color-sentiment-negative-primary);
2760
2760
  }
2761
- .np-item-prompt.negative a:hover {
2761
+ .wds-list-item-prompt.negative a:hover {
2762
2762
  color: var(--color-sentiment-negative-primary-hover);
2763
2763
  }
2764
- .np-item-prompt.negative a:active {
2764
+ .wds-list-item-prompt.negative a:active {
2765
2765
  color: var(--color-sentiment-negative-primary-active);
2766
2766
  }
2767
- .np-prompt-interactive.np-item-prompt.negative:hover {
2767
+ .np-prompt-interactive.wds-list-item-prompt.negative:hover {
2768
2768
  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 95%, var(--color-sentiment-negative-primary));
2769
2769
  }
2770
- .np-prompt-interactive.np-item-prompt.negative:active {
2770
+ .np-prompt-interactive.wds-list-item-prompt.negative:active {
2771
2771
  background-color: color-mix(in srgb, var(--color-sentiment-negative-secondary) 90%, var(--color-sentiment-negative-primary));
2772
2772
  }
2773
- .np-item-prompt.positive,
2774
- .np-item-prompt.discount,
2775
- .np-item-prompt.savings {
2773
+ .wds-list-item-prompt.positive,
2774
+ .wds-list-item-prompt.discount,
2775
+ .wds-list-item-prompt.savings {
2776
2776
  background-color: var(--color-sentiment-positive-secondary);
2777
2777
  color: var(--color-sentiment-positive-primary);
2778
2778
  }
2779
- .np-item-prompt.positive a,
2780
- .np-item-prompt.discount a,
2781
- .np-item-prompt.savings a {
2779
+ .wds-list-item-prompt.positive a,
2780
+ .wds-list-item-prompt.discount a,
2781
+ .wds-list-item-prompt.savings a {
2782
2782
  color: var(--color-sentiment-positive-primary);
2783
2783
  }
2784
- .np-item-prompt.positive a:hover,
2785
- .np-item-prompt.discount a:hover,
2786
- .np-item-prompt.savings a:hover {
2784
+ .wds-list-item-prompt.positive a:hover,
2785
+ .wds-list-item-prompt.discount a:hover,
2786
+ .wds-list-item-prompt.savings a:hover {
2787
2787
  color: var(--color-sentiment-positive-primary-hover);
2788
2788
  }
2789
- .np-item-prompt.positive a:active,
2790
- .np-item-prompt.discount a:active,
2791
- .np-item-prompt.savings a:active {
2789
+ .wds-list-item-prompt.positive a:active,
2790
+ .wds-list-item-prompt.discount a:active,
2791
+ .wds-list-item-prompt.savings a:active {
2792
2792
  color: var(--color-sentiment-positive-primary-active);
2793
2793
  }
2794
- .np-prompt-interactive.np-item-prompt.positive:hover,
2795
- .np-prompt-interactive.np-item-prompt.discount:hover,
2796
- .np-prompt-interactive.np-item-prompt.savings:hover {
2794
+ .np-prompt-interactive.wds-list-item-prompt.positive:hover,
2795
+ .np-prompt-interactive.wds-list-item-prompt.discount:hover,
2796
+ .np-prompt-interactive.wds-list-item-prompt.savings:hover {
2797
2797
  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 95%, var(--color-sentiment-positive-primary));
2798
2798
  }
2799
- .np-prompt-interactive.np-item-prompt.positive:active,
2800
- .np-prompt-interactive.np-item-prompt.discount:active,
2801
- .np-prompt-interactive.np-item-prompt.savings:active {
2799
+ .np-prompt-interactive.wds-list-item-prompt.positive:active,
2800
+ .np-prompt-interactive.wds-list-item-prompt.discount:active,
2801
+ .np-prompt-interactive.wds-list-item-prompt.savings:active {
2802
2802
  background-color: color-mix(in srgb, var(--color-sentiment-positive-secondary) 90%, var(--color-sentiment-positive-primary));
2803
2803
  }
2804
- .np-item-prompt.neutral {
2804
+ .wds-list-item-prompt.neutral {
2805
2805
  background-color: rgba(134,167,189,0.10196);
2806
2806
  background-color: var(--color-background-neutral);
2807
2807
  color: #37517e;
2808
2808
  color: var(--color-content-primary);
2809
2809
  }
2810
- .np-item-prompt.neutral a {
2810
+ .wds-list-item-prompt.neutral a {
2811
2811
  color: #37517e;
2812
2812
  color: var(--color-content-primary);
2813
2813
  }
2814
- .np-prompt-interactive.np-item-prompt.neutral:hover {
2814
+ .np-prompt-interactive.wds-list-item-prompt.neutral:hover {
2815
2815
  background-color: var(--color-background-neutral-hover);
2816
2816
  }
2817
- .np-prompt-interactive.np-item-prompt.neutral:active {
2817
+ .np-prompt-interactive.wds-list-item-prompt.neutral:active {
2818
2818
  background-color: var(--color-background-neutral-active);
2819
2819
  }
2820
- .np-item-prompt.warning {
2820
+ .wds-list-item-prompt.warning {
2821
2821
  background-color: var(--color-sentiment-warning-secondary);
2822
2822
  color: var(--color-sentiment-warning-content);
2823
2823
  }
2824
- .np-item-prompt.warning a {
2824
+ .wds-list-item-prompt.warning a {
2825
2825
  color: var(--color-sentiment-warning-content);
2826
2826
  }
2827
- .np-item-prompt.warning a:hover {
2827
+ .wds-list-item-prompt.warning a:hover {
2828
2828
  color: var(--color-sentiment-warning-content-hover);
2829
2829
  }
2830
- .np-item-prompt.warning a:active {
2830
+ .wds-list-item-prompt.warning a:active {
2831
2831
  color: var(--color-sentiment-warning-content-active);
2832
2832
  }
2833
- .np-prompt-interactive.np-item-prompt.warning:hover {
2833
+ .np-prompt-interactive.wds-list-item-prompt.warning:hover {
2834
2834
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 90%, var(--color-sentiment-warning-primary));
2835
2835
  }
2836
- .np-prompt-interactive.np-item-prompt.warning:active {
2836
+ .np-prompt-interactive.wds-list-item-prompt.warning:active {
2837
2837
  background-color: color-mix(in srgb, var(--color-sentiment-warning-secondary) 80%, var(--color-sentiment-warning-primary));
2838
2838
  }
2839
2839
  .np-field-control {
@@ -5353,6 +5353,9 @@ html:not([dir="rtl"]) .np-navigation-option {
5353
5353
  width: 50px;
5354
5354
  padding: 2px;
5355
5355
  border-radius: 16px;
5356
+ -webkit-user-select: none;
5357
+ -moz-user-select: none;
5358
+ user-select: none;
5356
5359
  }
5357
5360
  .np-switch:focus {
5358
5361
  outline: none;
@@ -69,7 +69,7 @@ const PhoneNumberInput = ({
69
69
  } = reactIntl.useIntl();
70
70
  const [internalValue, setInternalValue] = React.useState(() => {
71
71
  const cleanValue = initialValue ? cleanNumber.cleanNumber(initialValue) : null;
72
- if (!cleanValue || !isValidPhoneNumber.isValidPhoneNumber(cleanValue)) {
72
+ if (!cleanValue || !isValidPhoneNumber.isValidPhoneNumber(cleanValue, 1)) {
73
73
  return {
74
74
  prefix: index.setDefaultPrefix(locale, countryCode),
75
75
  suffix: ''
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n className=\"form-control\"\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}
1
+ {"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n className=\"form-control\"\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}
@@ -65,7 +65,7 @@ const PhoneNumberInput = ({
65
65
  } = useIntl();
66
66
  const [internalValue, setInternalValue] = useState(() => {
67
67
  const cleanValue = initialValue ? cleanNumber(initialValue) : null;
68
- if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
68
+ if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {
69
69
  return {
70
70
  prefix: setDefaultPrefix(locale, countryCode),
71
71
  suffix: ''
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n className=\"form-control\"\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}
1
+ {"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n className=\"form-control\"\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","autoComplete","inputMode"],"mappings":"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"}