carbon-react 146.0.1 → 146.2.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 (11) hide show
  1. package/esm/components/action-popover/action-popover.component.d.ts +4 -1
  2. package/esm/components/action-popover/action-popover.component.js +182 -11
  3. package/esm/components/action-popover/index.d.ts +1 -0
  4. package/esm/components/step-flow/step-flow.component.d.ts +9 -1
  5. package/esm/components/step-flow/step-flow.component.js +12 -1
  6. package/lib/components/action-popover/action-popover.component.d.ts +4 -1
  7. package/lib/components/action-popover/action-popover.component.js +180 -11
  8. package/lib/components/action-popover/index.d.ts +1 -0
  9. package/lib/components/step-flow/step-flow.component.d.ts +9 -1
  10. package/lib/components/step-flow/step-flow.component.js +12 -1
  11. package/package.json +1 -1
package/esm/components/action-popover/action-popover.component.d.ts CHANGED
@@ -39,5 +39,8 @@ export interface ActionPopoverProps extends MarginProps {
39
39
  /** Prop to specify an aria-describedby for the component */
40
40
  "aria-describedby"?: string;
41
41
  }
42
- export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
42
+ export declare type ActionPopoverHandle = {
43
+ focusButton: () => void;
44
+ } | null;
45
+ export declare const ActionPopover: React.ForwardRefExoticComponent<ActionPopoverProps & React.RefAttributes<ActionPopoverHandle>>;
43
46
  export default ActionPopover;
