carbon-react 106.6.10 → 107.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (219) hide show
  1. package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.d.ts +12 -0
  2. package/esm/__internal__/click-away-wrapper/click-away-wrapper.component.js +43 -0
  3. package/esm/__internal__/click-away-wrapper/index.d.ts +2 -0
  4. package/esm/__internal__/click-away-wrapper/index.js +1 -0
  5. package/esm/__internal__/focus-trap/focus-trap-utils.js +25 -1
  6. package/esm/__internal__/focus-trap/focus-trap.component.d.ts +3 -1
  7. package/esm/__internal__/focus-trap/focus-trap.component.js +44 -12
  8. package/esm/{components/radio-button → __internal__/radio-button-mapper}/radio-button-mapper.component.d.ts +0 -0
  9. package/esm/{components/radio-button → __internal__/radio-button-mapper}/radio-button-mapper.component.js +0 -0
  10. package/esm/components/advanced-color-picker/advanced-color-picker.component.js +5 -5
  11. package/esm/components/badge/badge.style.d.ts +1 -1
  12. package/esm/components/button/button.component.d.ts +1 -3
  13. package/esm/components/button/button.component.js +1 -12
  14. package/esm/components/button/button.style.d.ts +1 -1
  15. package/esm/components/button-toggle-group/button-toggle-group.component.js +1 -1
  16. package/esm/components/confirm/confirm.component.d.ts +1 -5
  17. package/esm/components/confirm/confirm.component.js +2 -14
  18. package/esm/components/confirm/confirm.d.ts +0 -2
  19. package/esm/components/date/date.component.js +19 -20
  20. package/esm/components/dialog/dialog.component.js +4 -3
  21. package/esm/components/dialog-full-screen/content.style.js +4 -10
  22. package/esm/components/dialog-full-screen/dialog-full-screen.component.js +4 -3
  23. package/esm/components/heading/heading.component.d.ts +27 -52
  24. package/esm/components/heading/heading.component.js +86 -170
  25. package/esm/components/heading/heading.d.ts +5 -3
  26. package/esm/components/i18n-provider/i18n-provider.component.d.ts +0 -9
  27. package/esm/components/i18n-provider/i18n-provider.component.js +0 -9
  28. package/esm/components/menu/__internal__/submenu/submenu.component.js +11 -17
  29. package/esm/components/menu/index.d.ts +0 -1
  30. package/esm/components/menu/index.js +0 -1
  31. package/esm/components/menu/menu-full-screen/menu-full-screen.component.js +4 -18
  32. package/esm/components/menu/menu-full-screen/menu-full-screen.style.js +1 -0
  33. package/esm/components/menu/menu-item/menu-item.component.js +0 -6
  34. package/esm/components/multi-action-button/multi-action-button.component.d.ts +1 -1
  35. package/esm/components/multi-action-button/multi-action-button.component.js +1 -11
  36. package/esm/components/navigation-bar/navigation-bar.component.d.ts +1 -6
  37. package/esm/components/navigation-bar/navigation-bar.component.js +1 -15
  38. package/esm/components/navigation-bar/navigation-bar.style.d.ts +0 -4
  39. package/esm/components/navigation-bar/navigation-bar.style.js +0 -8
  40. package/esm/components/popover-container/popover-container.component.js +16 -3
  41. package/esm/components/radio-button/radio-button-group.component.js +1 -1
  42. package/esm/components/select/select-list/select-list.component.js +2 -2
  43. package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts +3 -1
  44. package/esm/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js +7 -2
  45. package/esm/components/sidebar/sidebar.component.js +10 -3
  46. package/esm/components/simple-color-picker/simple-color-picker.component.js +1 -1
  47. package/esm/components/split-button/split-button-toggle.style.d.ts +1 -1
  48. package/esm/components/split-button/split-button.component.d.ts +1 -4
  49. package/esm/components/split-button/split-button.component.js +3 -16
  50. package/esm/components/split-button/split-button.d.ts +0 -2
  51. package/esm/components/tile/tile.component.d.ts +1 -2
  52. package/esm/components/tile/tile.component.js +1 -13
  53. package/esm/components/tile/tile.d.ts +0 -2
  54. package/esm/components/tile-select/tile-select-group.component.js +1 -1
  55. package/esm/components/toast/toast.component.d.ts +1 -4
  56. package/esm/components/toast/toast.component.js +1 -13
  57. package/esm/components/toast/toast.d.ts +0 -2
  58. package/esm/locales/en-gb.js +0 -9
  59. package/esm/locales/locale.d.ts +0 -9
  60. package/esm/locales/pl-pl.js +0 -9
  61. package/lib/__internal__/click-away-wrapper/click-away-wrapper.component.d.ts +12 -0
  62. package/lib/__internal__/click-away-wrapper/click-away-wrapper.component.js +59 -0
  63. package/lib/__internal__/click-away-wrapper/index.d.ts +2 -0
  64. package/lib/{components/menu/submenu-block → __internal__/click-away-wrapper}/index.js +2 -2
  65. package/lib/{components/scrollable-list → __internal__/click-away-wrapper}/package.json +1 -1
  66. package/lib/__internal__/focus-trap/focus-trap-utils.js +25 -1
  67. package/lib/__internal__/focus-trap/focus-trap.component.d.ts +3 -1
  68. package/lib/__internal__/focus-trap/focus-trap.component.js +46 -12
  69. package/lib/{components/radio-button → __internal__/radio-button-mapper}/radio-button-mapper.component.d.ts +0 -0
  70. package/lib/{components/radio-button → __internal__/radio-button-mapper}/radio-button-mapper.component.js +0 -0
  71. package/lib/components/advanced-color-picker/advanced-color-picker.component.js +5 -5
  72. package/lib/components/badge/badge.style.d.ts +1 -1
  73. package/lib/components/button/button.component.d.ts +1 -3
  74. package/lib/components/button/button.component.js +1 -14
  75. package/lib/components/button/button.style.d.ts +1 -1
  76. package/lib/components/button-toggle-group/button-toggle-group.component.js +1 -1
  77. package/lib/components/confirm/confirm.component.d.ts +1 -5
  78. package/lib/components/confirm/confirm.component.js +2 -17
  79. package/lib/components/confirm/confirm.d.ts +0 -2
  80. package/lib/components/date/date.component.js +20 -20
  81. package/lib/components/dialog/dialog.component.js +4 -3
  82. package/lib/components/dialog-full-screen/content.style.js +4 -10
  83. package/lib/components/dialog-full-screen/dialog-full-screen.component.js +4 -3
  84. package/lib/components/heading/heading.component.d.ts +27 -52
  85. package/lib/components/heading/heading.component.js +86 -170
  86. package/lib/components/heading/heading.d.ts +5 -3
  87. package/lib/components/i18n-provider/i18n-provider.component.d.ts +0 -9
  88. package/lib/components/i18n-provider/i18n-provider.component.js +0 -9
  89. package/lib/components/menu/__internal__/submenu/submenu.component.js +12 -17
  90. package/lib/components/menu/index.d.ts +0 -1
  91. package/lib/components/menu/index.js +0 -8
  92. package/lib/components/menu/menu-full-screen/menu-full-screen.component.js +3 -17
  93. package/lib/components/menu/menu-full-screen/menu-full-screen.style.js +1 -0
  94. package/lib/components/menu/menu-item/menu-item.component.js +0 -7
  95. package/lib/components/multi-action-button/multi-action-button.component.d.ts +1 -1
  96. package/lib/components/multi-action-button/multi-action-button.component.js +1 -14
  97. package/lib/components/navigation-bar/navigation-bar.component.d.ts +1 -6
  98. package/lib/components/navigation-bar/navigation-bar.component.js +1 -18
  99. package/lib/components/navigation-bar/navigation-bar.style.d.ts +0 -4
  100. package/lib/components/navigation-bar/navigation-bar.style.js +0 -8
  101. package/lib/components/popover-container/popover-container.component.js +17 -3
  102. package/lib/components/radio-button/radio-button-group.component.js +1 -1
  103. package/lib/components/select/select-list/select-list.component.js +2 -2
  104. package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.d.ts +3 -1
  105. package/lib/components/sidebar/__internal__/sidebar-header/sidebar-header.component.js +7 -2
  106. package/lib/components/sidebar/sidebar.component.js +11 -3
  107. package/lib/components/simple-color-picker/simple-color-picker.component.js +1 -1
  108. package/lib/components/split-button/split-button-toggle.style.d.ts +1 -1
  109. package/lib/components/split-button/split-button.component.d.ts +1 -4
  110. package/lib/components/split-button/split-button.component.js +3 -18
  111. package/lib/components/split-button/split-button.d.ts +0 -2
  112. package/lib/components/tile/tile.component.d.ts +1 -2
  113. package/lib/components/tile/tile.component.js +1 -16
  114. package/lib/components/tile/tile.d.ts +0 -2
  115. package/lib/components/tile-select/tile-select-group.component.js +1 -1
  116. package/lib/components/toast/toast.component.d.ts +1 -4
  117. package/lib/components/toast/toast.component.js +1 -16
  118. package/lib/components/toast/toast.d.ts +0 -2
  119. package/lib/locales/en-gb.js +0 -9
  120. package/lib/locales/locale.d.ts +0 -9
  121. package/lib/locales/pl-pl.js +0 -9
  122. package/package.json +1 -1
  123. package/esm/components/app-wrapper/app-wrapper.component.d.ts +0 -25
  124. package/esm/components/app-wrapper/app-wrapper.component.js +0 -104
  125. package/esm/components/app-wrapper/app-wrapper.d.ts +0 -12
  126. package/esm/components/app-wrapper/app-wrapper.style.d.ts +0 -2
  127. package/esm/components/app-wrapper/app-wrapper.style.js +0 -17
  128. package/esm/components/app-wrapper/index.d.ts +0 -1
  129. package/esm/components/app-wrapper/index.js +0 -1
  130. package/esm/components/menu/submenu-block/index.d.ts +0 -2
  131. package/esm/components/menu/submenu-block/index.js +0 -1
  132. package/esm/components/menu/submenu-block/submenu-block.component.d.ts +0 -12
  133. package/esm/components/menu/submenu-block/submenu-block.component.js +0 -34
  134. package/esm/components/menu/submenu-block/submenu-block.d.ts +0 -12
  135. package/esm/components/menu/submenu-block/submenu-block.style.d.ts +0 -2
  136. package/esm/components/menu/submenu-block/submenu-block.style.js +0 -16
  137. package/esm/components/mount-in-app/__spec__.d.ts +0 -1
  138. package/esm/components/mount-in-app/__spec__.js +0 -47
  139. package/esm/components/mount-in-app/index.d.ts +0 -1
  140. package/esm/components/mount-in-app/mount-in-app.d.ts +0 -12
  141. package/esm/components/mount-in-app/mount-in-app.js +0 -90
  142. package/esm/components/mount-in-app/package.json +0 -3
  143. package/esm/components/multi-step-wizard/__spec__.d.ts +0 -1
  144. package/esm/components/multi-step-wizard/__spec__.js +0 -191
  145. package/esm/components/multi-step-wizard/multi-step-wizard.d.ts +0 -109
  146. package/esm/components/multi-step-wizard/multi-step-wizard.js +0 -383
  147. package/esm/components/multi-step-wizard/multi-step-wizard.style.d.ts +0 -2
  148. package/esm/components/multi-step-wizard/multi-step-wizard.style.js +0 -10
  149. package/esm/components/multi-step-wizard/package.json +0 -4
  150. package/esm/components/multi-step-wizard/step/__spec__.d.ts +0 -1
  151. package/esm/components/multi-step-wizard/step/__spec__.js +0 -399
  152. package/esm/components/multi-step-wizard/step/package.json +0 -4
  153. package/esm/components/multi-step-wizard/step/step.d.ts +0 -166
  154. package/esm/components/multi-step-wizard/step/step.js +0 -407
  155. package/esm/components/multi-step-wizard/step/step.style.d.ts +0 -13
  156. package/esm/components/multi-step-wizard/step/step.style.js +0 -138
  157. package/esm/components/scrollable-list/as-scrollable-list-item.wrapper.d.ts +0 -2
  158. package/esm/components/scrollable-list/as-scrollable-list-item.wrapper.js +0 -10
  159. package/esm/components/scrollable-list/index.d.ts +0 -4
  160. package/esm/components/scrollable-list/index.js +0 -4
  161. package/esm/components/scrollable-list/scrollable-list-item.component.d.ts +0 -2
  162. package/esm/components/scrollable-list/scrollable-list-item.component.js +0 -26
  163. package/esm/components/scrollable-list/scrollable-list.component.d.ts +0 -52
  164. package/esm/components/scrollable-list/scrollable-list.component.js +0 -306
  165. package/esm/components/scrollable-list/scrollable-list.context.d.ts +0 -3
  166. package/esm/components/scrollable-list/scrollable-list.context.js +0 -2
  167. package/esm/components/scrollable-list/scrollable-list.style.d.ts +0 -2
  168. package/esm/components/scrollable-list/scrollable-list.style.js +0 -30
  169. package/esm/components/scrollable-list/test-utils.d.ts +0 -2
  170. package/esm/components/scrollable-list/test-utils.js +0 -25
  171. package/lib/components/app-wrapper/app-wrapper.component.d.ts +0 -25
  172. package/lib/components/app-wrapper/app-wrapper.component.js +0 -120
  173. package/lib/components/app-wrapper/app-wrapper.d.ts +0 -12
  174. package/lib/components/app-wrapper/app-wrapper.style.d.ts +0 -2
  175. package/lib/components/app-wrapper/app-wrapper.style.js +0 -28
  176. package/lib/components/app-wrapper/index.d.ts +0 -1
  177. package/lib/components/app-wrapper/index.js +0 -15
  178. package/lib/components/app-wrapper/package.json +0 -6
  179. package/lib/components/menu/submenu-block/index.d.ts +0 -2
  180. package/lib/components/menu/submenu-block/package.json +0 -6
  181. package/lib/components/menu/submenu-block/submenu-block.component.d.ts +0 -12
  182. package/lib/components/menu/submenu-block/submenu-block.component.js +0 -53
  183. package/lib/components/menu/submenu-block/submenu-block.d.ts +0 -12
  184. package/lib/components/menu/submenu-block/submenu-block.style.d.ts +0 -2
  185. package/lib/components/menu/submenu-block/submenu-block.style.js +0 -33
  186. package/lib/components/mount-in-app/__spec__.d.ts +0 -1
  187. package/lib/components/mount-in-app/__spec__.js +0 -55
  188. package/lib/components/mount-in-app/index.d.ts +0 -1
  189. package/lib/components/mount-in-app/mount-in-app.d.ts +0 -12
  190. package/lib/components/mount-in-app/mount-in-app.js +0 -105
  191. package/lib/components/mount-in-app/package.json +0 -3
  192. package/lib/components/multi-step-wizard/__spec__.d.ts +0 -1
  193. package/lib/components/multi-step-wizard/__spec__.js +0 -202
  194. package/lib/components/multi-step-wizard/multi-step-wizard.d.ts +0 -109
  195. package/lib/components/multi-step-wizard/multi-step-wizard.js +0 -397
  196. package/lib/components/multi-step-wizard/multi-step-wizard.style.d.ts +0 -2
  197. package/lib/components/multi-step-wizard/multi-step-wizard.style.js +0 -21
  198. package/lib/components/multi-step-wizard/package.json +0 -4
  199. package/lib/components/multi-step-wizard/step/__spec__.d.ts +0 -1
  200. package/lib/components/multi-step-wizard/step/__spec__.js +0 -409
  201. package/lib/components/multi-step-wizard/step/package.json +0 -4
  202. package/lib/components/multi-step-wizard/step/step.d.ts +0 -166
  203. package/lib/components/multi-step-wizard/step/step.js +0 -421
  204. package/lib/components/multi-step-wizard/step/step.style.d.ts +0 -13
  205. package/lib/components/multi-step-wizard/step/step.style.js +0 -162
  206. package/lib/components/scrollable-list/as-scrollable-list-item.wrapper.d.ts +0 -2
  207. package/lib/components/scrollable-list/as-scrollable-list-item.wrapper.js +0 -21
  208. package/lib/components/scrollable-list/index.d.ts +0 -4
  209. package/lib/components/scrollable-list/index.js +0 -31
  210. package/lib/components/scrollable-list/scrollable-list-item.component.d.ts +0 -2
  211. package/lib/components/scrollable-list/scrollable-list-item.component.js +0 -42
  212. package/lib/components/scrollable-list/scrollable-list.component.d.ts +0 -52
  213. package/lib/components/scrollable-list/scrollable-list.component.js +0 -328
  214. package/lib/components/scrollable-list/scrollable-list.context.d.ts +0 -3
  215. package/lib/components/scrollable-list/scrollable-list.context.js +0 -14
  216. package/lib/components/scrollable-list/scrollable-list.style.d.ts +0 -2
  217. package/lib/components/scrollable-list/scrollable-list.style.js +0 -41
  218. package/lib/components/scrollable-list/test-utils.d.ts +0 -2
  219. package/lib/components/scrollable-list/test-utils.js +0 -37
