@cloudscape-design/components 3.0.74 → 3.0.76

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 (143) hide show
  1. package/alert/interfaces.d.ts +5 -0
  2. package/alert/interfaces.d.ts.map +1 -1
  3. package/alert/interfaces.js.map +1 -1
  4. package/alert/internal.d.ts +1 -1
  5. package/alert/internal.d.ts.map +1 -1
  6. package/alert/internal.js +2 -2
  7. package/alert/internal.js.map +1 -1
  8. package/annotation-context/annotation/styles.css.js +24 -24
  9. package/annotation-context/annotation/styles.scoped.css +30 -30
  10. package/annotation-context/annotation/styles.selectors.js +24 -24
  11. package/app-layout/visual-refresh/styles.css.js +59 -59
  12. package/app-layout/visual-refresh/styles.scoped.css +218 -218
  13. package/app-layout/visual-refresh/styles.selectors.js +59 -59
  14. package/attribute-editor/interfaces.d.ts +7 -0
  15. package/attribute-editor/interfaces.d.ts.map +1 -1
  16. package/attribute-editor/interfaces.js.map +1 -1
  17. package/attribute-editor/internal.d.ts.map +1 -1
  18. package/attribute-editor/internal.js +2 -2
  19. package/attribute-editor/internal.js.map +1 -1
  20. package/attribute-editor/row.d.ts +2 -1
  21. package/attribute-editor/row.d.ts.map +1 -1
  22. package/attribute-editor/row.js +5 -10
  23. package/attribute-editor/row.js.map +1 -1
  24. package/calendar/grid/index.d.ts +15 -3
  25. package/calendar/grid/index.d.ts.map +1 -1
  26. package/calendar/grid/index.js +19 -17
  27. package/calendar/grid/index.js.map +1 -1
  28. package/calendar/internal.d.ts.map +1 -1
  29. package/calendar/internal.js +5 -17
  30. package/calendar/internal.js.map +1 -1
  31. package/calendar/styles.css.js +18 -18
  32. package/calendar/styles.scoped.css +40 -38
  33. package/calendar/styles.selectors.js +18 -18
  34. package/calendar/utils/intl.d.ts +2 -3
  35. package/calendar/utils/intl.d.ts.map +1 -1
  36. package/calendar/utils/intl.js +6 -5
  37. package/calendar/utils/intl.js.map +1 -1
  38. package/calendar/utils/navigation.d.ts +6 -0
  39. package/calendar/utils/navigation.d.ts.map +1 -0
  40. package/calendar/utils/navigation.js +38 -0
  41. package/calendar/utils/navigation.js.map +1 -0
  42. package/date-picker/index.d.ts.map +1 -1
  43. package/date-picker/index.js +11 -14
  44. package/date-picker/index.js.map +1 -1
  45. package/date-picker/styles.css.js +6 -7
  46. package/date-picker/styles.scoped.css +7 -13
  47. package/date-picker/styles.selectors.js +6 -7
  48. package/date-range-picker/calendar/grids/grid.d.ts +14 -0
  49. package/date-range-picker/calendar/grids/grid.d.ts.map +1 -1
  50. package/date-range-picker/calendar/grids/grid.js +10 -6
  51. package/date-range-picker/calendar/grids/grid.js.map +1 -1
  52. package/date-range-picker/calendar/grids/index.d.ts +1 -3
  53. package/date-range-picker/calendar/grids/index.d.ts.map +1 -1
  54. package/date-range-picker/calendar/grids/index.js +10 -11
  55. package/date-range-picker/calendar/grids/index.js.map +1 -1
  56. package/date-range-picker/calendar/grids/styles.css.js +25 -25
  57. package/date-range-picker/calendar/grids/styles.scoped.css +45 -42
  58. package/date-range-picker/calendar/grids/styles.selectors.js +25 -25
  59. package/date-range-picker/calendar/header/index.d.ts +2 -2
  60. package/date-range-picker/calendar/header/index.d.ts.map +1 -1
  61. package/date-range-picker/calendar/header/index.js +13 -9
  62. package/date-range-picker/calendar/header/index.js.map +1 -1
  63. package/date-range-picker/calendar/index.d.ts.map +1 -1
  64. package/date-range-picker/calendar/index.js +5 -7
  65. package/date-range-picker/calendar/index.js.map +1 -1
  66. package/date-range-picker/dropdown.js +1 -1
  67. package/date-range-picker/dropdown.js.map +1 -1
  68. package/date-range-picker/interfaces.d.ts +4 -0
  69. package/date-range-picker/interfaces.d.ts.map +1 -1
  70. package/date-range-picker/interfaces.js.map +1 -1
  71. package/flashbar/index.d.ts.map +1 -1
  72. package/flashbar/index.js +105 -34
  73. package/flashbar/index.js.map +1 -1
  74. package/flashbar/styles.css.js +29 -22
  75. package/flashbar/styles.scoped.css +208 -86
  76. package/flashbar/styles.selectors.js +29 -22
  77. package/form/interfaces.d.ts +5 -0
  78. package/form/interfaces.d.ts.map +1 -1
  79. package/form/interfaces.js.map +1 -1
  80. package/form/internal.d.ts +1 -1
  81. package/form/internal.d.ts.map +1 -1
  82. package/form/internal.js +10 -5
  83. package/form/internal.js.map +1 -1
  84. package/input/internal.d.ts +2 -1
  85. package/input/internal.d.ts.map +1 -1
  86. package/input/internal.js +4 -0
  87. package/input/internal.js.map +1 -1
  88. package/input/utils.js +1 -1
  89. package/input/utils.js.map +1 -1
  90. package/internal/components/autosuggest-input/index.js +1 -1
  91. package/internal/components/autosuggest-input/index.js.map +1 -1
  92. package/internal/components/live-region/index.d.ts +3 -2
  93. package/internal/components/live-region/index.d.ts.map +1 -1
  94. package/internal/components/live-region/index.js +5 -2
  95. package/internal/components/live-region/index.js.map +1 -1
  96. package/internal/components/live-region/styles.css.js +1 -1
  97. package/internal/components/live-region/styles.scoped.css +2 -92
  98. package/internal/components/live-region/styles.selectors.js +1 -1
  99. package/internal/components/screenreader-only/index.d.ts +22 -0
  100. package/internal/components/screenreader-only/index.d.ts.map +1 -0
  101. package/internal/components/screenreader-only/index.js +24 -0
  102. package/internal/components/screenreader-only/index.js.map +1 -0
  103. package/internal/components/screenreader-only/styles.css.js +6 -0
  104. package/internal/components/screenreader-only/styles.scoped.css +97 -0
  105. package/internal/components/screenreader-only/styles.selectors.js +7 -0
  106. package/internal/components/visual-context/index.d.ts +7 -0
  107. package/internal/components/visual-context/index.d.ts.map +1 -1
  108. package/internal/components/visual-context/index.js +10 -1
  109. package/internal/components/visual-context/index.js.map +1 -1
  110. package/internal/environment.js +1 -1
  111. package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  112. package/internal/generated/custom-css-properties/index.js +26 -24
  113. package/internal/generated/custom-css-properties/index.js.map +1 -1
  114. package/package.json +1 -1
  115. package/select/parts/filter.js +1 -1
  116. package/select/parts/filter.js.map +1 -1
  117. package/tag-editor/index.d.ts.map +1 -1
  118. package/tag-editor/index.js +1 -1
  119. package/tag-editor/index.js.map +1 -1
  120. package/tutorial-panel/interfaces.d.ts +2 -1
  121. package/tutorial-panel/interfaces.d.ts.map +1 -1
  122. package/tutorial-panel/interfaces.js.map +1 -1
  123. package/wizard/interfaces.d.ts +3 -0
  124. package/wizard/interfaces.d.ts.map +1 -1
  125. package/wizard/interfaces.js.map +1 -1
  126. package/wizard/wizard-form.d.ts.map +1 -1
  127. package/wizard/wizard-form.js +1 -1
  128. package/wizard/wizard-form.js.map +1 -1
  129. package/wizard/wizard-navigation.d.ts.map +1 -1
  130. package/wizard/wizard-navigation.js +1 -1
  131. package/wizard/wizard-navigation.js.map +1 -1
  132. package/calendar/utils/move-focus-handler.d.ts +0 -7
  133. package/calendar/utils/move-focus-handler.d.ts.map +0 -1
  134. package/calendar/utils/move-focus-handler.js +0 -24
  135. package/calendar/utils/move-focus-handler.js.map +0 -1
  136. package/calendar/utils/rotate-day-indexes.d.ts +0 -3
  137. package/calendar/utils/rotate-day-indexes.d.ts.map +0 -1
  138. package/calendar/utils/rotate-day-indexes.js +0 -11
  139. package/calendar/utils/rotate-day-indexes.js.map +0 -1
  140. package/date-range-picker/calendar/get-base-date.d.ts +0 -3
  141. package/date-range-picker/calendar/get-base-date.d.ts.map +0 -1
  142. package/date-range-picker/calendar/get-base-date.js +0 -10
  143. package/date-range-picker/calendar/get-base-date.js.map +0 -1