package/esm/components/action-popover/action-popover.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import React, { useState, useCallback, useMemo, useEffect, useRef } from "react";
2
+ import React, { useState, useCallback, useMemo, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import invariant from "invariant";
5
5
  import { MenuButton, ButtonIcon, StyledButtonIcon } from "./action-popover.style";
@@ -15,7 +15,7 @@ import useModalManager from "../../hooks/__internal__/useModalManager";
15
15
  import { findFirstFocusableItem, findLastFocusableItem, getItems } from "./__internal__/action-popover-utils";
16
16
  const onOpenDefault = () => {};
17
17
  const onCloseDefault = () => {};
18
- export const ActionPopover = ({
18
+ const ActionPopover = /*#__PURE__*/forwardRef(({
19
19
  children,
20
20
  id,
21
21
  onOpen = onOpenDefault,
@@ -29,7 +29,7 @@ export const ActionPopover = ({
29
29
  "aria-labelledby": ariaLabelledBy,
30
30
  "aria-describedby": ariaDescribedBy,
31
31
  ...rest
32
- }) => {
32
+ }, ref) => {
33
33
  const l = useLocale();
34
34
  const [isOpen, setOpenState] = useState(false);
35
35
  const [focusIndex, setFocusIndex] = useState(0);
@@ -74,6 +74,11 @@ export const ActionPopover = ({
74
74
  const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
75
75
  button?.focus();
76
76
  }, []);
77
+ useImperativeHandle(ref, () => ({
78
+ focusButton() {
79
+ focusButton();
80
+ }
81
+ }), [focusButton]);
77
82
  const onButtonClick = useCallback(e => {
78
83
  e.stopPropagation();
79
84
  const isOpening = !isOpen;
@@ -89,15 +94,10 @@ export const ActionPopover = ({
89
94
  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
90
95
 
91
96
  const onButtonKeyDown = useCallback(e => {
92
- if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e)) {
93
- e.preventDefault();
94
- e.stopPropagation();
95
- setFocusIndex(firstFocusableItem);
96
- setOpen(true);
97
- } else if (Events.isUpKey(e)) {
97
+ if (Events.isSpaceKey(e) || Events.isDownKey(e) || Events.isEnterKey(e) || Events.isUpKey(e)) {
98
98
  e.preventDefault();
99
99
  e.stopPropagation();
100
- setFocusIndex(lastFocusableItem);
100
+ setFocusIndex(Events.isUpKey(e) ? lastFocusableItem : firstFocusableItem);
101
101
  setOpen(true);
102
102
  }
103
103
  }, [firstFocusableItem, lastFocusableItem, setOpen]);
@@ -202,5 +202,176 @@ export const ActionPopover = ({
202
202
  "data-component": "action-popover",
203
203
  ref: menu
204
204
  }, menuProps), children))));
205
- };
205
+ });
206
+ if (process.env.NODE_ENV !== "production") {
207
+ ActionPopover.propTypes = {
208
+ "aria-describedby": PropTypes.string,
209
+ "aria-label": PropTypes.string,
210
+ "aria-labelledby": PropTypes.string,
211
+ "children": PropTypes.node,
212
+ "horizontalAlignment": PropTypes.oneOf(["left", "right"]),
213
+ "id": PropTypes.string,
214
+ "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
215
+ "__@toStringTag": PropTypes.string.isRequired,
216
+ "description": PropTypes.string,
217
+ "toString": PropTypes.func.isRequired,
218
+ "valueOf": PropTypes.func.isRequired
219
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
220
+ "__@toStringTag": PropTypes.string.isRequired,
221
+ "description": PropTypes.string,
222
+ "toString": PropTypes.func.isRequired,
223
+ "valueOf": PropTypes.func.isRequired
224
+ }), PropTypes.string]),
225
+ "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
226
+ "__@toStringTag": PropTypes.string.isRequired,
227
+ "description": PropTypes.string,
228
+ "toString": PropTypes.func.isRequired,
229
+ "valueOf": PropTypes.func.isRequired
230
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
231
+ "__@toStringTag": PropTypes.string.isRequired,
232
+ "description": PropTypes.string,
233
+ "toString": PropTypes.func.isRequired,
234
+ "valueOf": PropTypes.func.isRequired
235
+ }), PropTypes.string]),
236
+ "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
237
+ "__@toStringTag": PropTypes.string.isRequired,
238
+ "description": PropTypes.string,
239
+ "toString": PropTypes.func.isRequired,
240
+ "valueOf": PropTypes.func.isRequired
241
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
242
+ "__@toStringTag": PropTypes.string.isRequired,
243
+ "description": PropTypes.string,
244
+ "toString": PropTypes.func.isRequired,
245
+ "valueOf": PropTypes.func.isRequired
246
+ }), PropTypes.string]),
247
+ "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
248
+ "__@toStringTag": PropTypes.string.isRequired,
249
+ "description": PropTypes.string,
250
+ "toString": PropTypes.func.isRequired,
251
+ "valueOf": PropTypes.func.isRequired
252
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
253
+ "__@toStringTag": PropTypes.string.isRequired,
254
+ "description": PropTypes.string,
255
+ "toString": PropTypes.func.isRequired,
256
+ "valueOf": PropTypes.func.isRequired
257
+ }), PropTypes.string]),
258
+ "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
259
+ "__@toStringTag": PropTypes.string.isRequired,
260
+ "description": PropTypes.string,
261
+ "toString": PropTypes.func.isRequired,
262
+ "valueOf": PropTypes.func.isRequired
263
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
264
+ "__@toStringTag": PropTypes.string.isRequired,
265
+ "description": PropTypes.string,
266
+ "toString": PropTypes.func.isRequired,
267
+ "valueOf": PropTypes.func.isRequired
268
+ }), PropTypes.string]),
269
+ "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
270
+ "__@toStringTag": PropTypes.string.isRequired,
271
+ "description": PropTypes.string,
272
+ "toString": PropTypes.func.isRequired,
273
+ "valueOf": PropTypes.func.isRequired
274
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
275
+ "__@toStringTag": PropTypes.string.isRequired,
276
+ "description": PropTypes.string,
277
+ "toString": PropTypes.func.isRequired,
278
+ "valueOf": PropTypes.func.isRequired
279
+ }), PropTypes.string]),
280
+ "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
281
+ "__@toStringTag": PropTypes.string.isRequired,
282
+ "description": PropTypes.string,
283
+ "toString": PropTypes.func.isRequired,
284
+ "valueOf": PropTypes.func.isRequired
285
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
286
+ "__@toStringTag": PropTypes.string.isRequired,
287
+ "description": PropTypes.string,
288
+ "toString": PropTypes.func.isRequired,
289
+ "valueOf": PropTypes.func.isRequired
290
+ }), PropTypes.string]),
291
+ "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
292
+ "__@toStringTag": PropTypes.string.isRequired,
293
+ "description": PropTypes.string,
294
+ "toString": PropTypes.func.isRequired,
295
+ "valueOf": PropTypes.func.isRequired
296
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
297
+ "__@toStringTag": PropTypes.string.isRequired,
298
+ "description": PropTypes.string,
299
+ "toString": PropTypes.func.isRequired,
300
+ "valueOf": PropTypes.func.isRequired
301
+ }), PropTypes.string]),
302
+ "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
303
+ "__@toStringTag": PropTypes.string.isRequired,
304
+ "description": PropTypes.string,
305
+ "toString": PropTypes.func.isRequired,
306
+ "valueOf": PropTypes.func.isRequired
307
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
308
+ "__@toStringTag": PropTypes.string.isRequired,
309
+ "description": PropTypes.string,
310
+ "toString": PropTypes.func.isRequired,
311
+ "valueOf": PropTypes.func.isRequired
312
+ }), PropTypes.string]),
313
+ "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
314
+ "__@toStringTag": PropTypes.string.isRequired,
315
+ "description": PropTypes.string,
316
+ "toString": PropTypes.func.isRequired,
317
+ "valueOf": PropTypes.func.isRequired
318
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
319
+ "__@toStringTag": PropTypes.string.isRequired,
320
+ "description": PropTypes.string,
321
+ "toString": PropTypes.func.isRequired,
322
+ "valueOf": PropTypes.func.isRequired
323
+ }), PropTypes.string]),
324
+ "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
325
+ "__@toStringTag": PropTypes.string.isRequired,
326
+ "description": PropTypes.string,
327
+ "toString": PropTypes.func.isRequired,
328
+ "valueOf": PropTypes.func.isRequired
329
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
330
+ "__@toStringTag": PropTypes.string.isRequired,
331
+ "description": PropTypes.string,
332
+ "toString": PropTypes.func.isRequired,
333
+ "valueOf": PropTypes.func.isRequired
334
+ }), PropTypes.string]),
335
+ "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
336
+ "__@toStringTag": PropTypes.string.isRequired,
337
+ "description": PropTypes.string,
338
+ "toString": PropTypes.func.isRequired,
339
+ "valueOf": PropTypes.func.isRequired
340
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
341
+ "__@toStringTag": PropTypes.string.isRequired,
342
+ "description": PropTypes.string,
343
+ "toString": PropTypes.func.isRequired,
344
+ "valueOf": PropTypes.func.isRequired
345
+ }), PropTypes.string]),
346
+ "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
347
+ "__@toStringTag": PropTypes.string.isRequired,
348
+ "description": PropTypes.string,
349
+ "toString": PropTypes.func.isRequired,
350
+ "valueOf": PropTypes.func.isRequired
351
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
352
+ "__@toStringTag": PropTypes.string.isRequired,
353
+ "description": PropTypes.string,
354
+ "toString": PropTypes.func.isRequired,
355
+ "valueOf": PropTypes.func.isRequired
356
+ }), PropTypes.string]),
357
+ "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
358
+ "__@toStringTag": PropTypes.string.isRequired,
359
+ "description": PropTypes.string,
360
+ "toString": PropTypes.func.isRequired,
361
+ "valueOf": PropTypes.func.isRequired
362
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
363
+ "__@toStringTag": PropTypes.string.isRequired,
364
+ "description": PropTypes.string,
365
+ "toString": PropTypes.func.isRequired,
366
+ "valueOf": PropTypes.func.isRequired
367
+ }), PropTypes.string]),
368
+ "onClose": PropTypes.func,
369
+ "onOpen": PropTypes.func,
370
+ "placement": PropTypes.oneOf(["bottom", "top"]),
371
+ "renderButton": PropTypes.func,
372
+ "rightAlignMenu": PropTypes.bool,
373
+ "submenuPosition": PropTypes.oneOf(["left", "right"])
374
+ };
375
+ }
376
+ export { ActionPopover };
206
377
  export default ActionPopover;