@@ -1,64 +1,44 @@
1
1
  export default Heading;
2
- declare class Heading extends React.Component<any, any, any> {
3
- constructor(props: any);
4
- constructor(props: any, context: any);
5
- get help(): JSX.Element | null;
6
- get back(): JSX.Element | null;
7
- get subheader(): JSX.Element | null;
8
- get separator(): JSX.Element | null;
9
- get divider(): JSX.Element | null;
10
- get pills(): JSX.Element | null;
11
- render(): JSX.Element | null;
12
- }
2
+ declare function Heading({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: {
3
+ [x: string]: any;
4
+ children: any;
5
+ backLink: any;
6
+ divider?: boolean | undefined;
7
+ help: any;
8
+ helpAriaLabel: any;
9
+ helpLink: any;
10
+ pills: any;
11
+ separator?: boolean | undefined;
12
+ subheader: any;
13
+ subtitleId: any;
14
+ title: any;
15
+ titleId: any;
16
+ }): JSX.Element | null;
13
17
  declare namespace Heading {
14
18
  const propTypes: {
15
- /**
16
- * Children elements
17
- */
19
+ /** Child elements */
18
20
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
19
- /**
20
- * Defines the title for the heading.
21
- */
21
+ /** Defines the title for the heading. */
22
22
  title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
23
- /**
24
- * Defines the title id for the heading.
25
- */
23
+ /** Defines the title id for the heading. */
26
24
  titleId: PropTypes.Requireable<string>;
27
- /**
28
- * Defines the subheader for the heading.
29
- */
25
+ /** Defines the subheader for the heading. */
30
26
  subheader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
31
- /**
32
- * Defines the subtitle id for the heading.
33
- */
27
+ /** Defines the subtitle id for the heading. */
34
28
  subtitleId: PropTypes.Requireable<string>;
35
- /**
36
- * Defines the help text for the heading.
37
- */
29
+ /** Defines the help text for the heading. */
38
30
  help: PropTypes.Requireable<string>;
39
- /**
40
- * Defines the help link for the heading.
41
- */
31
+ /** Defines the help link for the heading. */
42
32
  helpLink: PropTypes.Requireable<string>;
43
- /**
44
- * Defines the a href for the back link.
45
- */
33
+ /** Defines the a href for the back link. */
46
34
  backLink: PropTypes.Requireable<string | ((...args: any[]) => any)>;
47
- /**
48
- * Adds a divider below the heading and the content.
49
- */
35
+ /** Adds a divider below the heading and the content. */
50
36
  divider: PropTypes.Requireable<boolean>;
51
- /**
52
- * Adds a separator between the title and the subheader.
53
- */
37
+ /** Adds a separator between the title and the subheader. */
54
38
  separator: PropTypes.Requireable<boolean>;
55
- /**
56
- * Pills that will be added after the title.
57
- */
39
+ /** Pills that will be added after the title. */
58
40
  pills: PropTypes.Requireable<PropTypes.ReactNodeLike>;
59
- /**
60
- * Aria label for rendered help component
61
- */
41
+ /** Aria label for rendered help component */
62
42
  helpAriaLabel: PropTypes.Requireable<string>;
63
43
  marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
64
44
  margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -75,10 +55,5 @@ declare namespace Heading {
75
55
  marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
76
56
  my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
77
57
  };
78
- namespace defaultProps {
79
- const divider: boolean;
80
- const separator: boolean;
81
- }
82
58
  }
83
- import React from "react";
84
59
  import PropTypes from "prop-types";
@@ -1,25 +1,5 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
4
-
5
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
6
-
7
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
8
-
9
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
10
-
11
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
12
-
13
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
14
-
15
- function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
16
-
17
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
18
-
19
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
20
-
21
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
22
-
23
3
  import React from "react";
24
4
  import PropTypes from "prop-types";
25
5
  import styledSystemPropTypes from "@styled-system/prop-types";
@@ -28,181 +8,117 @@ import tagComponent from "../../__internal__/utils/helpers/tags/tags";
28
8
  import { StyledHeading, StyledHeadingIcon, StyledSubHeader, StyledHeader, StyledSeparator, StyledHeaderHelp, StyledHeadingTitle, StyledDivider, StyledHeaderContent, StyledHeadingBackButton, StyledHeadingPills } from "./heading.style";
29
9
  const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
30
10
 
31
- let Heading = /*#__PURE__*/function (_React$Component) {
32
- _inherits(Heading, _React$Component);
33
-
34
- var _super = _createSuper(Heading);
35
-
36
- function Heading() {
37
- _classCallCheck(this, Heading);
38
-
39
- return _super.apply(this, arguments);
40
- }
41
-
42
- _createClass(Heading, [{
43
- key: "help",
44
- get: function () {
45
- if (!this.props.help && !this.props.helpLink) {
46
- return null;
47
- }
48
-
49
- return /*#__PURE__*/React.createElement(StyledHeaderHelp, {
50
- "data-element": "help",
51
- tooltipPosition: "right",
52
- href: this.props.helpLink,
53
- ariaLabel: this.props.helpAriaLabel
54
- }, this.props.help);
55
- }
56
- }, {
57
- key: "back",
58
- get: function () {
59
- if (!this.props.backLink) {
60
- return null;
61
- }
62
-
63
- let props;
64
-
65
- if (typeof this.props.backLink === "string") {
66
- props = {
67
- href: this.props.backLink
68
- };
69
- } else {
70
- props = {
71
- onClick: this.props.backLink
72
- };
73
- }
74
-
75
- return /*#__PURE__*/React.createElement(StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
76
- , _extends({
77
- onMouseDown: e => e.currentTarget.focus(),
78
- "data-element": "back"
79
- }, props), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
80
- type: "chevron_left",
81
- divider: this.props.divider
82
- }));
83
- }
84
- }, {
85
- key: "subheader",
86
- get: function () {
87
- if (!this.props.subheader) {
88
- return null;
89
- }
90
-
91
- return /*#__PURE__*/React.createElement(StyledSubHeader, {
92
- "data-element": "subtitle",
93
- id: this.props.subtitleId,
94
- hasBackLink: !!this.props.backLink,
95
- hasSeparator: this.props.separator
96
- }, this.props.subheader);
97
- }
98
- }, {
99
- key: "separator",
100
- get: function () {
101
- return this.props.separator ? /*#__PURE__*/React.createElement(StyledSeparator, null) : null;
102
- }
103
- }, {
104
- key: "divider",
105
- get: function () {
106
- return this.props.divider ? /*#__PURE__*/React.createElement(StyledDivider, {
107
- "data-element": "divider"
108
- }) : null;
109
- }
110
- }, {
111
- key: "pills",
112
- get: function () {
113
- return this.props.pills ? /*#__PURE__*/React.createElement(StyledHeadingPills, {
114
- "data-element": "pills"
115
- }, this.props.pills) : null;
116
- }
117
- }, {
118
- key: "render",
119
- value: function render() {
120
- if (!this.props.title) {
121
- return null;
122
- }
123
-
124
- const marginProps = filterStyledSystemMarginProps(this.props);
125
- return /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", this.props), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
126
- "data-element": "header-container",
127
- divider: this.props.divider,
128
- subheader: this.props.subheader,
129
- hasBackLink: !!this.props.backLink
130
- }, this.back, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(StyledHeadingTitle, {
131
- withMargin: this.props.pills || this.props.help,
132
- variant: "h1",
133
- "data-element": "title",
134
- id: this.props.titleId
135
- }, this.props.title), this.help, this.pills), this.separator, this.subheader), this.divider, this.props.children);
136
- }
137
- }]);
138
-
139
- return Heading;
140
- }(React.Component);
11
+ const Heading = ({
12
+ children,
13
+ backLink,
14
+ divider = true,
15
+ help,
16
+ helpAriaLabel,
17
+ helpLink,
18
+ pills,
19
+ separator = false,
20
+ subheader,
21
+ subtitleId,
22
+ title,
23
+ titleId,
24
+ ...rest
25
+ }) => {
26
+ const getHelp = () => {
27
+ return /*#__PURE__*/React.createElement(StyledHeaderHelp, {
28
+ "data-element": "help",
29
+ tooltipPosition: "right",
30
+ href: helpLink,
31
+ ariaLabel: helpAriaLabel
32
+ }, help);
33
+ };
34
+
35
+ const getBackButton = () => {
36
+ const backButtonProps = typeof backLink === "string" ? {
37
+ href: backLink
38
+ } : {
39
+ onClick: backLink
40
+ };
41
+ return /*#__PURE__*/React.createElement(StyledHeadingBackButton // this event allows an element to be focusable on click event on IE
42
+ , _extends({
43
+ onMouseDown: e => e.currentTarget.focus(),
44
+ "data-element": "back"
45
+ }, backButtonProps), /*#__PURE__*/React.createElement(StyledHeadingIcon, {
46
+ type: "chevron_left",
47
+ divider: divider
48
+ }));
49
+ };
50
+
51
+ const getSubheader = () => {
52
+ return /*#__PURE__*/React.createElement(StyledSubHeader, {
53
+ "data-element": "subtitle",
54
+ id: subtitleId,
55
+ hasBackLink: !!backLink,
56
+ hasSeparator: separator
57
+ }, subheader);
58
+ };
59
+
60
+ const getPills = () => {
61
+ return /*#__PURE__*/React.createElement(StyledHeadingPills, {
62
+ "data-element": "pills"
63
+ }, pills);
64
+ };
65
+
66
+ const marginProps = filterStyledSystemMarginProps(rest);
67
+ const dataAttributes = {
68
+ "data-element": rest["data-element"],
69
+ "data-role": rest["data-role"]
70
+ };
71
+ return title ? /*#__PURE__*/React.createElement(StyledHeading, _extends({}, tagComponent("heading", dataAttributes), marginProps), /*#__PURE__*/React.createElement(StyledHeader, {
72
+ "data-element": "header-container",
73
+ divider: divider,
74
+ subheader: subheader,
75
+ hasBackLink: !!backLink
76
+ }, backLink && getBackButton(), /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(StyledHeadingTitle, {
77
+ withMargin: pills || help,
78
+ variant: "h1",
79
+ "data-element": "title",
80
+ id: titleId
81
+ }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/React.createElement(StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/React.createElement(StyledDivider, {
82
+ "data-element": "divider"
83
+ }), children) : null;
84
+ };
141
85
 
142
86
  Heading.propTypes = { ...marginPropTypes,
143
87
 
144
- /**
145
- * Children elements
146
- */
88
+ /** Child elements */
147
89
  children: PropTypes.node,
148
90
 
149
- /**
150
- * Defines the title for the heading.
151
- */
91
+ /** Defines the title for the heading. */
152
92
  title: PropTypes.node,
153
93
 
154
- /**
155
- * Defines the title id for the heading.
156
- */
94
+ /** Defines the title id for the heading. */
157
95
  titleId: PropTypes.string,
158
96
 
159
- /**
160
- * Defines the subheader for the heading.
161
- */
97
+ /** Defines the subheader for the heading. */
162
98
  subheader: PropTypes.node,
163
99
 
164
- /**
165
- * Defines the subtitle id for the heading.
166
- */
100
+ /** Defines the subtitle id for the heading. */
167
101
  subtitleId: PropTypes.string,
168
102
 
169
- /**
170
- * Defines the help text for the heading.
171
- */
103
+ /** Defines the help text for the heading. */
172
104
  help: PropTypes.string,
173
105
 
174
- /**
175
- * Defines the help link for the heading.
176
- */
106
+ /** Defines the help link for the heading. */
177
107
  helpLink: PropTypes.string,
178
108
 
179
- /**
180
- * Defines the a href for the back link.
181
- */
109
+ /** Defines the a href for the back link. */
182
110
  backLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
183
111
 
184
- /**
185
- * Adds a divider below the heading and the content.
186
- */
112
+ /** Adds a divider below the heading and the content. */
187
113
  divider: PropTypes.bool,
188
114
 
189
- /**
190
- * Adds a separator between the title and the subheader.
191
- */
115
+ /** Adds a separator between the title and the subheader. */
192
116
  separator: PropTypes.bool,
193
117
 
194
- /**
195
- * Pills that will be added after the title.
196
- */
118
+ /** Pills that will be added after the title. */
197
119
  pills: PropTypes.node,
198
120
 
199
- /**
200
- * Aria label for rendered help component
201
- */
121
+ /** Aria label for rendered help component */
202
122
  helpAriaLabel: PropTypes.string
203
123
  };
204
- Heading.defaultProps = {
205
- divider: true,
206
- separator: false
207
- };
208
124
  export default Heading;
@@ -2,8 +2,8 @@ import * as React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
 
4
4
  export interface HeadingProps extends MarginProps {
5
- /** Custom className */
6
- className?: string;
5
+ /** Child elements */
6
+ children?: React.ReactNode;
7
7
  /** Defines the title for the heading. */
8
8
  title?: React.ReactNode;
9
9
  /** Defines the title id for the heading. */
@@ -24,8 +24,10 @@ export interface HeadingProps extends MarginProps {
24
24
  separator?: boolean;
25
25
  /** Pills that will be added after the title. */
26
26
  pills?: React.ReactNode;
27
+ /** Aria label for rendered help component */
28
+ helpAriaLabel?: string;
27
29
  }
28
30
 
29
- declare class Heading extends React.Component<HeadingProps> {}
31
+ declare function Heading(props: HeadingProps): JSX.Element | null;
30
32
 
31
33
  export default Heading;
@@ -82,15 +82,6 @@ declare namespace I18nProvider {
82
82
  titleSelect: PropTypes.Requireable<PropTypes.InferProps<{
83
83
  deselect: PropTypes.Requireable<(...args: any[]) => any>;
84
84
  }>>;
85
- wizards: PropTypes.Requireable<PropTypes.InferProps<{
86
- multiStep: PropTypes.Requireable<PropTypes.InferProps<{
87
- buttons: PropTypes.Requireable<PropTypes.InferProps<{
88
- submit: PropTypes.Requireable<(...args: any[]) => any>;
89
- next: PropTypes.Requireable<(...args: any[]) => any>;
90
- back: PropTypes.Requireable<(...args: any[]) => any>;
91
- }>>;
92
- }>>;
93
- }>>;
94
85
  }>>;
95
86
  export { locale_1 as locale };
96
87
  export const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -88,15 +88,6 @@ I18nProvider.propTypes = {
88
88
  }),
89
89
  titleSelect: PropTypes.shape({
90
90
  deselect: PropTypes.func
91
- }),
92
- wizards: PropTypes.shape({
93
- multiStep: PropTypes.shape({
94
- buttons: PropTypes.shape({
95
- submit: PropTypes.func,
96
- next: PropTypes.func,
97
- back: PropTypes.func
98
- })
99
- })
100
91
  })
101
92
  }),
102
93
  children: PropTypes.node.isRequired
@@ -12,6 +12,7 @@ import MenuItem from "../../menu-item";
12
12
  import { characterNavigation } from "../keyboard-navigation";
13
13
  import ScrollableBlock from "../../scrollable-block";
14
14
  import SubmenuContext from "./submenu.context";
15
+ import ClickAwayWrapper from "../../../../__internal__/click-away-wrapper";
15
16
  const Submenu = /*#__PURE__*/React.forwardRef(({
16
17
  children,
17
18
  className,
@@ -183,12 +184,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
183
184
  }
184
185
  }
185
186
  }, [submenuFocusIndex, submenuOpen, href, menuContext, arrayOfFormattedChildren, numberOfChildren, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
186
- const onClickOutside = useCallback(event => {
187
- if (!Events.composedPath(event).includes(submenuRef.current)) {
188
- document.removeEventListener("click", onClickOutside);
189
- closeSubmenu();
190
- }
191
- }, [closeSubmenu]);
187
+
188
+ const handleClickAway = () => {
189
+ document.removeEventListener("click", handleClickAway);
190
+ closeSubmenu();
191
+ };
192
192
 
193
193
  const handleClick = event => {
194
194
  if (clickToOpen) {
@@ -207,15 +207,6 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
207
207
  } // eslint-disable-next-line react-hooks/exhaustive-deps
208
208
 
209
209
  }, [characterString]);
210
- useEffect(() => {
211
- if (submenuOpen) {
212
- document.addEventListener("click", onClickOutside);
213
- }
214
-
215
- return function cleanup() {
216
- document.removeEventListener("click", onClickOutside);
217
- };
218
- }, [onClickOutside, submenuOpen]);
219
210
 
220
211
  if (inFullscreenView) {
221
212
  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -249,7 +240,10 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
249
240
  }, child))));