@@ -2,27 +2,34 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "flash-refresh": "awsui_flash-refresh_1q84n_zqvy6_93",
6
- "enter": "awsui_enter_1q84n_zqvy6_93",
7
- "flash-body": "awsui_flash-body_1q84n_zqvy6_108",
8
- "flash-message": "awsui_flash-message_1q84n_zqvy6_108",
9
- "flash-header": "awsui_flash-header_1q84n_zqvy6_108",
10
- "flash-content": "awsui_flash-content_1q84n_zqvy6_109",
11
- "action-button-wrapper": "awsui_action-button-wrapper_1q84n_zqvy6_110",
12
- "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_zqvy6_111",
13
- "flash-icon": "awsui_flash-icon_1q84n_zqvy6_134",
14
- "entering": "awsui_entering_1q84n_zqvy6_147",
15
- "entered": "awsui_entered_1q84n_zqvy6_168",
16
- "exiting": "awsui_exiting_1q84n_zqvy6_273",
17
- "flashbar": "awsui_flashbar_1q84n_zqvy6_295",
18
- "flash": "awsui_flash_1q84n_zqvy6_93",
19
- "flash-text": "awsui_flash-text_1q84n_zqvy6_359",
20
- "dismiss-button": "awsui_dismiss-button_1q84n_zqvy6_111",
21
- "breakpoint-default": "awsui_breakpoint-default_1q84n_zqvy6_401",
22
- "action-button": "awsui_action-button_1q84n_zqvy6_110",
23
- "flash-type-success": "awsui_flash-type-success_1q84n_zqvy6_414",
24
- "flash-type-error": "awsui_flash-type-error_1q84n_zqvy6_418",
25
- "flash-type-warning": "awsui_flash-type-warning_1q84n_zqvy6_422",
26
- "flash-type-info": "awsui_flash-type-info_1q84n_zqvy6_426"
5
+ "flash-refresh": "awsui_flash-refresh_1q84n_14a50_93",
6
+ "enter": "awsui_enter_1q84n_14a50_93",
7
+ "flash-body": "awsui_flash-body_1q84n_14a50_108",
8
+ "flash-message": "awsui_flash-message_1q84n_14a50_108",
9
+ "flash-header": "awsui_flash-header_1q84n_14a50_108",
10
+ "flash-content": "awsui_flash-content_1q84n_14a50_109",
11
+ "action-button-wrapper": "awsui_action-button-wrapper_1q84n_14a50_110",
12
+ "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_14a50_111",
13
+ "flash-icon": "awsui_flash-icon_1q84n_14a50_134",
14
+ "entering": "awsui_entering_1q84n_14a50_147",
15
+ "entered": "awsui_entered_1q84n_14a50_168",
16
+ "exiting": "awsui_exiting_1q84n_14a50_273",
17
+ "flashbar": "awsui_flashbar_1q84n_14a50_295",
18
+ "flash": "awsui_flash_1q84n_14a50_93",
19
+ "flash-text": "awsui_flash-text_1q84n_14a50_359",
20
+ "dismiss-button": "awsui_dismiss-button_1q84n_14a50_111",
21
+ "breakpoint-default": "awsui_breakpoint-default_1q84n_14a50_401",
22
+ "action-button": "awsui_action-button_1q84n_14a50_110",
23
+ "flash-type-success": "awsui_flash-type-success_1q84n_14a50_414",
24
+ "flash-type-error": "awsui_flash-type-error_1q84n_14a50_418",
25
+ "flash-type-warning": "awsui_flash-type-warning_1q84n_14a50_422",
26
+ "flash-type-info": "awsui_flash-type-info_1q84n_14a50_426",
27
+ "stack": "awsui_stack_1q84n_14a50_430",
28
+ "expanded": "awsui_expanded_1q84n_14a50_435",
29
+ "collapsed": "awsui_collapsed_1q84n_14a50_449",
30
+ "item": "awsui_item_1q84n_14a50_455",
31
+ "visual-refresh": "awsui_visual-refresh_1q84n_14a50_465",
32
+ "toggle": "awsui_toggle_1q84n_14a50_472",
33
+ "icon": "awsui_icon_1q84n_14a50_535"
27
34
  };