package/esm/components/action-popover/index.d.ts CHANGED
@@ -8,3 +8,4 @@ export { default as ActionPopoverMenuButton } from "./action-popover-menu-button
8
8
  export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
9
9
  export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";
10
10
  export type { RenderButtonProps } from "./action-popover.component";
11
+ export type { ActionPopoverHandle } from "./action-popover.component";
package/esm/components/step-flow/step-flow.component.d.ts CHANGED
@@ -2,7 +2,15 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
4
  export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
5
- export interface StepFlowProps extends MarginProps, TagProps {
5
+ interface StepFlowAriaProps {
6
+ /** Prop to specify the aria-label of the component */
7
+ "aria-label"?: string;
8
+ /** Prop to specify the aria-labelledby of the component */
9
+ "aria-labelledby"?: string;
10
+ /** Prop to specify the aria-describedby of the component */
11
+ "aria-describedby"?: string;
12
+ }
13
+ export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
6
14
  /** A category for the user journey. */
7
15
  category?: string;
8
16
  /** The title of the current step, this can be a string or a valid React node
package/esm/components/step-flow/step-flow.component.js CHANGED
@@ -18,6 +18,9 @@ const StepFlow = /*#__PURE__*/forwardRef(({
18
18
  showProgressIndicator = false,
19
19
  showCloseIcon = false,
20
20
  onDismiss,
21
+ "aria-label": ariaLabel,
22
+ "aria-labelledby": ariaLabelledBy,
23
+ "aria-describedby": ariaDescribedBy,
21
24
  ...rest
22
25
  }, ref) => {
23
26
  const totalStepsArray = Array.from({
@@ -89,7 +92,12 @@ const StepFlow = /*#__PURE__*/forwardRef(({
89
92
  "data-element": "step-label",
90
93
  "aria-hidden": "true"
91
94
  }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
92
- return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({}, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
95
+ return /*#__PURE__*/React.createElement(StyledStepFlow, _extends({
96
+ role: "group",
97
+ "aria-label": ariaLabel,
98
+ "aria-describedby": ariaDescribedBy,
99
+ "aria-labelledby": ariaLabelledBy
100
+ }, rest, tagComponent("step-flow", rest)), /*#__PURE__*/React.createElement(StyledStepContent, null, category ? /*#__PURE__*/React.createElement(StyledStepContentText, null, /*#__PURE__*/React.createElement(Typography, {
93
101
  fontWeight: "400",
94
102
  fontSize: "var(--fontSizes100)",
95
103
  lineHeight: "var(--sizing250)",
@@ -103,6 +111,9 @@ const StepFlow = /*#__PURE__*/forwardRef(({
103
111
  });
104
112
  if (process.env.NODE_ENV !== "production") {
105
113
  StepFlow.propTypes = {
114
+ "aria-describedby": PropTypes.string,
115
+ "aria-label": PropTypes.string,
116
+ "aria-labelledby": PropTypes.string,
106
117
  "category": PropTypes.string,
107
118
  "children": PropTypes.node,
108
119
  "currentStep": PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
package/lib/components/action-popover/action-popover.component.d.ts CHANGED
@@ -39,5 +39,8 @@ export interface ActionPopoverProps extends MarginProps {
39
39
  /** Prop to specify an aria-describedby for the component */
40
40
  "aria-describedby"?: string;
41
41
  }
42
- export declare const ActionPopover: ({ children, id, onOpen, onClose, rightAlignMenu, renderButton, placement, horizontalAlignment, submenuPosition, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ActionPopoverProps) => React.JSX.Element;
42
+ export declare type ActionPopoverHandle = {
43
+ focusButton: () => void;
44
+ } | null;
45
+ export declare const ActionPopover: React.ForwardRefExoticComponent<ActionPopoverProps & React.RefAttributes<ActionPopoverHandle>>;
43
46
  export default ActionPopover;
package/lib/components/action-popover/action-popover.component.js CHANGED
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
24
24
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
25
25
  const onOpenDefault = () => {};
26
26
  const onCloseDefault = () => {};
27
- const ActionPopover = ({
27
+ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef)(({
28
28
  children,
29
29
  id,
30
30
  onOpen = onOpenDefault,
@@ -38,7 +38,7 @@ const ActionPopover = ({
38
38
  "aria-labelledby": ariaLabelledBy,
39
39
  "aria-describedby": ariaDescribedBy,
40
40
  ...rest
41
- }) => {
41
+ }, ref) => {
42
42
  const l = (0, _useLocale.default)();
43
43
  const [isOpen, setOpenState] = (0, _react.useState)(false);
44
44
  const [focusIndex, setFocusIndex] = (0, _react.useState)(0);
@@ -83,6 +83,11 @@ const ActionPopover = ({
83
83
  const button = buttonRef.current?.querySelector("[data-element='action-popover-button']");
84
84
  button?.focus();
85
85
  }, []);
86
+ (0, _react.useImperativeHandle)(ref, () => ({
87
+ focusButton() {
88
+ focusButton();
89
+ }
90
+ }), [focusButton]);
86
91
  const onButtonClick = (0, _react.useCallback)(e => {
87
92
  e.stopPropagation();
88
93
  const isOpening = !isOpen;
@@ -98,15 +103,10 @@ const ActionPopover = ({
98
103
  // https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html
99
104
 
100
105
  const onButtonKeyDown = (0, _react.useCallback)(e => {
101
- if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e)) {
106
+ if (_events.default.isSpaceKey(e) || _events.default.isDownKey(e) || _events.default.isEnterKey(e) || _events.default.isUpKey(e)) {
102
107
  e.preventDefault();
103
108
  e.stopPropagation();
104
- setFocusIndex(firstFocusableItem);
105
- setOpen(true);
106
- } else if (_events.default.isUpKey(e)) {
107
- e.preventDefault();
108
- e.stopPropagation();
109
- setFocusIndex(lastFocusableItem);
109
+ setFocusIndex(_events.default.isUpKey(e) ? lastFocusableItem : firstFocusableItem);
110
110
  setOpen(true);
111
111
  }
112
112
  }, [firstFocusableItem, lastFocusableItem, setOpen]);
@@ -211,6 +211,175 @@ const ActionPopover = ({
211
211
  "data-component": "action-popover",
212
212
  ref: menu
213
213
  }, menuProps), children))));
214
- };
215
- exports.ActionPopover = ActionPopover;
214
+ });
215
+ if (process.env.NODE_ENV !== "production") {
216
+ ActionPopover.propTypes = {
217
+ "aria-describedby": _propTypes.default.string,
218
+ "aria-label": _propTypes.default.string,
219
+ "aria-labelledby": _propTypes.default.string,
220
+ "children": _propTypes.default.node,
221
+ "horizontalAlignment": _propTypes.default.oneOf(["left", "right"]),
222
+ "id": _propTypes.default.string,
223
+ "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
224
+ "__@toStringTag": _propTypes.default.string.isRequired,
225
+ "description": _propTypes.default.string,
226
+ "toString": _propTypes.default.func.isRequired,
227
+ "valueOf": _propTypes.default.func.isRequired
228
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
229
+ "__@toStringTag": _propTypes.default.string.isRequired,
230
+ "description": _propTypes.default.string,
231
+ "toString": _propTypes.default.func.isRequired,
232
+ "valueOf": _propTypes.default.func.isRequired
233
+ }), _propTypes.default.string]),
234
+ "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
235
+ "__@toStringTag": _propTypes.default.string.isRequired,
236
+ "description": _propTypes.default.string,
237
+ "toString": _propTypes.default.func.isRequired,
238
+ "valueOf": _propTypes.default.func.isRequired
239
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
240
+ "__@toStringTag": _propTypes.default.string.isRequired,
241
+ "description": _propTypes.default.string,
242
+ "toString": _propTypes.default.func.isRequired,
243
+ "valueOf": _propTypes.default.func.isRequired
244
+ }), _propTypes.default.string]),
245
+ "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
246
+ "__@toStringTag": _propTypes.default.string.isRequired,
247
+ "description": _propTypes.default.string,
248
+ "toString": _propTypes.default.func.isRequired,
249
+ "valueOf": _propTypes.default.func.isRequired
250
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
251
+ "__@toStringTag": _propTypes.default.string.isRequired,
252
+ "description": _propTypes.default.string,
253
+ "toString": _propTypes.default.func.isRequired,
254
+ "valueOf": _propTypes.default.func.isRequired
255
+ }), _propTypes.default.string]),
256
+ "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
257
+ "__@toStringTag": _propTypes.default.string.isRequired,
258
+ "description": _propTypes.default.string,
259
+ "toString": _propTypes.default.func.isRequired,
260
+ "valueOf": _propTypes.default.func.isRequired
261
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
262
+ "__@toStringTag": _propTypes.default.string.isRequired,
263
+ "description": _propTypes.default.string,
264
+ "toString": _propTypes.default.func.isRequired,
265
+ "valueOf": _propTypes.default.func.isRequired
266
+ }), _propTypes.default.string]),
267
+ "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
268
+ "__@toStringTag": _propTypes.default.string.isRequired,
269
+ "description": _propTypes.default.string,
270
+ "toString": _propTypes.default.func.isRequired,
271
+ "valueOf": _propTypes.default.func.isRequired
272
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
273
+ "__@toStringTag": _propTypes.default.string.isRequired,
274
+ "description": _propTypes.default.string,
275
+ "toString": _propTypes.default.func.isRequired,
276
+ "valueOf": _propTypes.default.func.isRequired
277
+ }), _propTypes.default.string]),
278
+ "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
279
+ "__@toStringTag": _propTypes.default.string.isRequired,
280
+ "description": _propTypes.default.string,
281
+ "toString": _propTypes.default.func.isRequired,
282
+ "valueOf": _propTypes.default.func.isRequired
283
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
284
+ "__@toStringTag": _propTypes.default.string.isRequired,
285
+ "description": _propTypes.default.string,
286
+ "toString": _propTypes.default.func.isRequired,
287
+ "valueOf": _propTypes.default.func.isRequired
288
+ }), _propTypes.default.string]),
289
+ "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
290
+ "__@toStringTag": _propTypes.default.string.isRequired,
291
+ "description": _propTypes.default.string,
292
+ "toString": _propTypes.default.func.isRequired,
293
+ "valueOf": _propTypes.default.func.isRequired
294
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
295
+ "__@toStringTag": _propTypes.default.string.isRequired,
296
+ "description": _propTypes.default.string,
297
+ "toString": _propTypes.default.func.isRequired,
298
+ "valueOf": _propTypes.default.func.isRequired
299
+ }), _propTypes.default.string]),
300
+ "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
301
+ "__@toStringTag": _propTypes.default.string.isRequired,
302
+ "description": _propTypes.default.string,
303
+ "toString": _propTypes.default.func.isRequired,
304
+ "valueOf": _propTypes.default.func.isRequired
305
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
306
+ "__@toStringTag": _propTypes.default.string.isRequired,
307
+ "description": _propTypes.default.string,
308
+ "toString": _propTypes.default.func.isRequired,
309
+ "valueOf": _propTypes.default.func.isRequired
310
+ }), _propTypes.default.string]),
311
+ "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
312
+ "__@toStringTag": _propTypes.default.string.isRequired,
313
+ "description": _propTypes.default.string,
314
+ "toString": _propTypes.default.func.isRequired,
315
+ "valueOf": _propTypes.default.func.isRequired
316
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
317
+ "__@toStringTag": _propTypes.default.string.isRequired,
318
+ "description": _propTypes.default.string,
319
+ "toString": _propTypes.default.func.isRequired,
320
+ "valueOf": _propTypes.default.func.isRequired
321
+ }), _propTypes.default.string]),
322
+ "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
323
+ "__@toStringTag": _propTypes.default.string.isRequired,
324
+ "description": _propTypes.default.string,
325
+ "toString": _propTypes.default.func.isRequired,
326
+ "valueOf": _propTypes.default.func.isRequired
327
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
328
+ "__@toStringTag": _propTypes.default.string.isRequired,
329
+ "description": _propTypes.default.string,
330
+ "toString": _propTypes.default.func.isRequired,
331
+ "valueOf": _propTypes.default.func.isRequired
332
+ }), _propTypes.default.string]),
333
+ "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
334
+ "__@toStringTag": _propTypes.default.string.isRequired,
335
+ "description": _propTypes.default.string,
336
+ "toString": _propTypes.default.func.isRequired,
337
+ "valueOf": _propTypes.default.func.isRequired
338
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
339
+ "__@toStringTag": _propTypes.default.string.isRequired,
340
+ "description": _propTypes.default.string,
341
+ "toString": _propTypes.default.func.isRequired,
342
+ "valueOf": _propTypes.default.func.isRequired
343
+ }), _propTypes.default.string]),
344
+ "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
345
+ "__@toStringTag": _propTypes.default.string.isRequired,
346
+ "description": _propTypes.default.string,
347
+ "toString": _propTypes.default.func.isRequired,
348
+ "valueOf": _propTypes.default.func.isRequired
349
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
350
+ "__@toStringTag": _propTypes.default.string.isRequired,
351
+ "description": _propTypes.default.string,
352
+ "toString": _propTypes.default.func.isRequired,
353
+ "valueOf": _propTypes.default.func.isRequired
354
+ }), _propTypes.default.string]),
355
+ "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
356
+ "__@toStringTag": _propTypes.default.string.isRequired,
357
+ "description": _propTypes.default.string,
358
+ "toString": _propTypes.default.func.isRequired,
359
+ "valueOf": _propTypes.default.func.isRequired
360
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
361
+ "__@toStringTag": _propTypes.default.string.isRequired,
362
+ "description": _propTypes.default.string,
363
+ "toString": _propTypes.default.func.isRequired,
364
+ "valueOf": _propTypes.default.func.isRequired
365
+ }), _propTypes.default.string]),
366
+ "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
367
+ "__@toStringTag": _propTypes.default.string.isRequired,
368
+ "description": _propTypes.default.string,
369
+ "toString": _propTypes.default.func.isRequired,
370
+ "valueOf": _propTypes.default.func.isRequired
371
+ }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
372
+ "__@toStringTag": _propTypes.default.string.isRequired,
373
+ "description": _propTypes.default.string,
374
+ "toString": _propTypes.default.func.isRequired,
375
+ "valueOf": _propTypes.default.func.isRequired
376
+ }), _propTypes.default.string]),
377
+ "onClose": _propTypes.default.func,
378
+ "onOpen": _propTypes.default.func,
379
+ "placement": _propTypes.default.oneOf(["bottom", "top"]),
380
+ "renderButton": _propTypes.default.func,
381
+ "rightAlignMenu": _propTypes.default.bool,
382
+ "submenuPosition": _propTypes.default.oneOf(["left", "right"])
383
+ };
384
+ }
216
385
  var _default = exports.default = ActionPopover;