250
241
  }
251
242
 
252
- return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
243
+ return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
244
+ handleClickAway: handleClickAway,
245
+ targets: [submenuRef]
246
+ }, /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
253
247
  "data-component": "submenu-wrapper",
254
248
  onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
255
249
  onMouseLeave: () => closeSubmenu(),
@@ -287,7 +281,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
287
281
  updateFocusIndex: setSubmenuFocusIndex,
288
282
  itemIndex: child.type === MenuItem ? index : undefined
289
283
  }
290
- }, child))));
284
+ }, child)))));
291
285
  });
292
286
  Submenu.propTypes = {
293
287
  /** Children elements */
@@ -1,6 +1,5 @@
1
1
  export { default as Menu } from "./menu";
2
2
  export { default as MenuItem } from "./menu-item/menu-item";
3
3
  export { default as ScrollableBlock } from "./scrollable-block/scrollable-block";
4
- export { default as SubmenuBlock } from "./submenu-block/submenu-block";
5
4
  export { default as MenuDivider } from "./menu-divider/menu-divider";
6
5
  export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title";
@@ -1,6 +1,5 @@
1
1
  export { default as Menu } from "./menu.component";
2
2
  export { default as MenuItem } from "./menu-item/menu-item.component";
3
- export { default as SubmenuBlock } from "./submenu-block/submenu-block.component";
4
3
  export { default as MenuDivider } from "./menu-divider/menu-divider.component";
5
4
  export { default as MenuSegmentTitle } from "./menu-segment-title/menu-segment-title.component";
6
5
  export { default as MenuFullscreen } from "./menu-full-screen/menu-full-screen.component";
@@ -1,6 +1,6 @@
1
1
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
2
 
3
- import React, { useContext, useLayoutEffect, useRef } from "react";
3
+ import React, { useContext, useRef } from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import { StyledMenuFullscreen, StyledMenuFullscreenHeader } from "./menu-full-screen.style";
6
6
  import { StyledMenuWrapper } from "../menu.style";
@@ -33,19 +33,6 @@ const MenuFullscreen = ({
33
33
  }
34
34
  };
35
35
 
36
- useLayoutEffect(() => {
37
- const checkTransitionEnd = () => {
38
- menuContentRef.current.focus();
39
- };
40
-
41
- const wrapperRef = menuWrapperRef.current;
42
-
43
- if (isOpen) {
44
- wrapperRef.addEventListener("transitionend", checkTransitionEnd);
45
- } else {
46
- wrapperRef.removeEventListener("transitionend", checkTransitionEnd);
47
- }
48
- }, [isOpen]);
49
36
  const scrollVariants = {
50
37
  light: "light",
51
38
  dark: "dark",
@@ -61,8 +48,8 @@ const MenuFullscreen = ({
61
48
  return /*#__PURE__*/React.createElement("li", {
62
49
  "aria-label": "menu-fullscreen"
63
50
  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
64
- autoFocus: false,
65
- wrapperRef: menuWrapperRef
51
+ wrapperRef: menuWrapperRef,
52
+ isOpen: isOpen
66
53
  }, /*#__PURE__*/React.createElement(StyledMenuFullscreen, _extends({
67
54
  "data-component": "menu-fullscreen",
68
55
  ref: menuWrapperRef,
@@ -93,8 +80,7 @@ const MenuFullscreen = ({
93
80
  display: "flex",
94
81
  flexDirection: "column",
95
82
  role: "list",
96
- inFullscreenView: true,
97
- tabIndex: -1
83
+ inFullscreenView: true
98
84
  }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(MenuContext.Provider, {
99
85
  value: {
100
86
  inFullscreenView: true,
@@ -12,6 +12,7 @@ const StyledMenuFullscreen = styled.div`
12
12
  bottom: 0;
13
13
  height: 100vh;
14
14
  width: 100%;
15
+ outline: none;
15
16
 
16
17
  a,
17
18
  button,
@@ -10,7 +10,6 @@ import Events from "../../../__internal__/utils/helpers/events";
10
10
  import MenuContext from "../menu.context";
11
11
  import Submenu from "../__internal__/submenu/submenu.component";
12
12
  import SubmenuContext from "../__internal__/submenu/submenu.context";
13
- import SubmenuBlock from "../submenu-block/submenu-block.component";
14
13
  import { StyledMenuItem } from "../menu.style";
15
14
  import Search from "../../search";
16
15
 
@@ -45,11 +44,6 @@ const MenuItem = ({
45
44
  inFullscreenView
46
45
  } = menuContext;
47
46
  const childrenItems = React.Children.map(children, child => {
48
- if (child && child.type === SubmenuBlock) {
49
- const childArray = Array.isArray(child.props.children) ? child.props.children : [child.props.children];
50
- return [...childArray.map(innerChild => innerChild)];
51
- }
52
-
53
47
  if ((child === null || child === void 0 ? void 0 : child.type) === Search) {
54
48
  isChildSearch.current = true;
55
49
  }
@@ -6,5 +6,5 @@ export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonTy
6
6
  /** Second text child, renders under main text, only when size is "large" */
7
7
  subtext?: string;
8
8
  }
9
- export declare const MultiActionButton: ({ align, disabled, as, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
9
+ export declare const MultiActionButton: ({ align, disabled, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
10
10
  export default MultiActionButton;