28
35
 
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { BaseComponentProps } from '../internal/base-component';
2
3
  export interface FormProps extends BaseComponentProps {
3
4
  /**
@@ -12,6 +13,10 @@ export interface FormProps extends BaseComponentProps {
12
13
  * Specifies a form-level validation message.
13
14
  */
14
15
  errorText?: React.ReactNode;
16
+ /**
17
+ * Provides a text alternative for the error icon in the error alert.
18
+ */
19
+ errorIconAriaLabel?: string;
15
20
  /**
16
21
  * Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with `direction="horizontal"` and `size="xs"`.
17
22
  */
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC"}
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface FormProps extends BaseComponentProps {\n /**\n * Specifies the main form content.\n */\n children?: React.ReactNode;\n\n /**\n * Specifies the form title and optional description. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Specifies a form-level validation message.\n */\n errorText?: React.ReactNode;\n\n /**\n * Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with `direction=\"horizontal\"` and `size=\"xs\"`.\n */\n actions?: React.ReactNode;\n\n /**\n * Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.\n */\n secondaryActions?: React.ReactNode;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface FormProps extends BaseComponentProps {\n /**\n * Specifies the main form content.\n */\n children?: React.ReactNode;\n\n /**\n * Specifies the form title and optional description. Use the [header component](/components/header/).\n */\n header?: React.ReactNode;\n\n /**\n * Specifies a form-level validation message.\n */\n errorText?: React.ReactNode;\n\n /**\n * Provides a text alternative for the error icon in the error alert.\n */\n errorIconAriaLabel?: string;\n\n /**\n * Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with `direction=\"horizontal\"` and `size=\"xs\"`.\n */\n actions?: React.ReactNode;\n\n /**\n * Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.\n */\n secondaryActions?: React.ReactNode;\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import { FormProps } from './interfaces';
2
2
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
3
3
  declare type InternalFormProps = FormProps & InternalBaseComponentProps;
4
- export default function InternalForm({ children, header, errorText, actions, secondaryActions, __internalRootRef, ...props }: InternalFormProps): JSX.Element;
4
+ export default function InternalForm({ children, header, errorText, errorIconAriaLabel, actions, secondaryActions, __internalRootRef, ...props }: InternalFormProps): JSX.Element;
5
5
  export {};
6
6
  //# sourceMappingURL=internal.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,aAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAyBnB"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,aAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eA4BnB"}
package/form/internal.js CHANGED
@@ -7,18 +7,23 @@ import { getBaseProps } from '../internal/base-component';
7
7
  import InternalAlert from '../alert/internal';
8
8
  import InternalBox from '../box/internal';
9
9
  import styles from './styles.css.js';
10
+ import LiveRegion from '../internal/components/live-region';
10
11
  export default function InternalForm(_a) {
11
- var children = _a.children, header = _a.header, errorText = _a.errorText, actions = _a.actions, secondaryActions = _a.secondaryActions, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["children", "header", "errorText", "actions", "secondaryActions", "__internalRootRef"]);
12
+ var children = _a.children, header = _a.header, errorText = _a.errorText, errorIconAriaLabel = _a.errorIconAriaLabel, actions = _a.actions, secondaryActions = _a.secondaryActions, __internalRootRef = _a.__internalRootRef, props = __rest(_a, ["children", "header", "errorText", "errorIconAriaLabel", "actions", "secondaryActions", "__internalRootRef"]);
12
13
  var baseProps = getBaseProps(props);
13
14
  return (React.createElement("div", __assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
14
15
  header && React.createElement("div", { className: styles.header }, header),
15
16
  children && React.createElement("div", { className: styles.content }, children),
16
- React.createElement("div", { "aria-live": "assertive" }, errorText && (React.createElement(InternalBox, { margin: { top: 'l' } },
17
- React.createElement(InternalAlert, { type: "error" },
18
- React.createElement("div", { className: styles.error }, errorText))))),
17
+ errorText && (React.createElement(InternalBox, { margin: { top: 'l' } },
18
+ React.createElement(InternalAlert, { type: "error", statusIconAriaLabel: errorIconAriaLabel },
19
+ React.createElement("div", { className: styles.error }, errorText)))),
19
20
  (actions || secondaryActions) && (React.createElement("div", { className: styles.footer },
20
21
  React.createElement("div", { className: styles['actions-section'] },
21
22
  actions && React.createElement("div", { className: styles.actions }, actions),
22
- secondaryActions && React.createElement("div", { className: styles['secondary-actions'] }, secondaryActions))))));
23
+ secondaryActions && React.createElement("div", { className: styles['secondary-actions'] }, secondaryActions)))),
24
+ errorText && (React.createElement(LiveRegion, { assertive: true },
25
+ errorIconAriaLabel,
26
+ ", ",
27
+ errorText))));
23
28
  }
24
29
  //# sourceMappingURL=internal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAQjB;IAPlB,IAAA,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,eAAA,EACT,OAAO,aAAA,EACP,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACd,KAAK,cAP2B,uFAQpC,CADS;IAER,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,wCAAS,SAAS,IAAE,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;QAC1F,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;QACvD,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;QAC7D,0CAAe,WAAW,IACvB,SAAS,IAAI,CACZ,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;YAC/B,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO;gBACzB,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,SAAS,CAAO,CACjC,CACJ,CACf,CACG;QACL,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;gBACtC,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;gBAC1D,gBAAgB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACtF,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport { FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n actions,\n secondaryActions,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n {header && <div className={styles.header}>{header}</div>}\n {children && <div className={styles.content}>{children}</div>}\n <div aria-live=\"assertive\">\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\">\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n </div>\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAI5D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EASjB;IARlB,IAAA,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,SAAS,eAAA,EACT,kBAAkB,wBAAA,EAClB,OAAO,aAAA,EACP,gBAAgB,sBAAA,EAChB,iBAAiB,uBAAA,EACd,KAAK,cAR2B,6GASpC,CADS;IAER,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,wCAAS,SAAS,IAAE,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;QAC1F,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;QACvD,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO;QAC5D,SAAS,IAAI,CACZ,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;YAC/B,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,mBAAmB,EAAE,kBAAkB;gBACjE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,SAAS,CAAO,CACjC,CACJ,CACf;QACA,CAAC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;gBACtC,OAAO,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,OAAO,CAAO;gBAC1D,gBAAgB,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CACtF,CACF,CACP;QACA,SAAS,IAAI,CACZ,oBAAC,UAAU,IAAC,SAAS,EAAE,IAAI;YACxB,kBAAkB;;YAAI,SAAS,CACrB,CACd,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport { FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel,\n actions,\n secondaryActions,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n {header && <div className={styles.header}>{header}</div>}\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <LiveRegion assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </LiveRegion>\n )}\n </div>\n );\n}\n"]}
@@ -5,7 +5,8 @@ import { InputProps, BaseInputProps, InputAutoCorrect, BaseChangeDetail } from '
5
5
  import { BaseComponentProps } from '../internal/base-component';
6
6
  import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
7
7
  import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
8
- export interface InternalInputProps extends BaseComponentProps, BaseInputProps, InputAutoCorrect, InputProps, FormFieldValidationControlProps, InternalBaseComponentProps {
8
+ export interface InternalInputProps extends BaseComponentProps, BaseInputProps, Omit<InputProps, 'type'>, InputAutoCorrect, FormFieldValidationControlProps, InternalBaseComponentProps {
9
+ type?: InputProps['type'] | 'visualSearch';
9
10
  __leftIcon?: IconProps['name'];
10
11
  __leftIconVariant?: IconProps['variant'];
11
12
  __onLeftIconClick?: () => void;
@@ -1 +1 @@
1
- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAGL,yBAAyB,EAE1B,MAAM,oBAAoB,CAAC;AAC5B,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,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,kBACf,SAAQ,kBAAkB,EACxB,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,+BAA+B,EAC/B,0BAA0B;IAC5B,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzC,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;CAChF;;AAkJD,wBAA+C"}
1
+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/input/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAGL,yBAAyB,EAE1B,MAAM,oBAAoB,CAAC;AAC5B,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,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,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,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzC,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;CAChF;;AAuJD,wBAA+C"}
package/input/internal.js CHANGED
@@ -58,6 +58,10 @@ function InternalInput(_a, ref) {
58
58
  attributes['aria-invalid'] = 'true';
59
59
  }
60
60
  var mergedRef = useMergeRefs(ref, inputRef);
61
+ // type = "visualSearch" renders a type="text' input
62
+ if (attributes.type === 'visualSearch') {
63
+ attributes.type = 'text';
64
+ }
61
65
  return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['input-container']), ref: __internalRootRef }),