package/lib/components/action-popover/index.d.ts CHANGED
@@ -8,3 +8,4 @@ export { default as ActionPopoverMenuButton } from "./action-popover-menu-button
8
8
  export type { ActionPopoverMenuButtonProps } from "./action-popover-menu-button/action-popover-menu-button.component";
9
9
  export { default as ActionPopoverDivider } from "./action-popover-divider/action-popover-divider.component";
10
10
  export type { RenderButtonProps } from "./action-popover.component";
11
+ export type { ActionPopoverHandle } from "./action-popover.component";
package/lib/components/step-flow/step-flow.component.d.ts CHANGED
@@ -2,7 +2,15 @@ import React from "react";
2
2
  import { MarginProps } from "styled-system";
3
3
  import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
4
4
  export declare type Steps = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
5
- export interface StepFlowProps extends MarginProps, TagProps {
5
+ interface StepFlowAriaProps {
6
+ /** Prop to specify the aria-label of the component */
7
+ "aria-label"?: string;
8
+ /** Prop to specify the aria-labelledby of the component */
9
+ "aria-labelledby"?: string;
10
+ /** Prop to specify the aria-describedby of the component */
11
+ "aria-describedby"?: string;
12
+ }
13
+ export interface StepFlowProps extends StepFlowAriaProps, MarginProps, TagProps {
6
14
  /** A category for the user journey. */
7
15
  category?: string;
8
16
  /** The title of the current step, this can be a string or a valid React node
package/lib/components/step-flow/step-flow.component.js CHANGED
@@ -27,6 +27,9 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
27
27
  showProgressIndicator = false,
28
28
  showCloseIcon = false,
29
29
  onDismiss,
30
+ "aria-label": ariaLabel,
31
+ "aria-labelledby": ariaLabelledBy,
32
+ "aria-describedby": ariaDescribedBy,
30
33
  ...rest
31
34
  }, ref) => {
32
35
  const totalStepsArray = Array.from({
@@ -98,7 +101,12 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
98
101
  "data-element": "step-label",
99
102
  "aria-hidden": "true"
100
103
  }, locale.stepFlow.stepLabel(validatedCurrentStep, totalSteps));
101
- return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepFlow, _extends({}, rest, (0, _tags.default)("step-flow", rest)), /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContent, null, category ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContentText, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
104
+ return /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepFlow, _extends({
105
+ role: "group",
106
+ "aria-label": ariaLabel,
107
+ "aria-describedby": ariaDescribedBy,
108
+ "aria-labelledby": ariaLabelledBy
109
+ }, rest, (0, _tags.default)("step-flow", rest)), /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContent, null, category ? /*#__PURE__*/_react.default.createElement(_stepFlow.StyledStepContentText, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
102
110
  fontWeight: "400",
103
111
  fontSize: "var(--fontSizes100)",
104
112
  lineHeight: "var(--sizing250)",
@@ -112,6 +120,9 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
112
120
  });
113
121
  if (process.env.NODE_ENV !== "production") {
114
122
  StepFlow.propTypes = {
123
+ "aria-describedby": _propTypes.default.string,
124
+ "aria-label": _propTypes.default.string,
125
+ "aria-labelledby": _propTypes.default.string,
115
126
  "category": _propTypes.default.string,
116
127
  "children": _propTypes.default.node,
117
128
  "currentStep": _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8]).isRequired,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "146.0.1",
3
+ "version": "146.2.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",