@cloudscape-design/components-themeable 3.0.638 → 3.0.640

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 (152) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/form-field/motion.scss +5 -2
  3. package/lib/internal/scss/form-field/styles.scss +11 -2
  4. package/lib/internal/scss/input/styles.scss +9 -0
  5. package/lib/internal/scss/internal/components/button-trigger/styles.scss +5 -0
  6. package/lib/internal/scss/internal/styles/forms/mixins.scss +11 -0
  7. package/lib/internal/scss/slider/mixins.scss +9 -4
  8. package/lib/internal/scss/textarea/styles.scss +4 -0
  9. package/lib/internal/scss/token-group/styles.scss +9 -2
  10. package/lib/internal/template/alert/index.d.ts.map +1 -1
  11. package/lib/internal/template/alert/index.js +9 -5
  12. package/lib/internal/template/alert/index.js.map +1 -1
  13. package/lib/internal/template/attribute-editor/interfaces.d.ts +4 -0
  14. package/lib/internal/template/attribute-editor/interfaces.d.ts.map +1 -1
  15. package/lib/internal/template/attribute-editor/interfaces.js.map +1 -1
  16. package/lib/internal/template/attribute-editor/row.d.ts.map +1 -1
  17. package/lib/internal/template/attribute-editor/row.js +4 -1
  18. package/lib/internal/template/attribute-editor/row.js.map +1 -1
  19. package/lib/internal/template/container/index.js +1 -1
  20. package/lib/internal/template/container/index.js.map +1 -1
  21. package/lib/internal/template/date-picker/index.d.ts.map +1 -1
  22. package/lib/internal/template/date-picker/index.js +2 -2
  23. package/lib/internal/template/date-picker/index.js.map +1 -1
  24. package/lib/internal/template/date-range-picker/index.d.ts.map +1 -1
  25. package/lib/internal/template/date-range-picker/index.js +2 -2
  26. package/lib/internal/template/date-range-picker/index.js.map +1 -1
  27. package/lib/internal/template/file-upload/interfaces.d.ts +14 -4
  28. package/lib/internal/template/file-upload/interfaces.d.ts.map +1 -1
  29. package/lib/internal/template/file-upload/interfaces.js.map +1 -1
  30. package/lib/internal/template/file-upload/internal.js +13 -7
  31. package/lib/internal/template/file-upload/internal.js.map +1 -1
  32. package/lib/internal/template/form/index.d.ts.map +1 -1
  33. package/lib/internal/template/form/index.js +17 -6
  34. package/lib/internal/template/form/index.js.map +1 -1
  35. package/lib/internal/template/form/internal.d.ts.map +1 -1
  36. package/lib/internal/template/form/internal.js +1 -14
  37. package/lib/internal/template/form/internal.js.map +1 -1
  38. package/lib/internal/template/form-field/index.d.ts.map +1 -1
  39. package/lib/internal/template/form-field/index.js +3 -2
  40. package/lib/internal/template/form-field/index.js.map +1 -1
  41. package/lib/internal/template/form-field/interfaces.d.ts +12 -1
  42. package/lib/internal/template/form-field/interfaces.d.ts.map +1 -1
  43. package/lib/internal/template/form-field/interfaces.js.map +1 -1
  44. package/lib/internal/template/form-field/internal.d.ts +9 -3
  45. package/lib/internal/template/form-field/internal.d.ts.map +1 -1
  46. package/lib/internal/template/form-field/internal.js +39 -13
  47. package/lib/internal/template/form-field/internal.js.map +1 -1
  48. package/lib/internal/template/form-field/styles.css.js +23 -19
  49. package/lib/internal/template/form-field/styles.scoped.css +45 -29
  50. package/lib/internal/template/form-field/styles.selectors.js +23 -19
  51. package/lib/internal/template/form-field/util.d.ts +3 -2
  52. package/lib/internal/template/form-field/util.d.ts.map +1 -1
  53. package/lib/internal/template/form-field/util.js +4 -3
  54. package/lib/internal/template/form-field/util.js.map +1 -1
  55. package/lib/internal/template/input/index.d.ts.map +1 -1
  56. package/lib/internal/template/input/index.js +2 -1
  57. package/lib/internal/template/input/index.js.map +1 -1
  58. package/lib/internal/template/input/internal.d.ts.map +1 -1
  59. package/lib/internal/template/input/internal.js +4 -1
  60. package/lib/internal/template/input/internal.js.map +1 -1
  61. package/lib/internal/template/input/styles.css.js +13 -12
  62. package/lib/internal/template/input/styles.scoped.css +46 -30
  63. package/lib/internal/template/input/styles.selectors.js +13 -12
  64. package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts +12 -12
  65. package/lib/internal/template/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
  66. package/lib/internal/template/internal/analytics/components/analytics-funnel.js +38 -25
  67. package/lib/internal/template/internal/analytics/components/analytics-funnel.js.map +1 -1
  68. package/lib/internal/template/internal/analytics/context/analytics-context.d.ts +7 -2
  69. package/lib/internal/template/internal/analytics/context/analytics-context.d.ts.map +1 -1
  70. package/lib/internal/template/internal/analytics/context/analytics-context.js.map +1 -1
  71. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts +5 -1
  72. package/lib/internal/template/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  73. package/lib/internal/template/internal/analytics/hooks/use-funnel.js +9 -5
  74. package/lib/internal/template/internal/analytics/hooks/use-funnel.js.map +1 -1
  75. package/lib/internal/template/internal/analytics/interfaces.d.ts +23 -37
  76. package/lib/internal/template/internal/analytics/interfaces.d.ts.map +1 -1
  77. package/lib/internal/template/internal/analytics/interfaces.js.map +1 -1
  78. package/lib/internal/template/internal/base-component/index.d.ts +1 -1
  79. package/lib/internal/template/internal/base-component/index.d.ts.map +1 -1
  80. package/lib/internal/template/internal/base-component/index.js +1 -1
  81. package/lib/internal/template/internal/base-component/index.js.map +1 -1
  82. package/lib/internal/template/internal/components/button-trigger/index.d.ts +1 -0
  83. package/lib/internal/template/internal/components/button-trigger/index.d.ts.map +1 -1
  84. package/lib/internal/template/internal/components/button-trigger/index.js +2 -2
  85. package/lib/internal/template/internal/components/button-trigger/index.js.map +1 -1
  86. package/lib/internal/template/internal/components/button-trigger/styles.css.js +11 -10
  87. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +35 -24
  88. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +11 -10
  89. package/lib/internal/template/internal/components/responsive-text/index.d.ts +1 -1
  90. package/lib/internal/template/internal/components/responsive-text/index.d.ts.map +1 -1
  91. package/lib/internal/template/internal/components/responsive-text/index.js +9 -4
  92. package/lib/internal/template/internal/components/responsive-text/index.js.map +1 -1
  93. package/lib/internal/template/internal/context/form-field-context.d.ts +14 -1
  94. package/lib/internal/template/internal/context/form-field-context.d.ts.map +1 -1
  95. package/lib/internal/template/internal/context/form-field-context.js +1 -1
  96. package/lib/internal/template/internal/context/form-field-context.js.map +1 -1
  97. package/lib/internal/template/internal/environment.js +1 -1
  98. package/lib/internal/template/internal/environment.json +1 -1
  99. package/lib/internal/template/link/internal.d.ts.map +1 -1
  100. package/lib/internal/template/link/internal.js +9 -3
  101. package/lib/internal/template/link/internal.js.map +1 -1
  102. package/lib/internal/template/modal/body-scroll.d.ts.map +1 -1
  103. package/lib/internal/template/modal/body-scroll.js +5 -0
  104. package/lib/internal/template/modal/body-scroll.js.map +1 -1
  105. package/lib/internal/template/pie-chart/responsive-text.d.ts.map +1 -1
  106. package/lib/internal/template/pie-chart/responsive-text.js +5 -1
  107. package/lib/internal/template/pie-chart/responsive-text.js.map +1 -1
  108. package/lib/internal/template/select/parts/filter.d.ts +1 -1
  109. package/lib/internal/template/select/parts/filter.d.ts.map +1 -1
  110. package/lib/internal/template/select/parts/trigger.d.ts.map +1 -1
  111. package/lib/internal/template/select/parts/trigger.js +2 -2
  112. package/lib/internal/template/select/parts/trigger.js.map +1 -1
  113. package/lib/internal/template/test-utils/dom/file-upload/index.d.ts +2 -0
  114. package/lib/internal/template/test-utils/dom/file-upload/index.js +6 -0
  115. package/lib/internal/template/test-utils/dom/file-upload/index.js.map +1 -1
  116. package/lib/internal/template/test-utils/dom/form-field/index.d.ts +1 -0
  117. package/lib/internal/template/test-utils/dom/form-field/index.js +3 -0
  118. package/lib/internal/template/test-utils/dom/form-field/index.js.map +1 -1
  119. package/lib/internal/template/test-utils/selectors/file-upload/index.d.ts +2 -0
  120. package/lib/internal/template/test-utils/selectors/file-upload/index.js +6 -0
  121. package/lib/internal/template/test-utils/selectors/file-upload/index.js.map +1 -1
  122. package/lib/internal/template/test-utils/selectors/form-field/index.d.ts +1 -0
  123. package/lib/internal/template/test-utils/selectors/form-field/index.js +3 -0
  124. package/lib/internal/template/test-utils/selectors/form-field/index.js.map +1 -1
  125. package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
  126. package/lib/internal/template/textarea/index.d.ts.map +1 -1
  127. package/lib/internal/template/textarea/index.js +2 -1
  128. package/lib/internal/template/textarea/index.js.map +1 -1
  129. package/lib/internal/template/textarea/styles.css.js +5 -4
  130. package/lib/internal/template/textarea/styles.scoped.css +23 -12
  131. package/lib/internal/template/textarea/styles.selectors.js +5 -4
  132. package/lib/internal/template/token-group/styles.css.js +9 -8
  133. package/lib/internal/template/token-group/styles.scoped.css +27 -16
  134. package/lib/internal/template/token-group/styles.selectors.js +9 -8
  135. package/lib/internal/template/token-group/token.d.ts +3 -1
  136. package/lib/internal/template/token-group/token.d.ts.map +1 -1
  137. package/lib/internal/template/token-group/token.js +8 -5
  138. package/lib/internal/template/token-group/token.js.map +1 -1
  139. package/lib/internal/template/wizard/analytics.d.ts +2 -1
  140. package/lib/internal/template/wizard/analytics.d.ts.map +1 -1
  141. package/lib/internal/template/wizard/analytics.js +7 -3
  142. package/lib/internal/template/wizard/analytics.js.map +1 -1
  143. package/lib/internal/template/wizard/index.js +1 -1
  144. package/lib/internal/template/wizard/index.js.map +1 -1
  145. package/lib/internal/template/wizard/internal.d.ts.map +1 -1
  146. package/lib/internal/template/wizard/internal.js +2 -2
  147. package/lib/internal/template/wizard/internal.js.map +1 -1
  148. package/lib/internal/template/wizard/wizard-form.d.ts +4 -2
  149. package/lib/internal/template/wizard/wizard-form.d.ts.map +1 -1
  150. package/lib/internal/template/wizard/wizard-form.js +31 -19
  151. package/lib/internal/template/wizard/wizard-form.js.map +1 -1
  152. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EA0Ba,EACb,GAAwB,EACxB,EAAE;QA5BF,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,SAAS,EACT,cAAc,OAEH,EADR,IAAI,cAzBT,kUA0BC,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,SAAS;QACT,cAAc,OAEhB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,IAC7B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalInput from './internal';\nimport { InputProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n controlId,\n clearAriaLabel,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n controlId,\n clearAriaLabel,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAO,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CACE,EA2Ba,EACb,GAAwB,EACxB,EAAE;QA7BF,EACE,KAAK,EACL,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,SAAS,EACT,YAAY,GAAG,IAAI,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,yBAAyB,EACzB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,cAAc,OAEH,EADR,IAAI,cA1BT,6UA2BC,CADQ;IAIT,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,yBAAyB,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;KACrG,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,CAAC,GAAG,IAAsC;;YAC7C,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,MAAM;;YACJ,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;QAC7B,CAAC;KACF,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,GAAG,EAAE,QAAQ,kDAER,SAAS,GACT,kBAAkB,KACrB,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,yBAAyB;QACzB,IAAI;QACJ,SAAS;QACT,OAAO;QACP,QAAQ;QACR,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,UAAU;QACV,KAAK;QACL,eAAe;QACf,cAAc;QACd,OAAO;QACP,OAAO;QACP,SAAS;QACT,cAAc,OAEhB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,uBAAuB,EAAE,IAAI,IAC7B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { Ref, useImperativeHandle, useRef } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalInput from './internal';\nimport { InputProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { InputProps };\n\nconst Input = React.forwardRef(\n (\n {\n value,\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n spellcheck,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n ariaRequired,\n name,\n placeholder,\n autoFocus,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n ...rest\n }: InputProps,\n ref: Ref<InputProps.Ref>\n ) => {\n const baseComponentProps = useBaseComponent('Input', {\n props: { autoComplete, autoFocus, disableBrowserAutocorrect, inputMode, readOnly, spellcheck, type },\n });\n const baseProps = getBaseProps(rest);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useImperativeHandle(\n ref,\n () => ({\n focus(...args: Parameters<HTMLElement['focus']>) {\n inputRef.current?.focus(...args);\n },\n select() {\n inputRef.current?.select();\n },\n }),\n [inputRef]\n );\n\n return (\n <InternalInput\n ref={inputRef}\n {...{\n ...baseProps,\n ...baseComponentProps,\n autoComplete,\n ariaLabel,\n ariaRequired,\n autoFocus,\n disabled,\n disableBrowserAutocorrect,\n name,\n onKeyDown,\n onKeyUp,\n onChange,\n onBlur,\n onFocus,\n placeholder,\n readOnly,\n type,\n step,\n inputMode,\n spellcheck,\n value,\n ariaDescribedby,\n ariaLabelledby,\n invalid,\n warning,\n controlId,\n clearAriaLabel,\n }}\n className={clsx(styles.root, baseProps.className)}\n __inheritFormFieldProps={true}\n />\n );\n }\n);\n\napplyDisplayName(Input, 'Input');\nexport default Input;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AA8JD,wBAA+C"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAA6C,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAgB,MAAM,4BAA4B,CAAC;AAG9E,OAAO,EAAE,+BAA+B,EAAuB,MAAM,wCAAwC,CAAC;AAC9G,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAIlF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,MAAM,CAAC,EACxB,gBAAgB,EAChB,+BAA+B,EAC/B,0BAA0B;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,EAAE,yBAAyB,CAAC;QAAE,aAAa,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAE/E,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;;AAiKD,wBAA+C"}
@@ -28,7 +28,9 @@ function InternalInput(_a, ref) {
28
28
  __rightIcon = __rightIcon !== null && __rightIcon !== void 0 ? __rightIcon : searchProps.__rightIcon;
29
29
  __onRightIconClick = __onRightIconClick !== null && __onRightIconClick !== void 0 ? __onRightIconClick : searchProps.__onRightIconClick;
30
30
  const formFieldContext = useFormFieldContext(rest);
31
- const { ariaLabelledby, ariaDescribedby, controlId, invalid } = __inheritFormFieldProps ? formFieldContext : rest;
31
+ const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps
32
+ ? formFieldContext
33
+ : rest;
32
34
  const attributes = Object.assign({ 'aria-label': ariaLabel,
33
35
  // aria-labelledby has precedence over aria-label in accessible name calculation.
34
36
  // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.
@@ -38,6 +40,7 @@ function InternalInput(_a, ref) {
38
40
  autoFocus, id: controlId, className: clsx(styles.input, type && styles[`input-type-${type}`], __rightIcon && styles['input-has-icon-right'], __leftIcon && styles['input-has-icon-left'], __noBorderRadius && styles['input-has-no-border-radius'], {
39
41
  [styles['input-readonly']]: readOnly,
40
42
  [styles['input-invalid']]: invalid,
43
+ [styles['input-warning']]: warning && !invalid,
41
44
  }), autoComplete: convertAutoComplete(autoComplete), disabled,
42
45
  readOnly,
43
46
  type,
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport InternalButton from '../button/internal';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../i18n/context';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n __nativeAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid } = __inheritFormFieldProps ? formFieldContext : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n onBlur && fireNonCancelableEvent(onBlur);\n __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n ...__nativeAttributes,\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <input ref={mergedRef} {...attributes} />\n {__rightIcon && (\n <span className={styles['input-icon-right']}>\n <InternalButton\n // Used for test utils\n // eslint-disable-next-line react/forbid-component-props\n className={styles['input-button-right']}\n variant=\"inline-icon\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { Ref, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport InternalButton from '../button/internal';\nimport { fireNonCancelableEvent, fireKeyboardEvent, NonCancelableEventHandler } from '../internal/events';\nimport { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from './interfaces';\nimport { BaseComponentProps, getBaseProps } from '../internal/base-component';\nimport { useSearchProps, convertAutoComplete } from './utils';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport styles from './styles.css.js';\nimport { useInternalI18n } from '../i18n/context';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n Omit<InputProps, 'type'>,\n InputAutoCorrect,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n type?: InputProps['type'] | 'visualSearch';\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __onRightIconClick?: () => void;\n\n __nativeAttributes?: React.InputHTMLAttributes<HTMLInputElement>;\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n\n __inheritFormFieldProps?: boolean;\n}\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n clearAriaLabel: clearAriaLabelOverride,\n name,\n value,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n spellcheck,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n ariaRequired,\n\n __rightIcon,\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n __nativeAttributes,\n __internalRootRef,\n __inheritFormFieldProps,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('input');\n const fireDelayedInput = useDebounceCallback((value: string) => fireNonCancelableEvent(__onDelayedInput, { value }));\n\n const handleChange = (value: string) => {\n fireDelayedInput(value);\n fireNonCancelableEvent(onChange, { value });\n };\n\n const inputRef = useRef<HTMLInputElement>(null);\n const searchProps = useSearchProps(type, disabled, readOnly, value, inputRef, handleChange);\n __leftIcon = __leftIcon ?? searchProps.__leftIcon;\n __rightIcon = __rightIcon ?? searchProps.__rightIcon;\n __onRightIconClick = __onRightIconClick ?? searchProps.__onRightIconClick;\n\n const formFieldContext = useFormFieldContext(rest);\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = __inheritFormFieldProps\n ? formFieldContext\n : rest;\n\n const attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n 'aria-labelledby': ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n name,\n placeholder,\n autoFocus,\n id: controlId,\n className: clsx(\n styles.input,\n type && styles[`input-type-${type}`],\n __rightIcon && styles['input-has-icon-right'],\n __leftIcon && styles['input-has-icon-left'],\n __noBorderRadius && styles['input-has-no-border-radius'],\n {\n [styles['input-readonly']]: readOnly,\n [styles['input-invalid']]: invalid,\n [styles['input-warning']]: warning && !invalid,\n }\n ),\n autoComplete: convertAutoComplete(autoComplete),\n disabled,\n readOnly,\n type,\n step,\n inputMode,\n spellCheck: spellcheck,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n // We set a default value on the component in order to force it into the controlled mode.\n value: value ?? '',\n onChange: onChange && (event => handleChange(event.target.value)),\n onBlur: e => {\n onBlur && fireNonCancelableEvent(onBlur);\n __onBlurWithDetail && fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: e.relatedTarget });\n },\n onFocus: onFocus && (() => fireNonCancelableEvent(onFocus)),\n ...__nativeAttributes,\n };\n\n if (type === 'number') {\n // Chrome and Safari have a weird built-in behavior of letting focused\n // number inputs be controlled by scrolling on them. However, they don't\n // lock the browser's scroll, so it's very easy to accidentally increment\n // the input while scrolling down the page.\n attributes.onWheel = event => event.currentTarget.blur();\n }\n\n if (disableBrowserAutocorrect) {\n attributes.autoCorrect = 'off';\n attributes.autoCapitalize = 'off';\n }\n\n // ensure aria properties are string literal \"true\"\n if (ariaRequired) {\n attributes['aria-required'] = 'true';\n }\n if (invalid) {\n attributes['aria-invalid'] = 'true';\n }\n\n const mergedRef = useMergeRefs(ref, inputRef);\n\n // type = \"visualSearch\" renders a type=\"text' input\n if (attributes.type === 'visualSearch') {\n attributes.type = 'text';\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={styles['input-icon-left']}>\n <InternalIcon name={__leftIcon} variant={disabled || readOnly ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <input ref={mergedRef} {...attributes} />\n {__rightIcon && (\n <span className={styles['input-icon-right']}>\n <InternalButton\n // Used for test utils\n // eslint-disable-next-line react/forbid-component-props\n className={styles['input-button-right']}\n variant=\"inline-icon\"\n formAction=\"none\"\n iconName={__rightIcon}\n onClick={__onRightIconClick}\n ariaLabel={i18n('clearAriaLabel', clearAriaLabelOverride)}\n disabled={disabled}\n />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
@@ -1,17 +1,18 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_2rhyz_1p4ga_99",
5
- "input": "awsui_input_2rhyz_1p4ga_103",
6
- "input-readonly": "awsui_input-readonly_2rhyz_1p4ga_153",
7
- "input-invalid": "awsui_input-invalid_2rhyz_1p4ga_220",
8
- "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1p4ga_231",
9
- "input-type-search": "awsui_input-type-search_2rhyz_1p4ga_236",
10
- "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1p4ga_252",
11
- "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1p4ga_255",
12
- "input-container": "awsui_input-container_2rhyz_1p4ga_262",
13
- "input-icon-left": "awsui_input-icon-left_2rhyz_1p4ga_267",
14
- "input-icon-right": "awsui_input-icon-right_2rhyz_1p4ga_274",
15
- "input-button-right": "awsui_input-button-right_2rhyz_1p4ga_280"
4
+ "root": "awsui_root_2rhyz_2m90q_99",
5
+ "input": "awsui_input_2rhyz_2m90q_103",
6
+ "input-readonly": "awsui_input-readonly_2rhyz_2m90q_153",
7
+ "input-invalid": "awsui_input-invalid_2rhyz_2m90q_220",
8
+ "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_2m90q_231",
9
+ "input-warning": "awsui_input-warning_2rhyz_2m90q_236",
10
+ "input-type-search": "awsui_input-type-search_2rhyz_2m90q_252",
11
+ "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_2m90q_268",
12
+ "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_2m90q_271",
13
+ "input-container": "awsui_input-container_2rhyz_2m90q_278",
14
+ "input-icon-left": "awsui_input-icon-left_2rhyz_2m90q_283",
15
+ "input-icon-right": "awsui_input-icon-right_2rhyz_2m90q_290",
16
+ "input-button-right": "awsui_input-button-right_2rhyz_2m90q_296"
16
17
  };
17
18
 
@@ -96,11 +96,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
96
96
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
97
97
  SPDX-License-Identifier: Apache-2.0
98
98
  */
99
- .awsui_root_2rhyz_1p4ga_99:not(#\9) {
99
+ .awsui_root_2rhyz_2m90q_99:not(#\9) {
100
100
  /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
101
101
  }
102
102
 
103
- .awsui_input_2rhyz_1p4ga_103:not(#\9) {
103
+ .awsui_input_2rhyz_2m90q_103:not(#\9) {
104
104
  border-collapse: separate;
105
105
  border-spacing: 0;
106
106
  box-sizing: border-box;
@@ -151,36 +151,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
151
151
  line-height: var(--line-height-body-m-2zx78l, 22px);
152
152
  block-size: var(--size-vertical-input-ubbp77, 32px);
153
153
  }
154
- .awsui_input_2rhyz_1p4ga_103.awsui_input-readonly_2rhyz_1p4ga_153:not(#\9) {
154
+ .awsui_input_2rhyz_2m90q_103.awsui_input-readonly_2rhyz_2m90q_153:not(#\9) {
155
155
  background-color: var(--color-background-input-default-w7mbz6, #ffffff);
156
156
  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
157
157
  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
158
158
  }
159
- .awsui_input_2rhyz_1p4ga_103:not(#\9)::-webkit-input-placeholder {
159
+ .awsui_input_2rhyz_2m90q_103:not(#\9)::-webkit-input-placeholder {
160
160
  color: var(--color-text-input-placeholder-epedqe, #687078);
161
161
  font-style: italic;
162
162
  -webkit-user-select: none;
163
163
  user-select: none;
164
164
  }
165
- .awsui_input_2rhyz_1p4ga_103:not(#\9)::-ms-input-placeholder {
165
+ .awsui_input_2rhyz_2m90q_103:not(#\9)::-ms-input-placeholder {
166
166
  color: var(--color-text-input-placeholder-epedqe, #687078);
167
167
  font-style: italic;
168
168
  }
169
- .awsui_input_2rhyz_1p4ga_103:not(#\9)::-moz-placeholder {
169
+ .awsui_input_2rhyz_2m90q_103:not(#\9)::-moz-placeholder {
170
170
  color: var(--color-text-input-placeholder-epedqe, #687078);
171
171
  font-style: italic;
172
172
  opacity: 1;
173
173
  }
174
- .awsui_input_2rhyz_1p4ga_103:not(#\9):-ms-input-placeholder {
174
+ .awsui_input_2rhyz_2m90q_103:not(#\9):-ms-input-placeholder {
175
175
  color: var(--color-text-input-placeholder-epedqe, #687078);
176
176
  font-style: italic;
177
177
  }
178
- .awsui_input_2rhyz_1p4ga_103:not(#\9):-moz-placeholder {
178
+ .awsui_input_2rhyz_2m90q_103:not(#\9):-moz-placeholder {
179
179
  color: var(--color-text-input-placeholder-epedqe, #687078);
180
180
  font-style: italic;
181
181
  opacity: 1;
182
182
  }
183
- .awsui_input_2rhyz_1p4ga_103:not(#\9):focus {
183
+ .awsui_input_2rhyz_2m90q_103:not(#\9):focus {
184
184
  outline: 2px dotted transparent;
185
185
  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
186
186
  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-focused-v6z9fd, #0073bb);
@@ -190,7 +190,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
190
190
  border-end-end-radius: var(--border-radius-input-hy50dp, 2px);
191
191
  box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-0k725q, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
192
192
  }
193
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled {
193
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled {
194
194
  background-color: var(--color-background-input-disabled-zfoobi, #eaeded);
195
195
  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
196
196
  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-border-input-disabled-v8bsvq, #eaeded);
@@ -198,29 +198,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
198
198
  cursor: auto;
199
199
  cursor: default;
200
200
  }
201
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-webkit-input-placeholder {
201
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-webkit-input-placeholder {
202
202
  color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
203
203
  -webkit-user-select: none;
204
204
  user-select: none;
205
205
  }
206
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-ms-input-placeholder {
206
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-ms-input-placeholder {
207
207
  color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
208
208
  }
209
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled::-moz-placeholder {
209
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled::-moz-placeholder {
210
210
  color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
211
211
  opacity: 1;
212
212
  }
213
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled:-ms-input-placeholder {
213
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled:-ms-input-placeholder {
214
214
  color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
215
215
  }
216
- .awsui_input_2rhyz_1p4ga_103:not(#\9):disabled:-moz-placeholder {
216
+ .awsui_input_2rhyz_2m90q_103:not(#\9):disabled:-moz-placeholder {
217
217
  color: var(--color-text-input-placeholder-disabled-ovndcz, #687078);
218
218
  opacity: 1;
219
219
  }
220
- .awsui_input_2rhyz_1p4ga_103:not(#\9):invalid {
220
+ .awsui_input_2rhyz_2m90q_103:not(#\9):invalid {
221
221
  box-shadow: none;
222
222
  }
223
- .awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220:not(#\9) {
223
+ .awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220:not(#\9) {
224
224
  color: var(--color-text-status-error-ofc4yr, #d13212);
225
225
  border-color: var(--color-text-status-error-ofc4yr, #d13212);
226
226
  padding-inline-start: calc(
@@ -228,58 +228,74 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
228
228
  );
229
229
  border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
230
230
  }
231
- .awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220:not(#\9):focus {
231
+ .awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220:not(#\9):focus {
232
232
  box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
233
233
  }
234
- .awsui_input_2rhyz_1p4ga_103.awsui_input-invalid_2rhyz_1p4ga_220.awsui_input-has-icon-left_2rhyz_1p4ga_231:not(#\9) {
234
+ .awsui_input_2rhyz_2m90q_103.awsui_input-invalid_2rhyz_2m90q_220.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
235
235
  padding-inline-start: calc(
236
236
  var(--space-field-icon-offset-llp3ak, 32px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
237
237
  );
238
238
  }
239
- .awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9) {
239
+ .awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236:not(#\9) {
240
+ color: var(--color-text-status-warning-azn00c, #906806);
241
+ border-color: var(--color-text-status-warning-azn00c, #906806);
242
+ padding-inline-start: calc(
243
+ var(--space-field-horizontal-cy5q05, 8px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
244
+ );
245
+ border-inline-start-width: var(--border-invalid-width-hp6noi, 4px);
246
+ }
247
+ .awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236:not(#\9):focus {
248
+ box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-v3635w, 1px) var(--color-border-item-focused-v8nq2m, #0073bb);
249
+ }
250
+ .awsui_input_2rhyz_2m90q_103.awsui_input-warning_2rhyz_2m90q_236.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
251
+ padding-inline-start: calc(
252
+ var(--space-field-icon-offset-llp3ak, 32px) - (var(--border-invalid-width-hp6noi, 4px) - var(--border-field-width-yoy972, 1px))
253
+ );
254
+ }
255
+ .awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9) {
240
256
  box-sizing: border-box;
241
257
  -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
242
258
  }
243
- .awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-ms-clear {
259
+ .awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-ms-clear {
244
260
  display: none;
245
261
  }
246
- .awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-webkit-search-decoration {
262
+ .awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-webkit-search-decoration {
247
263
  -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
248
264
  }
249
- .awsui_input_2rhyz_1p4ga_103.awsui_input-type-search_2rhyz_1p4ga_236:not(#\9)::-webkit-search-cancel-button {
265
+ .awsui_input_2rhyz_2m90q_103.awsui_input-type-search_2rhyz_2m90q_252:not(#\9)::-webkit-search-cancel-button {
250
266
  display: none;
251
267
  }
252
- .awsui_input_2rhyz_1p4ga_103.awsui_input-has-icon-left_2rhyz_1p4ga_231:not(#\9) {
268
+ .awsui_input_2rhyz_2m90q_103.awsui_input-has-icon-left_2rhyz_2m90q_231:not(#\9) {
253
269
  padding-inline-start: var(--space-field-icon-offset-llp3ak, 32px);
254
270
  }
255
- .awsui_input_2rhyz_1p4ga_103.awsui_input-has-icon-right_2rhyz_1p4ga_252:not(#\9) {
271
+ .awsui_input_2rhyz_2m90q_103.awsui_input-has-icon-right_2rhyz_2m90q_268:not(#\9) {
256
272
  padding-inline-end: var(--space-field-icon-offset-llp3ak, 32px);
257
273
  }
258
- .awsui_input_2rhyz_1p4ga_103.awsui_input-has-no-border-radius_2rhyz_1p4ga_255:not(#\9) {
274
+ .awsui_input_2rhyz_2m90q_103.awsui_input-has-no-border-radius_2rhyz_2m90q_271:not(#\9) {
259
275
  border-start-start-radius: var(--border-radius-dropdown-cw0ldi, 0px);
260
276
  border-start-end-radius: var(--border-radius-dropdown-cw0ldi, 0px);
261
277
  border-end-start-radius: var(--border-radius-dropdown-cw0ldi, 0px);
262
278
  border-end-end-radius: var(--border-radius-dropdown-cw0ldi, 0px);
263
279
  }
264
280
 
265
- .awsui_input-container_2rhyz_1p4ga_262:not(#\9) {
281
+ .awsui_input-container_2rhyz_2m90q_278:not(#\9) {
266
282
  display: flex;
267
283
  position: relative;
268
284
  }
269
285
 
270
- .awsui_input-icon-left_2rhyz_1p4ga_267:not(#\9) {
286
+ .awsui_input-icon-left_2rhyz_2m90q_283:not(#\9) {
271
287
  position: absolute;
272
288
  pointer-events: none;
273
289
  inset-inline-start: var(--space-field-horizontal-cy5q05, 8px);
274
290
  inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
275
291
  }
276
292
 
277
- .awsui_input-icon-right_2rhyz_1p4ga_274:not(#\9) {
293
+ .awsui_input-icon-right_2rhyz_2m90q_290:not(#\9) {
278
294
  position: absolute;
279
295
  inset-block-start: calc(50% - var(--line-height-body-m-2zx78l, 22px) / 2);
280
296
  inset-inline-end: calc(var(--space-field-horizontal-cy5q05, 8px) - var(--space-xxs-9rrxti, 4px));
281
297
  }
282
298
 
283
- .awsui_input-button-right_2rhyz_1p4ga_280:not(#\9) {
299
+ .awsui_input-button-right_2rhyz_2m90q_296:not(#\9) {
284
300
  /* used in test-utils */
285
301
  }
@@ -2,17 +2,18 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_2rhyz_1p4ga_99",
6
- "input": "awsui_input_2rhyz_1p4ga_103",
7
- "input-readonly": "awsui_input-readonly_2rhyz_1p4ga_153",
8
- "input-invalid": "awsui_input-invalid_2rhyz_1p4ga_220",
9
- "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_1p4ga_231",
10
- "input-type-search": "awsui_input-type-search_2rhyz_1p4ga_236",
11
- "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_1p4ga_252",
12
- "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_1p4ga_255",
13
- "input-container": "awsui_input-container_2rhyz_1p4ga_262",
14
- "input-icon-left": "awsui_input-icon-left_2rhyz_1p4ga_267",
15
- "input-icon-right": "awsui_input-icon-right_2rhyz_1p4ga_274",
16
- "input-button-right": "awsui_input-button-right_2rhyz_1p4ga_280"
5
+ "root": "awsui_root_2rhyz_2m90q_99",
6
+ "input": "awsui_input_2rhyz_2m90q_103",
7
+ "input-readonly": "awsui_input-readonly_2rhyz_2m90q_153",
8
+ "input-invalid": "awsui_input-invalid_2rhyz_2m90q_220",
9
+ "input-has-icon-left": "awsui_input-has-icon-left_2rhyz_2m90q_231",
10
+ "input-warning": "awsui_input-warning_2rhyz_2m90q_236",
11
+ "input-type-search": "awsui_input-type-search_2rhyz_2m90q_252",
12
+ "input-has-icon-right": "awsui_input-has-icon-right_2rhyz_2m90q_268",
13
+ "input-has-no-border-radius": "awsui_input-has-no-border-radius_2rhyz_2m90q_271",
14
+ "input-container": "awsui_input-container_2rhyz_2m90q_278",
15
+ "input-icon-left": "awsui_input-icon-left_2rhyz_2m90q_283",
16
+ "input-icon-right": "awsui_input-icon-right_2rhyz_2m90q_290",
17
+ "input-button-right": "awsui_input-button-right_2rhyz_2m90q_296"
17
18
  };
18
19
 
@@ -1,33 +1,33 @@
1
1
  import React from 'react';
2
2
  import { FunnelStepContextValue, FunnelSubStepContextValue } from '../context/analytics-context';
3
- import { AnalyticsMetadata, FunnelProps, FunnelStepProps, StepConfiguration } from '../interfaces';
3
+ import { AnalyticsMetadata, FunnelStartProps, FunnelStepProps, StepConfiguration } from '../interfaces';
4
4
  export declare const FUNNEL_VERSION = "1.4";
5
5
  interface AnalyticsFunnelProps {
6
6
  children?: React.ReactNode;
7
7
  stepConfiguration?: StepConfiguration[];
8
8
  funnelNameSelectors?: string[];
9
- funnelType: FunnelProps['funnelType'];
10
- optionalStepNumbers: FunnelProps['optionalStepNumbers'];
11
- totalFunnelSteps: FunnelProps['totalFunnelSteps'];
12
- instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
13
- flowType?: AnalyticsMetadata['flowType'];
14
- errorContext?: AnalyticsMetadata['errorContext'];
9
+ funnelType: FunnelStartProps['funnelType'];
10
+ optionalStepNumbers: FunnelStartProps['optionalStepNumbers'];
11
+ totalFunnelSteps: FunnelStartProps['totalFunnelSteps'];
12
+ funnelIdentifier?: AnalyticsMetadata['instanceIdentifier'];
13
+ funnelFlowType?: AnalyticsMetadata['flowType'];
14
+ funnelErrorContext?: AnalyticsMetadata['errorContext'];
15
15
  }
16
16
  export declare const AnalyticsFunnel: (props: AnalyticsFunnelProps) => JSX.Element;
17
17
  export declare const CREATION_EDIT_FLOW_DONE_EVENT_NAME = "awsui-creation-edit-flow-done";
18
18
  interface AnalyticsFunnelStepProps {
19
- instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
20
- errorContext?: AnalyticsMetadata['errorContext'];
19
+ stepIdentifier?: AnalyticsMetadata['instanceIdentifier'];
20
+ stepErrorContext?: AnalyticsMetadata['errorContext'];
21
21
  children?: React.ReactNode | ((props: FunnelStepContextValue) => React.ReactNode);
22
22
  stepNameSelector?: FunnelStepProps['stepNameSelector'];
23
23
  stepNumber: FunnelStepProps['stepNumber'];
24
24
  }
25
25
  export declare const AnalyticsFunnelStep: (props: AnalyticsFunnelStepProps) => JSX.Element;
26
26
  interface AnalyticsFunnelSubStepProps {
27
- instanceIdentifier?: AnalyticsMetadata['instanceIdentifier'];
28
- errorContext?: AnalyticsMetadata['errorContext'];
27
+ subStepIdentifier?: AnalyticsMetadata['instanceIdentifier'];
28
+ subStepErrorContext?: AnalyticsMetadata['errorContext'];
29
29
  children?: React.ReactNode | ((props: FunnelSubStepContextValue) => React.ReactNode);
30
30
  }
31
- export declare const AnalyticsFunnelSubStep: ({ children, instanceIdentifier }: AnalyticsFunnelSubStepProps) => JSX.Element;
31
+ export declare const AnalyticsFunnelSubStep: ({ children, subStepIdentifier, subStepErrorContext, }: AnalyticsFunnelSubStepProps) => JSX.Element;
32
32
  export {};
33
33
  //# sourceMappingURL=analytics-funnel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAavB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,mBAAmB,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAC;IACxD,gBAAgB,EAAE,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAkLlF,UAAU,wBAAwB;IAChC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AA4KF,UAAU,2BAA2B;IACnC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,qCAAsC,2BAA2B,gBAkGnG,CAAC"}
1
+ {"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"","sources":["../../../../../src/internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAEvE,OAAO,EAKL,sBAAsB,EAEtB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAavB,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,UAAU,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;IAC3C,mBAAmB,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;IAC7D,gBAAgB,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAC/C,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CACxD;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAa1D,CAAC;AACF,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAsMlF,UAAU,wBAAwB;IAChC,cAAc,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IACzD,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACvD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,gBAMlE,CAAC;AAyLF,UAAU,2BAA2B;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC5D,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,sBAAsB,0DAIhC,2BAA2B,gBAmG7B,CAAC"}
@@ -35,11 +35,11 @@ const dispatchCreateEditFlowDoneEvent = () => {
35
35
  // probably because of cross-origin error, then do not dispatch the event
36
36
  }
37
37
  };
38
- const onFunnelCancelled = ({ funnelInteractionId }) => {
39
- FunnelMetrics.funnelCancelled({ funnelInteractionId });
38
+ const onFunnelCancelled = ({ funnelInteractionId, funnelIdentifier, }) => {
39
+ FunnelMetrics.funnelCancelled({ funnelInteractionId, funnelIdentifier });
40
40
  };
41
- const onFunnelComplete = ({ funnelInteractionId }) => {
42
- FunnelMetrics.funnelComplete({ funnelInteractionId });
41
+ const onFunnelComplete = ({ funnelInteractionId, funnelIdentifier, }) => {
42
+ FunnelMetrics.funnelComplete({ funnelInteractionId, funnelIdentifier });
43
43
  dispatchCreateEditFlowDoneEvent();
44
44
  };
45
45
  function evaluateSelectors(selectors, defaultSelector) {
@@ -88,17 +88,22 @@ const InnerAnalyticsFunnel = (_a) => {
88
88
  // Reset the state, in case the component was re-mounted.
89
89
  funnelState.current = 'default';
90
90
  const singleStepFlowStepConfiguration = [
91
- { number: 1, isOptional: false, name: (_a = getNameFromSelector(funnelNameSelector.current)) !== null && _a !== void 0 ? _a : '' },
91
+ {
92
+ number: 1,
93
+ isOptional: false,
94
+ name: (_a = getNameFromSelector(funnelNameSelector.current)) !== null && _a !== void 0 ? _a : '',
95
+ stepIdentifier: props.funnelIdentifier,
96
+ },
92
97
  ];
93
98
  funnelInteractionId = FunnelMetrics.funnelStart({
94
- instanceIdentifier: props.instanceIdentifier,
95
- flowType: props.flowType,
99
+ funnelIdentifier: props.funnelIdentifier,
100
+ flowType: props.funnelFlowType,
96
101
  funnelNameSelector: funnelNameSelector.current,
97
102
  optionalStepNumbers: props.optionalStepNumbers,
98
103
  funnelType: props.funnelType,
99
104
  totalFunnelSteps: props.totalFunnelSteps,
100
105
  componentVersion: PACKAGE_VERSION,
101
- theme: isVisualRefresh ? 'vr' : 'classic',
106
+ componentTheme: isVisualRefresh ? 'vr' : 'classic',
102
107
  funnelVersion: FUNNEL_VERSION,
103
108
  stepConfiguration: stepConfiguration !== null && stepConfiguration !== void 0 ? stepConfiguration : singleStepFlowStepConfiguration,
104
109
  });
@@ -115,14 +120,14 @@ const InnerAnalyticsFunnel = (_a) => {
115
120
  }
116
121
  if (funnelState.current === 'validating') {
117
122
  // Finish the validation phase early.
118
- onFunnelComplete({ funnelInteractionId });
123
+ onFunnelComplete({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
119
124
  funnelState.current = 'complete';
120
125
  }
121
126
  if (funnelState.current === 'complete') {
122
- FunnelMetrics.funnelSuccessful({ funnelInteractionId });
127
+ FunnelMetrics.funnelSuccessful({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
123
128
  }
124
129
  else {
125
- onFunnelCancelled({ funnelInteractionId });
130
+ onFunnelCancelled({ funnelInteractionId, funnelIdentifier: props.funnelIdentifier });
126
131
  funnelState.current = 'cancelled';
127
132
  }
128
133
  };
@@ -166,6 +171,9 @@ const InnerAnalyticsFunnel = (_a) => {
166
171
  const funnelCancel = () => { };
167
172
  const funnelContextValue = {
168
173
  funnelInteractionId,
174
+ funnelIdentifier: props.funnelIdentifier,
175
+ funnelFlowType: props.funnelFlowType,
176
+ funnelErrorContext: props.funnelErrorContext,
169
177
  setFunnelInteractionId,
170
178
  funnelType: props.funnelType,
171
179
  optionalStepNumbers: props.optionalStepNumbers,
@@ -194,11 +202,13 @@ export const AnalyticsFunnelStep = (props) => {
194
202
  function getSubStepConfiguration() {
195
203
  const subSteps = Array.from(document.querySelectorAll(getSubStepAllSelector()));
196
204
  const subStepConfiguration = subSteps.map((substep, index) => {
197
- var _a, _b, _c;
198
- const name = (_c = (_b = (_a = substep.querySelector(getSubStepNameSelector())) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
205
+ var _a, _b, _c, _d, _e;
206
+ const subStepIdentifier = (_b = (_a = substep === null || substep === void 0 ? void 0 : substep.__awsuiMetadata__) === null || _a === void 0 ? void 0 : _a.analytics) === null || _b === void 0 ? void 0 : _b.instanceIdentifier;
207
+ const name = (_e = (_d = (_c = substep.querySelector(getSubStepNameSelector())) === null || _c === void 0 ? void 0 : _c.innerText) === null || _d === void 0 ? void 0 : _d.trim()) !== null && _e !== void 0 ? _e : '';
199
208
  return {
200
209
  name,
201
210
  number: index + 1,
211
+ subStepIdentifier,
202
212
  };
203
213
  });
204
214
  return subStepConfiguration;
@@ -238,8 +248,8 @@ function useStepChangeListener(stepNumber, handler) {
238
248
  return { onStepChange: stepChangeCallback, subStepConfiguration };
239
249
  }
240
250
  const InnerAnalyticsFunnelStep = (_a) => {
241
- var { children, stepNumber, instanceIdentifier } = _a, rest = __rest(_a, ["children", "stepNumber", "instanceIdentifier"]);
242
- const { funnelInteractionId, funnelNameSelector, funnelState, funnelType } = useFunnel();
251
+ var { children, stepNumber, stepIdentifier, stepErrorContext } = _a, rest = __rest(_a, ["children", "stepNumber", "stepIdentifier", "stepErrorContext"]);
252
+ const { funnelInteractionId, funnelIdentifier, funnelNameSelector, funnelState, funnelType } = useFunnel();
243
253
  const parentStep = useFunnelStep();
244
254
  const parentStepExists = parentStep.isInStep;
245
255
  const parentStepFunnelInteractionId = parentStep.funnelInteractionId;
@@ -247,16 +257,14 @@ const InnerAnalyticsFunnelStep = (_a) => {
247
257
  const subStepCount = useRef(0);
248
258
  const stepNameSelector = rest.stepNameSelector || funnelNameSelector;
249
259
  const { onStepChange, subStepConfiguration } = useStepChangeListener(stepNumber, subStepConfiguration => {
250
- var _a;
251
260
  if (!funnelInteractionId) {
252
261
  return;
253
262
  }
254
- const stepName = (_a = getNameFromSelector(stepNameSelector)) !== null && _a !== void 0 ? _a : '';
255
263
  FunnelMetrics.funnelStepChange({
256
- instanceIdentifier,
264
+ stepIdentifier,
265
+ funnelIdentifier,
257
266
  funnelInteractionId,
258
267
  stepNumber,
259
- stepName,
260
268
  stepNameSelector,
261
269
  subStepAllSelector: getSubStepAllSelector(),
262
270
  totalSubSteps: subStepCount.current,
@@ -283,7 +291,8 @@ const InnerAnalyticsFunnelStep = (_a) => {
283
291
  const stepName = getNameFromSelector(stepNameSelector);
284
292
  if (funnelState.current === 'default') {
285
293
  FunnelMetrics.funnelStepStart({
286
- instanceIdentifier,
294
+ stepIdentifier,
295
+ funnelIdentifier,
287
296
  funnelInteractionId,
288
297
  stepNumber,
289
298
  stepName,
@@ -297,8 +306,9 @@ const InnerAnalyticsFunnelStep = (_a) => {
297
306
  // eslint-disable-next-line react-hooks/exhaustive-deps
298
307
  if (funnelState.current !== 'cancelled') {
299
308
  FunnelMetrics.funnelStepComplete({
300
- instanceIdentifier,
309
+ funnelIdentifier,
301
310
  funnelInteractionId,
311
+ stepIdentifier,
302
312
  stepNumber,
303
313
  stepName,
304
314
  stepNameSelector,
@@ -309,7 +319,8 @@ const InnerAnalyticsFunnelStep = (_a) => {
309
319
  }
310
320
  };
311
321
  }, [
312
- instanceIdentifier,
322
+ stepIdentifier,
323
+ funnelIdentifier,
313
324
  funnelInteractionId,
314
325
  stepNumber,
315
326
  stepNameSelector,
@@ -319,7 +330,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
319
330
  parentStepFunnelInteractionId,
320
331
  ]);
321
332
  const contextValue = {
322
- instanceIdentifier,
333
+ stepIdentifier,
323
334
  stepNumber,
324
335
  stepNameSelector,
325
336
  funnelStepProps,
@@ -328,6 +339,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
328
339
  funnelInteractionId,
329
340
  onStepChange,
330
341
  subStepConfiguration,
342
+ stepErrorContext,
331
343
  };
332
344
  /*
333
345
  If this step is inside another step which already reports events as part of an active
@@ -337,7 +349,7 @@ const InnerAnalyticsFunnelStep = (_a) => {
337
349
  const effectiveContextValue = parentStepExists && parentStepFunnelInteractionId ? parentStep : contextValue;
338
350
  return (React.createElement(FunnelStepContext.Provider, { value: effectiveContextValue }, typeof children === 'function' ? children(effectiveContextValue) : children));
339
351
  };
340
- export const AnalyticsFunnelSubStep = ({ children, instanceIdentifier }) => {
352
+ export const AnalyticsFunnelSubStep = ({ children, subStepIdentifier, subStepErrorContext, }) => {
341
353
  const subStepId = useUniqueId('substep');
342
354
  const subStepSelector = getSubStepSelector(subStepId);
343
355
  const subStepNameSelector = getSubStepNameSelector(subStepId);
@@ -349,7 +361,8 @@ export const AnalyticsFunnelSubStep = ({ children, instanceIdentifier }) => {
349
361
  const { funnelState, funnelInteractionId } = useFunnel();
350
362
  const { stepNumber, stepNameSelector } = useFunnelStep();
351
363
  const newContext = {
352
- instanceIdentifier,
364
+ subStepIdentifier,
365
+ subStepErrorContext,
353
366
  subStepSelector,
354
367
  subStepNameSelector,
355
368
  subStepId,