62
66
  __leftIcon && (React.createElement("span", { onClick: __onLeftIconClick, className: iconClassName('left', !!__onLeftIconClick) },
63
67
  React.createElement(InternalIcon, { name: __leftIcon, variant: disabled ? 'disabled' : __leftIconVariant }))),
@@ -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, { MouseEventHandler, 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 styles from './styles.css.js';\nimport {\n fireNonCancelableEvent,\n fireKeyboardEvent,\n NonCancelableEventHandler,\n getBlurEventRelatedTarget,\n} 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 } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface InternalInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputProps,\n FormFieldValidationControlProps,\n InternalBaseComponentProps {\n __leftIcon?: IconProps['name'];\n __leftIconVariant?: IconProps['variant'];\n __onLeftIconClick?: () => void;\n\n __rightIcon?: IconProps['name'];\n __rightIconVariant?: IconProps['variant'];\n __onRightIconClick?: () => void;\n\n __nativeAttributes?: Record<string, any>;\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n}\n\nconst iconClassName = (position: string, hasHandler: boolean) =>\n clsx(styles['input-icon'], styles[`input-icon-${position}`], { [styles['input-icon-hoverable']]: hasHandler });\nconst preventMouseDown: MouseEventHandler = e => e.preventDefault();\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n name,\n value,\n controlId,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n invalid,\n ariaRequired,\n\n __rightIcon,\n __rightIconVariant = 'normal',\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n __nativeAttributes,\n __internalRootRef,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\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 attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n 'aria-labelledby': 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 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 &&\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: getBlurEventRelatedTarget(e.nativeEvent) });\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 return (\n <div {...baseProps} className={clsx(baseProps.className, styles['input-container'])} ref={__internalRootRef}>\n {__leftIcon && (\n <span onClick={__onLeftIconClick} className={iconClassName('left', !!__onLeftIconClick)}>\n <InternalIcon name={__leftIcon} variant={disabled ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <input ref={mergedRef} {...attributes} spellCheck={false} />\n {__rightIcon && (\n <span\n onClick={__onRightIconClick}\n onMouseDown={preventMouseDown}\n className={iconClassName('right', !!__onRightIconClick)}\n >\n <InternalIcon name={__rightIcon} variant={disabled ? 'disabled' : __rightIconVariant} />\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, { MouseEventHandler, 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 styles from './styles.css.js';\nimport {\n fireNonCancelableEvent,\n fireKeyboardEvent,\n NonCancelableEventHandler,\n getBlurEventRelatedTarget,\n} 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 } from '../internal/context/form-field-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\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 __rightIconVariant?: IconProps['variant'];\n __onRightIconClick?: () => void;\n\n __nativeAttributes?: Record<string, any>;\n __noBorderRadius?: boolean;\n\n __onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n __onBlurWithDetail?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n}\n\nconst iconClassName = (position: string, hasHandler: boolean) =>\n clsx(styles['input-icon'], styles[`input-icon-${position}`], { [styles['input-icon-hoverable']]: hasHandler });\nconst preventMouseDown: MouseEventHandler = e => e.preventDefault();\n\nfunction InternalInput(\n {\n type = 'text',\n step,\n inputMode,\n autoComplete = true,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n name,\n value,\n controlId,\n placeholder,\n autoFocus,\n disabled,\n readOnly,\n disableBrowserAutocorrect,\n __noBorderRadius,\n\n __leftIcon,\n __leftIconVariant = 'subtle',\n __onLeftIconClick,\n\n invalid,\n ariaRequired,\n\n __rightIcon,\n __rightIconVariant = 'normal',\n __onRightIconClick,\n\n onKeyDown,\n onKeyUp,\n onChange,\n __onDelayedInput,\n __onBlurWithDetail,\n onBlur,\n onFocus,\n __nativeAttributes,\n __internalRootRef,\n ...rest\n }: InternalInputProps,\n ref: Ref<HTMLInputElement>\n) {\n const baseProps = getBaseProps(rest);\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 attributes: React.InputHTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel,\n 'aria-labelledby': 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 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 &&\n fireNonCancelableEvent(__onBlurWithDetail, { relatedTarget: getBlurEventRelatedTarget(e.nativeEvent) });\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={iconClassName('left', !!__onLeftIconClick)}>\n <InternalIcon name={__leftIcon} variant={disabled ? 'disabled' : __leftIconVariant} />\n </span>\n )}\n <input ref={mergedRef} {...attributes} spellCheck={false} />\n {__rightIcon && (\n <span\n onClick={__onRightIconClick}\n onMouseDown={preventMouseDown}\n className={iconClassName('right', !!__onRightIconClick)}\n >\n <InternalIcon name={__rightIcon} variant={disabled ? 'disabled' : __rightIconVariant} />\n </span>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(InternalInput);\n"]}
package/input/utils.js CHANGED
@@ -8,7 +8,7 @@ export var useSearchProps = function (type, disabled, readOnly, value, inputRef,
8
8
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
9
9
  onChange('');
10
10
  }, [inputRef, onChange]);
11
- if (type === 'search') {
11
+ if (type === 'search' || type === 'visualSearch') {
12
12
  searchProps.__leftIcon = 'search';
13
13
  if (!disabled && !readOnly && value) {
14
14
  searchProps.__rightIcon = 'close';
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/input/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAG/C,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,IAAY,EACZ,QAA6B,EAC7B,QAA6B,EAC7B,KAAa,EACb,QAAqC,EACrC,QAAiC;IAEjC,IAAM,WAAW,GAAgC,EAAE,CAAC;IACpD,IAAM,eAAe,GAAG,WAAW,CAAC;;QAClC,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,IAAI,IAAI,KAAK,QAAQ,EAAE;QACrB,WAAW,CAAC,UAAU,GAAG,QAAQ,CAAC;QAElC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE;YACnC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;YAClC,WAAW,CAAC,kBAAkB,GAAG,eAAe,CAAC;SAClD;KACF;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,aAAuC;IAAvC,8BAAA,EAAA,qBAAuC;IACzE,IAAI,aAAa,KAAK,IAAI,EAAE;QAC1B,OAAO,IAAI,CAAC;KACb;IACD,OAAO,aAAa,IAAI,KAAK,CAAC;AAChC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, RefObject } from 'react';\nimport { InternalInputProps } from './internal';\n\nexport const useSearchProps = (\n type: string,\n disabled: boolean | undefined,\n readOnly: boolean | undefined,\n value: string,\n inputRef: RefObject<HTMLInputElement>,\n onChange: (value: string) => void\n) => {\n const searchProps: Partial<InternalInputProps> = {};\n const handleIconClick = useCallback(() => {\n inputRef.current?.focus();\n onChange('');\n }, [inputRef, onChange]);\n if (type === 'search') {\n searchProps.__leftIcon = 'search';\n\n if (!disabled && !readOnly && value) {\n searchProps.__rightIcon = 'close';\n searchProps.__onRightIconClick = handleIconClick;\n }\n }\n return searchProps;\n};\n\n/**\n * Converts the boolean or string value of the `autoComplete` property to the correct `autocomplete` attribute value.\n */\nexport const convertAutoComplete = (propertyValue: boolean | string = false): string => {\n if (propertyValue === true) {\n return 'on';\n }\n return propertyValue || 'off';\n};\n"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/input/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAa,MAAM,OAAO,CAAC;AAG/C,MAAM,CAAC,IAAM,cAAc,GAAG,UAC5B,IAAY,EACZ,QAA6B,EAC7B,QAA6B,EAC7B,KAAa,EACb,QAAqC,EACrC,QAAiC;IAEjC,IAAM,WAAW,GAAgC,EAAE,CAAC;IACpD,IAAM,eAAe,GAAG,WAAW,CAAC;;QAClC,MAAA,QAAQ,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QAC1B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IACzB,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,cAAc,EAAE;QAChD,WAAW,CAAC,UAAU,GAAG,QAAQ,CAAC;QAElC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,KAAK,EAAE;YACnC,WAAW,CAAC,WAAW,GAAG,OAAO,CAAC;YAClC,WAAW,CAAC,kBAAkB,GAAG,eAAe,CAAC;SAClD;KACF;IACD,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,aAAuC;IAAvC,8BAAA,EAAA,qBAAuC;IACzE,IAAI,aAAa,KAAK,IAAI,EAAE;QAC1B,OAAO,IAAI,CAAC;KACb;IACD,OAAO,aAAa,IAAI,KAAK,CAAC;AAChC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, RefObject } from 'react';\nimport { InternalInputProps } from './internal';\n\nexport const useSearchProps = (\n type: string,\n disabled: boolean | undefined,\n readOnly: boolean | undefined,\n value: string,\n inputRef: RefObject<HTMLInputElement>,\n onChange: (value: string) => void\n) => {\n const searchProps: Partial<InternalInputProps> = {};\n const handleIconClick = useCallback(() => {\n inputRef.current?.focus();\n onChange('');\n }, [inputRef, onChange]);\n if (type === 'search' || type === 'visualSearch') {\n searchProps.__leftIcon = 'search';\n\n if (!disabled && !readOnly && value) {\n searchProps.__rightIcon = 'close';\n searchProps.__onRightIconClick = handleIconClick;\n }\n }\n return searchProps;\n};\n\n/**\n * Converts the boolean or string value of the `autoComplete` property to the correct `autocomplete` attribute value.\n */\nexport const convertAutoComplete = (propertyValue: boolean | string = false): string => {\n if (propertyValue === true) {\n return 'on';\n }\n return propertyValue || 'off';\n};\n"]}
@@ -164,7 +164,7 @@ var AutosuggestInput = React.forwardRef(function (_a, ref) {
164
164
  // eslint-disable-next-line react-hooks/exhaustive-deps
165
165
  }, [open]);
166
166
  return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef, onBlur: handleBlur }),
167
- React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, contentKey: dropdownContentKey, trigger: React.createElement(InternalInput, __assign({ type: "search", value: value, onChange: function (event) { return handleChange(event.detail.value); }, __onDelayedInput: function (event) { return handleDelayedInput(event.detail.value); }, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, trapFocus: trapDropdownFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
167
+ React.createElement(Dropdown, { minWidth: dropdownWidth, stretchWidth: !dropdownWidth, contentKey: dropdownContentKey, trigger: React.createElement(InternalInput, __assign({ type: "visualSearch", value: value, onChange: function (event) { return handleChange(event.detail.value); }, __onDelayedInput: function (event) { return handleDelayedInput(event.detail.value); }, onFocus: handleFocus, onKeyDown: handleKeyDown, onKeyUp: onKeyUp, disabled: disabled, disableBrowserAutocorrect: disableBrowserAutocorrect, readOnly: readOnly, ariaRequired: ariaRequired, ref: inputRef, autoComplete: false, __nativeAttributes: nativeAttributes }, formFieldContext)), onMouseDown: handleDropdownMouseDown, open: open, footer: dropdownFooterRef && (React.createElement("div", { ref: dropdownFooterRef, className: styles['dropdown-footer'] }, dropdownFooter)), expandToViewport: expandToViewport, trapFocus: trapDropdownFocus }, open && dropdownContent ? (React.createElement("div", { ref: dropdownContentRef, className: styles['dropdown-content'] }, dropdownContent)) : null)));
168
168
  });
169
169
  export default AutosuggestInput;
170
170
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/index.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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n BaseKeyDetail,\n fireCancelableEvent,\n fireNonCancelableEvent,\n getBlurEventRelatedTarget,\n NonCancelableEventHandler,\n} from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputProps,\n} from '../../../input/interfaces';\nimport { getFocusables } from '../focus-lock/utils';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends InputProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur: React.FocusEventHandler = event => {\n const relatedTarget = getBlurEventRelatedTarget(event.nativeEvent);\n if (\n event.currentTarget.contains(relatedTarget) ||\n dropdownContentRef.current?.contains(relatedTarget) ||\n dropdownFooterRef.current?.contains(relatedTarget)\n ) {\n return;\n }\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const handleKeyDown = (e: CustomEvent<BaseKeyDetail>) => {\n switch (e.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n e.preventDefault();\n }\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n closeDropdown();\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n e.preventDefault();\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n default: {\n fireCancelableEvent(onKeyDown, e.detail);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': ariaControls,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': ariaControls,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n const [trapDropdownFocus, setTrapDropdownFocus] = useState(false);\n\n // Run this effect on every render to determine if necessary to trap focus around input and dropdown.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n setTrapDropdownFocus(\n (dropdownFooterRef.current ? getFocusables(dropdownFooterRef.current).length > 0 : false) ||\n (dropdownContentRef.current ? getFocusables(dropdownContentRef.current).length > 0 : false)\n );\n });\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !inputRef.current?.contains(event.target as Node) &&\n !dropdownContentRef.current?.contains(event.target as Node) &&\n !dropdownFooterRef.current?.contains(event.target as Node)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n onBlur={handleBlur}\n >\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n contentKey={dropdownContentKey}\n trigger={\n <InternalInput\n type=\"search\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n ref={inputRef}\n autoComplete={false}\n __nativeAttributes={nativeAttributes}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {dropdownFooter}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n trapFocus={trapDropdownFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/index.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\n\nimport React, { Ref, useRef, useState, useImperativeHandle, useEffect } from 'react';\n\nimport Dropdown from '../dropdown';\n\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n BaseKeyDetail,\n fireCancelableEvent,\n fireNonCancelableEvent,\n getBlurEventRelatedTarget,\n NonCancelableEventHandler,\n} from '../../events';\nimport InternalInput from '../../../input/internal';\nimport {\n BaseChangeDetail,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n InputProps,\n} from '../../../input/interfaces';\nimport { getFocusables } from '../focus-lock/utils';\nimport { ExpandToViewport } from '../dropdown/interfaces';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\n\nexport interface AutosuggestInputProps\n extends BaseComponentProps,\n BaseInputProps,\n InputAutoCorrect,\n InputKeyEvents,\n FormFieldValidationControlProps,\n ExpandToViewport,\n InternalBaseComponentProps {\n ariaControls?: string;\n ariaActivedescendant?: string;\n dropdownExpanded?: boolean;\n dropdownContentKey?: string;\n dropdownContentFocusable?: boolean;\n dropdownContent?: React.ReactNode;\n dropdownFooter?: React.ReactNode;\n dropdownWidth?: number;\n onCloseDropdown?: NonCancelableEventHandler<null>;\n onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n onPressArrowDown?: () => void;\n onPressArrowUp?: () => void;\n onPressEnter?: () => boolean;\n}\n\nexport interface AutosuggestInputFocusOptions {\n preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends InputProps.Ref {\n focus(options?: AutosuggestInputFocusOptions): void;\n open(): void;\n close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n (\n {\n value,\n onChange,\n onBlur,\n onFocus,\n onKeyUp,\n onKeyDown,\n name,\n placeholder,\n disabled,\n readOnly,\n autoFocus,\n ariaLabel,\n ariaRequired,\n disableBrowserAutocorrect = false,\n expandToViewport,\n ariaControls,\n ariaActivedescendant,\n dropdownExpanded = true,\n dropdownContentKey,\n dropdownContentFocusable = false,\n dropdownContent = null,\n dropdownFooter = null,\n dropdownWidth,\n onCloseDropdown,\n onDelayedInput,\n onPressArrowDown,\n onPressArrowUp,\n onPressEnter,\n __internalRootRef,\n ...restProps\n }: AutosuggestInputProps,\n ref: Ref<AutosuggestInputRef>\n ) => {\n const baseProps = getBaseProps(restProps);\n const formFieldContext = useFormFieldContext(restProps);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const dropdownContentRef = useRef<HTMLDivElement>(null);\n const dropdownFooterRef = useRef<HTMLDivElement>(null);\n const preventOpenOnFocusRef = useRef(false);\n const preventCloseOnBlurRef = useRef(false);\n\n const [open, setOpen] = useState(false);\n\n const openDropdown = () => !readOnly && setOpen(true);\n\n const closeDropdown = () => {\n setOpen(false);\n fireNonCancelableEvent(onCloseDropdown, null);\n };\n\n useImperativeHandle(ref, () => ({\n focus(options?: AutosuggestInputFocusOptions) {\n if (options?.preventDropdown) {\n preventOpenOnFocusRef.current = true;\n }\n inputRef.current?.focus();\n },\n select() {\n inputRef.current?.select();\n },\n open: openDropdown,\n close: closeDropdown,\n }));\n\n const handleBlur: React.FocusEventHandler = event => {\n const relatedTarget = getBlurEventRelatedTarget(event.nativeEvent);\n if (\n event.currentTarget.contains(relatedTarget) ||\n dropdownContentRef.current?.contains(relatedTarget) ||\n dropdownFooterRef.current?.contains(relatedTarget)\n ) {\n return;\n }\n if (!preventCloseOnBlurRef.current) {\n closeDropdown();\n fireNonCancelableEvent(onBlur, null);\n }\n };\n\n const handleFocus = () => {\n if (!preventOpenOnFocusRef.current) {\n openDropdown();\n fireNonCancelableEvent(onFocus, null);\n }\n preventOpenOnFocusRef.current = false;\n };\n\n const handleKeyDown = (e: CustomEvent<BaseKeyDetail>) => {\n switch (e.detail.keyCode) {\n case KeyCode.down: {\n onPressArrowDown?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.up: {\n onPressArrowUp?.();\n openDropdown();\n e.preventDefault();\n break;\n }\n case KeyCode.enter: {\n if (open) {\n if (!onPressEnter?.()) {\n closeDropdown();\n }\n e.preventDefault();\n }\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n case KeyCode.escape: {\n if (open) {\n closeDropdown();\n } else if (value) {\n fireNonCancelableEvent(onChange, { value: '' });\n }\n e.preventDefault();\n fireCancelableEvent(onKeyDown, e.detail);\n break;\n }\n default: {\n fireCancelableEvent(onKeyDown, e.detail);\n }\n }\n };\n\n const handleChange = (value: string) => {\n openDropdown();\n fireNonCancelableEvent(onChange, { value });\n };\n\n const handleDelayedInput = (value: string) => {\n fireNonCancelableEvent(onDelayedInput, { value });\n };\n\n const handleDropdownMouseDown: React.MouseEventHandler = event => {\n // Prevent currently focused element from losing focus.\n if (!dropdownContentFocusable) {\n event.preventDefault();\n }\n // Prevent closing dropdown on click inside.\n else {\n preventCloseOnBlurRef.current = true;\n requestAnimationFrame(() => {\n preventCloseOnBlurRef.current = false;\n });\n }\n };\n\n const expanded = open && dropdownExpanded;\n const nativeAttributes = {\n name,\n placeholder,\n autoFocus,\n onClick: openDropdown,\n role: 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-expanded': expanded,\n 'aria-controls': ariaControls,\n // 'aria-owns' needed for safari+vo to announce activedescendant content\n 'aria-owns': ariaControls,\n 'aria-label': ariaLabel,\n 'aria-activedescendant': ariaActivedescendant,\n };\n\n const [trapDropdownFocus, setTrapDropdownFocus] = useState(false);\n\n // Run this effect on every render to determine if necessary to trap focus around input and dropdown.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n setTrapDropdownFocus(\n (dropdownFooterRef.current ? getFocusables(dropdownFooterRef.current).length > 0 : false) ||\n (dropdownContentRef.current ? getFocusables(dropdownContentRef.current).length > 0 : false)\n );\n });\n\n // Closes dropdown when outside click is detected.\n // Similar to the internal dropdown implementation but includes the target as well.\n useEffect(() => {\n if (!open) {\n return;\n }\n\n const clickListener = (event: MouseEvent) => {\n if (\n !inputRef.current?.contains(event.target as Node) &&\n !dropdownContentRef.current?.contains(event.target as Node) &&\n !dropdownFooterRef.current?.contains(event.target as Node)\n ) {\n closeDropdown();\n }\n };\n\n window.addEventListener('mousedown', clickListener);\n\n return () => {\n window.removeEventListener('mousedown', clickListener);\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n onBlur={handleBlur}\n >\n <Dropdown\n minWidth={dropdownWidth}\n stretchWidth={!dropdownWidth}\n contentKey={dropdownContentKey}\n trigger={\n <InternalInput\n type=\"visualSearch\"\n value={value}\n onChange={event => handleChange(event.detail.value)}\n __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onKeyUp={onKeyUp}\n disabled={disabled}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n readOnly={readOnly}\n ariaRequired={ariaRequired}\n ref={inputRef}\n autoComplete={false}\n __nativeAttributes={nativeAttributes}\n {...formFieldContext}\n />\n }\n onMouseDown={handleDropdownMouseDown}\n open={open}\n footer={\n dropdownFooterRef && (\n <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n {dropdownFooter}\n </div>\n )\n }\n expandToViewport={expandToViewport}\n trapFocus={trapDropdownFocus}\n >\n {open && dropdownContent ? (\n <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n {dropdownContent}\n </div>\n ) : null}\n </Dropdown>\n </div>\n );\n }\n);\n\nexport default AutosuggestInput;\n"]}
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- export interface LiveRegionProps {
2
+ import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
3
+ export interface LiveRegionProps extends ScreenreaderOnlyProps {
3
4
  assertive?: boolean;
4
5
  delay?: number;
5
6
  children: React.ReactNode;
@@ -39,5 +40,5 @@ declare const _default: React.MemoExoticComponent<typeof LiveRegion>;
39
40
  </>
40
41
  */
41
42
  export default _default;
42
- declare function LiveRegion({ assertive, delay, children }: LiveRegionProps): JSX.Element;
43
+ declare function LiveRegion({ assertive, delay, children, ...restProps }: LiveRegionProps): JSX.Element;
43
44
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,KAAU,EAAE,QAAQ,EAAE,EAAE,eAAe,eAoD/E"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,wBAAgC;AAEhC,iBAAS,UAAU,CAAC,EAAE,SAAiB,EAAE,KAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,eAAe,eAoD7F"}
@@ -1,7 +1,10 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
+ import { __assign, __rest } from "tslib";
3
4
  /* eslint-disable @cloudscape-design/prefer-live-region */
5
+ import clsx from 'clsx';
4
6
  import React, { memo, useEffect, useRef } from 'react';
7
+ import ScreenreaderOnly from '../screenreader-only/index.js';
5
8
  import styles from './styles.css.js';
6
9
  /**
7
10
  The live region is hidden in the layout, but visible for screen readers.
@@ -38,7 +41,7 @@ import styles from './styles.css.js';
38
41
  */
39
42
  export default memo(LiveRegion);
40
43
  function LiveRegion(_a) {
41
- var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.delay, delay = _c === void 0 ? 10 : _c, children = _a.children;
44
+ var _b = _a.assertive, assertive = _b === void 0 ? false : _b, _c = _a.delay, delay = _c === void 0 ? 10 : _c, children = _a.children, restProps = __rest(_a, ["assertive", "delay", "children"]);
42
45
  var sourceRef = useRef(null);
43
46
  var targetRef = useRef(null);
44
47
  /*
@@ -78,7 +81,7 @@ function LiveRegion(_a) {
78
81
  }
79
82
  };
80
83
  });
81
- return (React.createElement("div", { className: styles.root },
84
+ return (React.createElement(ScreenreaderOnly, __assign({}, restProps, { className: clsx(styles.root, restProps.className) }),
82
85
  React.createElement("span", { "aria-hidden": "true" },
83
86
  React.createElement("span", { ref: sourceRef }, children)),
84
87
  React.createElement("span", { ref: targetRef, "aria-atomic": "true", "aria-live": assertive ? 'assertive' : 'polite' })));
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,0DAA0D;AAE1D,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAA4D;QAA1D,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA;IAC3D,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,6CAAkB,MAAM;YACtB,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ,CAClC;QAEP,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC3F,CACP,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport React, { memo, useEffect, useRef } from 'react';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps {\n assertive?: boolean;\n delay?: number;\n children: React.ReactNode;\n}\n\n/**\n The live region is hidden in the layout, but visible for screen readers.\n It's purpose it to announce changes e.g. when custom navigation logic is used.\n\n The way live region works differently in different browsers and screen readers and\n it is recommended to manually test every new implementation.\n\n If you notice there are different words being merged together,\n check if there are text nodes not being wrapped in elements, like:\n <LiveRegion>\n {title}\n <span><Details /></span>\n </LiveRegion>\n\n To fix, wrap \"title\" in an element:\n <LiveRegion>\n <span>{title}</span>\n <span><Details /></span>\n </LiveRegion>\n\n Or create a single text node if possible:\n <LiveRegion>\n {`${title} ${details}`}\n </LiveRegion>\n\n The live region is always atomic, because non-atomic regions can be treated by screen readers\n differently and produce unexpected results. To imitate non-atomic announcements simply use\n multiple live regions:\n <>\n <LiveRegion>{title}</LiveRegion>\n <LiveRegion><Details /></LiveRegion>\n </>\n*/\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ assertive = false, delay = 10, children }: LiveRegionProps) {\n const sourceRef = useRef<HTMLSpanElement>(null);\n const targetRef = useRef<HTMLSpanElement>(null);\n\n /*\n When React state changes, React often produces too many DOM updates, causing NVDA to\n issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n The code below imitates a debouncing, scheduling a callback every time new React state\n update is detected. When a callback resolves, it copies content from a muted element\n to the live region, which is recognized by screen readers as an update.\n\n If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n does not impact the performance. If it does, prefer using a string as children prop.\n */\n useEffect(() => {\n function updateLiveRegion() {\n if (targetRef.current && sourceRef.current) {\n const sourceContent = extractInnerText(sourceRef.current);\n const targetContent = extractInnerText(targetRef.current);\n if (targetContent !== sourceContent) {\n // The aria-atomic does not work properly in Voice Over, causing\n // certain parts of the content to be ignored. To fix that,\n // we assign the source text content as a single node.\n targetRef.current.innerText = sourceContent;\n }\n }\n }\n\n let timeoutId: null | number;\n if (delay) {\n timeoutId = setTimeout(updateLiveRegion, delay);\n } else {\n updateLiveRegion();\n }\n\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n });\n\n return (\n <div className={styles.root}>\n <span aria-hidden=\"true\">\n <span ref={sourceRef}>{children}</span>\n </span>\n\n <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n </div>\n );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,0DAA0D;AAE1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,gBAA2C,MAAM,+BAA+B,CAAC;AACxF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,eAAe,IAAI,CAAC,UAAU,CAAC,CAAC;AAEhC,SAAS,UAAU,CAAC,EAA0E;IAAxE,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAvD,kCAAyD,CAAF;IACzE,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD;;;;;;;;;;MAUE;IACF,SAAS,CAAC;QACR,SAAS,gBAAgB;YACvB,IAAI,SAAS,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;gBAC1C,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAC1D,IAAI,aAAa,KAAK,aAAa,EAAE;oBACnC,gEAAgE;oBAChE,2DAA2D;oBAC3D,sDAAsD;oBACtD,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;iBAC7C;aACF;QACH,CAAC;QAED,IAAI,SAAwB,CAAC;QAC7B,IAAI,KAAK,EAAE;YACT,SAAS,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;SACjD;aAAM;YACL,gBAAgB,EAAE,CAAC;SACpB;QAED,OAAO;YACL,IAAI,SAAS,EAAE;gBACb,YAAY,CAAC,SAAS,CAAC,CAAC;aACzB;QACH,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,gBAAgB,eAAK,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC;QAChF,6CAAkB,MAAM;YACtB,8BAAM,GAAG,EAAE,SAAS,IAAG,QAAQ,CAAQ,CAClC;QAEP,8BAAM,GAAG,EAAE,SAAS,iBAAc,MAAM,eAAY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,GAAS,CAC9E,CACpB,CAAC;AACJ,CAAC;AAED,oGAAoG;AACpG,oGAAoG;AACpG,0FAA0F;AAC1F,SAAS,gBAAgB,CAAC,IAAiB;IACzC,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC5D,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable @cloudscape-design/prefer-live-region */\n\nimport clsx from 'clsx';\nimport React, { memo, useEffect, useRef } from 'react';\nimport ScreenreaderOnly, { ScreenreaderOnlyProps } from '../screenreader-only/index.js';\nimport styles from './styles.css.js';\n\nexport interface LiveRegionProps extends ScreenreaderOnlyProps {\n assertive?: boolean;\n delay?: number;\n children: React.ReactNode;\n}\n\n/**\n The live region is hidden in the layout, but visible for screen readers.\n It's purpose it to announce changes e.g. when custom navigation logic is used.\n\n The way live region works differently in different browsers and screen readers and\n it is recommended to manually test every new implementation.\n\n If you notice there are different words being merged together,\n check if there are text nodes not being wrapped in elements, like:\n <LiveRegion>\n {title}\n <span><Details /></span>\n </LiveRegion>\n\n To fix, wrap \"title\" in an element:\n <LiveRegion>\n <span>{title}</span>\n <span><Details /></span>\n </LiveRegion>\n\n Or create a single text node if possible:\n <LiveRegion>\n {`${title} ${details}`}\n </LiveRegion>\n\n The live region is always atomic, because non-atomic regions can be treated by screen readers\n differently and produce unexpected results. To imitate non-atomic announcements simply use\n multiple live regions:\n <>\n <LiveRegion>{title}</LiveRegion>\n <LiveRegion><Details /></LiveRegion>\n </>\n*/\nexport default memo(LiveRegion);\n\nfunction LiveRegion({ assertive = false, delay = 10, children, ...restProps }: LiveRegionProps) {\n const sourceRef = useRef<HTMLSpanElement>(null);\n const targetRef = useRef<HTMLSpanElement>(null);\n\n /*\n When React state changes, React often produces too many DOM updates, causing NVDA to\n issue many announcements for the same logical event (See https://github.com/nvaccess/nvda/issues/7996).\n\n The code below imitates a debouncing, scheduling a callback every time new React state\n update is detected. When a callback resolves, it copies content from a muted element\n to the live region, which is recognized by screen readers as an update.\n\n If the use case requires no announcement to be ignored, use delay = 0, but ensure it\n does not impact the performance. If it does, prefer using a string as children prop.\n */\n useEffect(() => {\n function updateLiveRegion() {\n if (targetRef.current && sourceRef.current) {\n const sourceContent = extractInnerText(sourceRef.current);\n const targetContent = extractInnerText(targetRef.current);\n if (targetContent !== sourceContent) {\n // The aria-atomic does not work properly in Voice Over, causing\n // certain parts of the content to be ignored. To fix that,\n // we assign the source text content as a single node.\n targetRef.current.innerText = sourceContent;\n }\n }\n }\n\n let timeoutId: null | number;\n if (delay) {\n timeoutId = setTimeout(updateLiveRegion, delay);\n } else {\n updateLiveRegion();\n }\n\n return () => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n };\n });\n\n return (\n <ScreenreaderOnly {...restProps} className={clsx(styles.root, restProps.className)}>\n <span aria-hidden=\"true\">\n <span ref={sourceRef}>{children}</span>\n </span>\n\n <span ref={targetRef} aria-atomic=\"true\" aria-live={assertive ? 'assertive' : 'polite'}></span>\n </ScreenreaderOnly>\n );\n}\n\n// This only extracts text content from the node including all its children which is enough for now.\n// To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n// ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\nfunction extractInnerText(node: HTMLElement) {\n return (node.innerText || '').replace(/\\s+/g, ' ').trim();\n}\n"]}
@@ -1,6 +1,6 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_3bgfn_1yl3y_93"
4
+ "root": "awsui_root_3bgfn_im8v7_5"
5
5
  };
6
6
 
@@ -2,96 +2,6 @@
2
2
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
3
  SPDX-License-Identifier: Apache-2.0
4
4
  */
5
- /*
6
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
7
- SPDX-License-Identifier: Apache-2.0
8
- */
9
- /*
10
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
11
- SPDX-License-Identifier: Apache-2.0
12
- */
13
- /*
14
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
15
- SPDX-License-Identifier: Apache-2.0
16
- */
17
- /*
18
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
19
- SPDX-License-Identifier: Apache-2.0
20
- */
21
- /*
22
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
23
- SPDX-License-Identifier: Apache-2.0
24
- */
25
- /*
26
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
27
- SPDX-License-Identifier: Apache-2.0
28
- */
29
- /*
30
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
31
- SPDX-License-Identifier: Apache-2.0
32
- */
33
- /*
34
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
35
- SPDX-License-Identifier: Apache-2.0
36
- */
37
- /*
38
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
39
- SPDX-License-Identifier: Apache-2.0
40
- */
41
- /*
42
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
43
- SPDX-License-Identifier: Apache-2.0
44
- */
45
- /*
46
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
47
- SPDX-License-Identifier: Apache-2.0
48
- */
49
- /*
50
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
51
- SPDX-License-Identifier: Apache-2.0
52
- */
53
- /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
54
- /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
55
- /*
56
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
57
- SPDX-License-Identifier: Apache-2.0
58
- */
59
- /*
60
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
61
- SPDX-License-Identifier: Apache-2.0
62
- */
63
- /*
64
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
65
- SPDX-License-Identifier: Apache-2.0
66
- */
67
- /*
68
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
69
- SPDX-License-Identifier: Apache-2.0
70
- */
71
- /*
72
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
73
- SPDX-License-Identifier: Apache-2.0
74
- */
75
- /*
76
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
77
- SPDX-License-Identifier: Apache-2.0
78
- */
79
- /*
80
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
81
- SPDX-License-Identifier: Apache-2.0
82
- */
83
- /* Style used for links in slots/components that are text heavy, to help links stand out among
84
- surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
85
- /*
86
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
87
- SPDX-License-Identifier: Apache-2.0
88
- */
89
- /*
90
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
- SPDX-License-Identifier: Apache-2.0
92
- */
93
- .awsui_root_3bgfn_1yl3y_93:not(#\9) {
94
- position: absolute !important;
95
- top: -9999px !important;
96
- left: -9999px !important;
5
+ .awsui_root_3bgfn_im8v7_5:not(#\9) {
6
+ /* used in test-utils */
97
7
  }
@@ -2,6 +2,6 @@
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_3bgfn_1yl3y_93"
5
+ "root": "awsui_root_3bgfn_im8v7_5"
6
6
  };
7
7
 
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ export interface ScreenreaderOnlyProps {
3
+ id?: string;
4
+ className?: string;
5
+ children: React.ReactNode;
6
+ }
7
+ /**
8
+ * Makes content now shown on a screen but still announced by screen-reader users.
9
+ * The component is suitable when the aria-label cannot be used, e.g. to avoid elemnts being announced as "blank".
10
+ *
11
+ * To exclude screenreader-only content use `:not(.${screenreaderOnlyStyles.root})` selector, for example:
12
+ *
13
+ * ```
14
+ * import screenreaderOnlyStyles from '~internal/components/screenreader-only/styles.css.js'
15
+ *
16
+ * let visibleContent = wrapper.find(`${styles.label}`).find(`:not(.${screenreaderOnlyStyles.root})`).getElement().textContent
17
+ *
18
+ * let screenreaderContent = wrapper.find(`${styles.label}`).find(`.${screenreaderOnlyStyles.root}`).getElement().textContent
19
+ * ```
20
+ */
21
+ export default function ScreenreaderOnly(props: ScreenreaderOnlyProps): JSX.Element;
22
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/screenreader-only/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAEpE"}