carbon-react 116.2.0 → 116.2.1

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 (32) hide show
  1. package/esm/components/action-popover/action-popover.component.js +5 -1
  2. package/esm/components/modal/__internal__/modal-manager.d.ts +1 -1
  3. package/esm/components/modal/__internal__/modal-manager.js +2 -2
  4. package/esm/components/modal/modal.component.js +6 -1
  5. package/esm/components/progress-tracker/index.d.ts +2 -1
  6. package/esm/components/progress-tracker/progress-tracker.component.d.ts +46 -0
  7. package/esm/components/progress-tracker/progress-tracker.component.js +175 -59
  8. package/esm/components/progress-tracker/progress-tracker.style.d.ts +8 -0
  9. package/esm/components/progress-tracker/progress-tracker.style.js +47 -60
  10. package/esm/components/select/select-list/select-list.component.js +6 -1
  11. package/esm/components/toast/toast.component.js +5 -1
  12. package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js +5 -1
  13. package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts +8 -1
  14. package/esm/hooks/__internal__/useModalManager/useModalManager.js +9 -3
  15. package/lib/components/action-popover/action-popover.component.js +5 -1
  16. package/lib/components/modal/__internal__/modal-manager.d.ts +1 -1
  17. package/lib/components/modal/__internal__/modal-manager.js +2 -2
  18. package/lib/components/modal/modal.component.js +6 -1
  19. package/lib/components/progress-tracker/index.d.ts +2 -1
  20. package/lib/components/progress-tracker/progress-tracker.component.d.ts +46 -0
  21. package/lib/components/progress-tracker/progress-tracker.component.js +175 -62
  22. package/lib/components/progress-tracker/progress-tracker.style.d.ts +8 -0
  23. package/lib/components/progress-tracker/progress-tracker.style.js +46 -62
  24. package/lib/components/select/select-list/select-list.component.js +6 -1
  25. package/lib/components/toast/toast.component.js +5 -1
  26. package/lib/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js +5 -1
  27. package/lib/hooks/__internal__/useModalManager/useModalManager.d.ts +8 -1
  28. package/lib/hooks/__internal__/useModalManager/useModalManager.js +9 -3
  29. package/package.json +2 -2
  30. package/scripts/check_rfcs/check_rfcs.js +27 -12
  31. package/esm/components/progress-tracker/progress-tracker.d.ts +0 -40
  32. package/lib/components/progress-tracker/progress-tracker.d.ts +0 -40
@@ -115,7 +115,11 @@ const ActionPopover = ({
115
115
  focusButton();
116
116
  }
117
117
  }, [setOpen, focusButton]);
118
- useModalManager(isOpen, handleEscapeKey, buttonRef);
118
+ useModalManager({
119
+ open: isOpen,
120
+ closeModal: handleEscapeKey,
121
+ modalRef: buttonRef
122
+ });
119
123
  useEffect(() => {
120
124
  const handler = ({
121
125
  target
@@ -15,7 +15,7 @@ declare class ModalManagerInstance {
15
15
  private getTopModal;
16
16
  addModal: (modal: HTMLElement | null, setTriggerRefocusFlag?: SetTriggerRefocusFlag | undefined) => void;
17
17
  isTopmost(modal: HTMLElement | null): boolean;
18
- removeModal(modal: HTMLElement | null): void;
18
+ removeModal(modal: HTMLElement | null, triggerRefocusOnClose?: boolean): void;
19
19
  clearList(): void;
20
20
  callTopModalSetters(): void;
21
21
  }
@@ -66,7 +66,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
66
66
  }
67
67
  }, {
68
68
  key: "removeModal",
69
- value: function removeModal(modal) {
69
+ value: function removeModal(modal, triggerRefocusOnClose = true) {
70
70
  const modalIndex = this.modalList.findIndex(({
71
71
  modal: m
72
72
  }) => m === modal);
@@ -86,7 +86,7 @@ let ModalManagerInstance = /*#__PURE__*/function () {
86
86
  setTriggerRefocusFlag
87
87
  } = this.getTopModal();
88
88
 
89
- if (setTriggerRefocusFlag) {
89
+ if (setTriggerRefocusFlag && triggerRefocusOnClose) {
90
90
  setTriggerRefocusFlag(true);
91
91
  }
92
92
  }
@@ -53,7 +53,12 @@ const Modal = ({
53
53
  onCancel(ev);
54
54
  }
55
55
  }, [disableClose, disableEscKey, onCancel]);
56
- useModalManager(open, closeModal, ref, setTriggerRefocusFlag);
56
+ useModalManager({
57
+ open,
58
+ closeModal,
59
+ modalRef: ref,
60
+ setTriggerRefocusFlag
61
+ });
57
62
  let background;
58
63
  let content;
59
64
 
@@ -1 +1,2 @@
1
- export { default } from "./progress-tracker";
1
+ export { default } from "./progress-tracker.component";
2
+ export type { ProgressTrackerProps } from "./progress-tracker.component";
@@ -0,0 +1,46 @@
1
+ /// <reference types="react" />
2
+ import { MarginProps } from "styled-system";
3
+ export interface ProgressTrackerProps extends MarginProps {
4
+ /** Specifies an aria label to the component */
5
+ "aria-label"?: string;
6
+ /** Specifies the aria describedby for the component */
7
+ "aria-describedby"?: string;
8
+ /** The value of progress to be read out to the user. */
9
+ "aria-valuenow"?: number;
10
+ /** The minimum value of the progress tracker */
11
+ "aria-valuemin"?: number;
12
+ /** The maximum value of the progress tracker */
13
+ "aria-valuemax"?: number;
14
+ /** Prop to define the human readable text alternative of aria-valuenow
15
+ * if aria-valuenow is not a number
16
+ */
17
+ "aria-valuetext"?: string;
18
+ /** Size of the progress bar. */
19
+ size?: "small" | "medium" | "large";
20
+ /** Length of the progress bar, any valid css string. */
21
+ length?: string;
22
+ /** Current progress (percentage). */
23
+ progress?: number;
24
+ /** If error occurs. */
25
+ error?: boolean;
26
+ /** Flag to control whether the default value labels (as percentages) should be rendered. */
27
+ description?: string;
28
+ /** Value to add a description to the label */
29
+ showDefaultLabels?: boolean;
30
+ /** Value to display as current progress. */
31
+ currentProgressLabel?: string;
32
+ /** Value to display as the maximum progress limit. */
33
+ maxProgressLabel?: string;
34
+ /** Value of the preposition defined between Value1 and Value2 on the label. */
35
+ customValuePreposition?: string;
36
+ /**
37
+ * The position the value label are rendered in.
38
+ * Top/bottom apply to horizontal and left/right to vertical orientation.
39
+ */
40
+ labelsPosition?: "top" | "bottom";
41
+ }
42
+ declare const ProgressTracker: {
43
+ ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, ...rest }: ProgressTrackerProps): JSX.Element;
44
+ displayName: string;
45
+ };
46
+ export default ProgressTracker;
@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
4
4
  import PropTypes from "prop-types";
5
- import styledSystemPropTypes from "@styled-system/prop-types";
6
5
  import useLocale from "../../hooks/__internal__/useLocale";
7
6
  import tagComponent from "../../__internal__/utils/helpers/tags";
8
- import { filterStyledSystemMarginProps } from "../../style/utils";
9
7
  import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
10
8
  import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
11
- const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
12
9
 
13
10
  const ProgressTracker = ({
14
11
  "aria-label": ariaLabel = "progress tracker",
@@ -30,11 +27,13 @@ const ProgressTracker = ({
30
27
  ...rest
31
28
  }) => {
32
29
  const l = useLocale();
33
- const barRef = useRef();
34
- const [barLength, setBarLength] = useState(0);
30
+ const barRef = useRef(null);
31
+ const [barLength, setBarLength] = useState("0px");
35
32
  const prefixLabels = labelsPosition !== "bottom";
36
33
  const updateBarLength = useCallback(() => {
37
- setBarLength(`${barRef.current.offsetWidth}px`);
34
+ var _barRef$current;
35
+
36
+ setBarLength(`${(_barRef$current = barRef.current) === null || _barRef$current === void 0 ? void 0 : _barRef$current.offsetWidth}px`);
38
37
  }, []);
39
38
  useLayoutEffect(() => {
40
39
  updateBarLength();
@@ -59,14 +58,13 @@ const ProgressTracker = ({
59
58
  const displayedCurrentProgressLabel = label(currentProgressLabel, `${progress}%`);
60
59
  const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
61
60
  return /*#__PURE__*/React.createElement(StyledValuesLabel, {
62
- position: labelsPosition,
61
+ labelsPosition: labelsPosition,
63
62
  size: size
64
63
  }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, null, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, customValuePreposition || l.progressTracker.of()), /*#__PURE__*/React.createElement(StyledValue, null, displayedMaxProgressLabel)), description && /*#__PURE__*/React.createElement(StyledDescription, null, description));
65
64
  };
66
65
 
67
66
  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
68
67
  return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
69
- size: size,
70
68
  length: length
71
69
  }, rest, tagComponent("progress-bar", rest), {
72
70
  role: "progressbar",
@@ -89,59 +87,177 @@ const ProgressTracker = ({
89
87
  })), !prefixLabels && renderValueLabels());
90
88
  };
91
89
 
92
- ProgressTracker.propTypes = { ...marginPropTypes,
93
-
94
- /** Specifies an aria label to the component */
95
- "aria-label": PropTypes.string,
96
-
97
- /** Specifies the aria describedby for the component */
90
+ ProgressTracker.propTypes = {
98
91
  "aria-describedby": PropTypes.string,
99
-
100
- /** The value of progress to be read out to the user. */
101
- "aria-valuenow": PropTypes.number,
102
-
103
- /** The minimum value of the progress tracker */
104
- "aria-valuemin": PropTypes.number,
105
-
106
- /** The maximum value of the progress tracker */
92
+ "aria-label": PropTypes.string,
107
93
  "aria-valuemax": PropTypes.number,
108
-
109
- /** Prop to define the human readable text alternative of aria-valuenow
110
- * if aria-valuenow is not a number
111
- */
94
+ "aria-valuemin": PropTypes.number,
95
+ "aria-valuenow": PropTypes.number,
112
96
  "aria-valuetext": PropTypes.string,
113
-
114
- /** Size of the progress bar. */
115
- size: PropTypes.oneOf(["small", "medium", "large"]),
116
-
117
- /** Length of the progress bar, any valid css string. */
118
- length: PropTypes.string,
119
-
120
- /** Current progress (percentage). */
121
- progress: PropTypes.number,
122
-
123
- /** If error occurs. */
124
- error: PropTypes.bool,
125
-
126
- /** Flag to control whether the default value labels (as percentages) should be rendered. */
127
- description: PropTypes.string,
128
-
129
- /** Value to add a description to the label */
130
- showDefaultLabels: PropTypes.bool,
131
-
132
- /** Value to display as current progress. */
133
- currentProgressLabel: PropTypes.string,
134
-
135
- /** Value to display as the maximum progress limit. */
136
- maxProgressLabel: PropTypes.string,
137
-
138
- /** Value of the preposition defined between Value1 and Value2 on the label. */
139
- customValuePreposition: PropTypes.string,
140
-
141
- /**
142
- * The position the value label are rendered in.
143
- * Top/bottom apply to horizontal and left/right to vertical orientation.
144
- */
145
- labelsPosition: PropTypes.oneOf(["top", "bottom"])
97
+ "currentProgressLabel": PropTypes.string,
98
+ "customValuePreposition": PropTypes.string,
99
+ "description": PropTypes.string,
100
+ "error": PropTypes.bool,
101
+ "labelsPosition": PropTypes.oneOf(["bottom", "top"]),
102
+ "length": PropTypes.string,
103
+ "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
104
+ "__@toStringTag": PropTypes.string.isRequired,
105
+ "description": PropTypes.string,
106
+ "toString": PropTypes.func.isRequired,
107
+ "valueOf": PropTypes.func.isRequired
108
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
109
+ "__@toStringTag": PropTypes.string.isRequired,
110
+ "description": PropTypes.string,
111
+ "toString": PropTypes.func.isRequired,
112
+ "valueOf": PropTypes.func.isRequired
113
+ }), PropTypes.string]),
114
+ "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
115
+ "__@toStringTag": PropTypes.string.isRequired,
116
+ "description": PropTypes.string,
117
+ "toString": PropTypes.func.isRequired,
118
+ "valueOf": PropTypes.func.isRequired
119
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
120
+ "__@toStringTag": PropTypes.string.isRequired,
121
+ "description": PropTypes.string,
122
+ "toString": PropTypes.func.isRequired,
123
+ "valueOf": PropTypes.func.isRequired
124
+ }), PropTypes.string]),
125
+ "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
126
+ "__@toStringTag": PropTypes.string.isRequired,
127
+ "description": PropTypes.string,
128
+ "toString": PropTypes.func.isRequired,
129
+ "valueOf": PropTypes.func.isRequired
130
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
131
+ "__@toStringTag": PropTypes.string.isRequired,
132
+ "description": PropTypes.string,
133
+ "toString": PropTypes.func.isRequired,
134
+ "valueOf": PropTypes.func.isRequired
135
+ }), PropTypes.string]),
136
+ "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
137
+ "__@toStringTag": PropTypes.string.isRequired,
138
+ "description": PropTypes.string,
139
+ "toString": PropTypes.func.isRequired,
140
+ "valueOf": PropTypes.func.isRequired
141
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
142
+ "__@toStringTag": PropTypes.string.isRequired,
143
+ "description": PropTypes.string,
144
+ "toString": PropTypes.func.isRequired,
145
+ "valueOf": PropTypes.func.isRequired
146
+ }), PropTypes.string]),
147
+ "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
148
+ "__@toStringTag": PropTypes.string.isRequired,
149
+ "description": PropTypes.string,
150
+ "toString": PropTypes.func.isRequired,
151
+ "valueOf": PropTypes.func.isRequired
152
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
153
+ "__@toStringTag": PropTypes.string.isRequired,
154
+ "description": PropTypes.string,
155
+ "toString": PropTypes.func.isRequired,
156
+ "valueOf": PropTypes.func.isRequired
157
+ }), PropTypes.string]),
158
+ "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
159
+ "__@toStringTag": PropTypes.string.isRequired,
160
+ "description": PropTypes.string,
161
+ "toString": PropTypes.func.isRequired,
162
+ "valueOf": PropTypes.func.isRequired
163
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
164
+ "__@toStringTag": PropTypes.string.isRequired,
165
+ "description": PropTypes.string,
166
+ "toString": PropTypes.func.isRequired,
167
+ "valueOf": PropTypes.func.isRequired
168
+ }), PropTypes.string]),
169
+ "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
170
+ "__@toStringTag": PropTypes.string.isRequired,
171
+ "description": PropTypes.string,
172
+ "toString": PropTypes.func.isRequired,
173
+ "valueOf": PropTypes.func.isRequired
174
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
175
+ "__@toStringTag": PropTypes.string.isRequired,
176
+ "description": PropTypes.string,
177
+ "toString": PropTypes.func.isRequired,
178
+ "valueOf": PropTypes.func.isRequired
179
+ }), PropTypes.string]),
180
+ "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
181
+ "__@toStringTag": PropTypes.string.isRequired,
182
+ "description": PropTypes.string,
183
+ "toString": PropTypes.func.isRequired,
184
+ "valueOf": PropTypes.func.isRequired
185
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
186
+ "__@toStringTag": PropTypes.string.isRequired,
187
+ "description": PropTypes.string,
188
+ "toString": PropTypes.func.isRequired,
189
+ "valueOf": PropTypes.func.isRequired
190
+ }), PropTypes.string]),
191
+ "maxProgressLabel": PropTypes.string,
192
+ "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
193
+ "__@toStringTag": PropTypes.string.isRequired,
194
+ "description": PropTypes.string,
195
+ "toString": PropTypes.func.isRequired,
196
+ "valueOf": PropTypes.func.isRequired
197
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
198
+ "__@toStringTag": PropTypes.string.isRequired,
199
+ "description": PropTypes.string,
200
+ "toString": PropTypes.func.isRequired,
201
+ "valueOf": PropTypes.func.isRequired
202
+ }), PropTypes.string]),
203
+ "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
204
+ "__@toStringTag": PropTypes.string.isRequired,
205
+ "description": PropTypes.string,
206
+ "toString": PropTypes.func.isRequired,
207
+ "valueOf": PropTypes.func.isRequired
208
+ }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
209
+ "__@toStringTag": PropTypes.string.isRequired,
210
+ "description": PropTypes.string,
211
+ "toString": PropTypes.func.isRequired,
212
+ "valueOf": PropTypes.func.isRequired
213
+ }), PropTypes.string]),
214
+ "mr": 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
+ "mt": 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
+ "mx": 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
+ "my": 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
+ "progress": PropTypes.number,
259
+ "showDefaultLabels": PropTypes.bool,
260
+ "size": PropTypes.oneOf(["large", "medium", "small"])
146
261
  };
262
+ ProgressTracker.displayName = "ProgressTracker";
147
263
  export default ProgressTracker;
@@ -0,0 +1,8 @@
1
+ import { ProgressTrackerProps } from "./progress-tracker.component";
2
+ declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin">, never>;
3
+ declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
4
+ declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
5
+ declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
6
+ declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelsPosition">, never>;
7
+ declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
8
+ export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
@@ -1,8 +1,38 @@
1
1
  import styled, { css } from "styled-components";
2
- import PropTypes from "prop-types";
3
2
  import { margin } from "styled-system";
4
3
  import baseTheme from "../../style/themes/base";
5
- import { PROGRESS_TRACKER_SIZES } from "./progress-tracker.config";
4
+
5
+ function getHeight(size) {
6
+ switch (size) {
7
+ case "small":
8
+ return "var(--sizing050)";
9
+
10
+ case "large":
11
+ return "var(--sizing200)";
12
+
13
+ default:
14
+ return "var(--sizing100)";
15
+ }
16
+ }
17
+
18
+ function getBackgroundColour({
19
+ progress,
20
+ error
21
+ }) {
22
+ if (error) return "var(--colorsSemanticNegative500)";
23
+ if (progress && progress >= 100) return "var(--colorsSemanticPositive500)";
24
+ return "var(--colorsSemanticNeutral500)";
25
+ }
26
+
27
+ function getBorderColour({
28
+ progress,
29
+ error
30
+ }) {
31
+ if (error) return "var(--colorsSemanticNegative500)";
32
+ if (progress === 100) return "var(--colorsSemanticPositive500)";
33
+ return "var(--colorsSemanticNeutral500)";
34
+ }
35
+
6
36
  const StyledProgressTracker = styled.div`
7
37
  ${margin}
8
38
  text-align: center;
@@ -23,7 +53,10 @@ const StyledProgressBar = styled.span`
23
53
  display: flex;
24
54
  position: relative;
25
55
  background-color: var(--colorsSemanticNeutral200);
26
- border: 1px solid ${getBorderColour(progress, error)};
56
+ border: 1px solid ${getBorderColour({
57
+ progress,
58
+ error
59
+ })};
27
60
  border-radius: 25px;
28
61
  overflow-x: hidden;
29
62
  height: ${getHeight(size)};
@@ -50,80 +83,34 @@ const StyledValuesLabel = styled.span`
50
83
  gap: 4px;
51
84
  font-size: ${({
52
85
  size
53
- }) => fontSizes[size]};
86
+ }) => size && fontSizes[size]};
54
87
  ${({
55
- position
56
- }) => position === "bottom" && "margin-top: 8px"};
88
+ labelsPosition
89
+ }) => labelsPosition === "bottom" && "margin-top: 8px"};
57
90
  ${({
58
- position
59
- }) => position !== "bottom" && "margin-bottom: 8px"};
91
+ labelsPosition
92
+ }) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
60
93
  `;
61
94
  const InnerBar = styled.span`
62
95
  ${({
63
96
  progress,
64
- size,
97
+ size = "medium",
65
98
  length,
66
99
  error
67
100
  }) => css`
68
101
  position: relative;
69
102
  left: 0;
70
- background-color: ${getBackgroundColour(progress, error)};
103
+ background-color: ${getBackgroundColour({
104
+ progress,
105
+ error
106
+ })};
71
107
  border-radius: 25px;
72
- width: calc(${length} * ${progress / 100});
108
+ width: calc(${length} * ${progress && progress / 100});
73
109
  min-width: 2px;
74
110
  height: ${getHeight(size)};
75
111
  `}
76
112
  `;
77
-
78
- function getHeight(size) {
79
- switch (size) {
80
- case "small":
81
- return "var(--sizing050)";
82
-
83
- case "large":
84
- return "var(--sizing200)";
85
-
86
- default:
87
- return "var(--sizing100)";
88
- }
89
- }
90
-
91
- function getBackgroundColour(progress, error) {
92
- if (error) return "var(--colorsSemanticNegative500)";
93
- if (progress >= 100) return "var(--colorsSemanticPositive500)";
94
- return "var(--colorsSemanticNeutral500)";
95
- }
96
-
97
- function getBorderColour(progress, error) {
98
- if (error) return "var(--colorsSemanticNegative500)";
99
- if (progress === 100) return "var(--colorsSemanticPositive500)";
100
- return "var(--colorsSemanticNeutral500)";
101
- }
102
-
103
113
  StyledProgressTracker.defaultProps = {
104
114
  theme: baseTheme
105
115
  };
106
- StyledProgressBar.defaultProps = {
107
- size: "medium"
108
- };
109
- InnerBar.defaultProps = {
110
- progress: 0,
111
- size: "medium"
112
- };
113
- InnerBar.propTypes = {
114
- size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES),
115
- progress: PropTypes.number
116
- };
117
- StyledProgressTracker.propTypes = {
118
- theme: PropTypes.object
119
- };
120
- StyledValuesLabel.propTypes = {
121
- position: PropTypes.oneOf(["top", "bottom", "left", "right"])
122
- };
123
- StyledValue.propTypes = {
124
- isMaxValue: PropTypes.bool
125
- };
126
- StyledProgressBar.propTypes = {
127
- size: PropTypes.oneOf(PROGRESS_TRACKER_SIZES)
128
- };
129
116
  export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription };
@@ -252,7 +252,12 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
252
252
  onSelectListClose();
253
253
  }
254
254
  }, [onSelectListClose]);
255
- useModalManager(isOpen, handleEscapeKey, listRef);
255
+ useModalManager({
256
+ open: isOpen,
257
+ closeModal: handleEscapeKey,
258
+ modalRef: listRef,
259
+ triggerRefocusOnClose: false
260
+ });
256
261
  const handleListScroll = useCallback(event => {
257
262
  const element = event.target;
258
263
  /* istanbul ignore else */
@@ -44,7 +44,11 @@ const Toast = /*#__PURE__*/React.forwardRef(({
44
44
  onDismiss(ev);
45
45
  }
46
46
  }, [onDismiss]);
47
- useModalManager(open, dismissToast, refToPass);
47
+ useModalManager({
48
+ open,
49
+ closeModal: dismissToast,
50
+ modalRef: refToPass
51
+ });
48
52
  useEffect(() => {
49
53
  /* istanbul ignore next */
50
54
  if (timer.current) clearTimeout(timer.current);
@@ -18,7 +18,11 @@ export default ((mainControlRef, childrenRefs, hide, isOpen) => {
18
18
  }, [refocusMainControl]); // useModalmanager is used here to handle the escape key
19
19
  // and to ensure that closing the menu does not close the modal
20
20
 
21
- useModalManager(isOpen, handleEscapeKey, mainControlRef);
21
+ useModalManager({
22
+ open: isOpen,
23
+ closeModal: handleEscapeKey,
24
+ modalRef: mainControlRef
25
+ });
22
26
  const handleKeyDown = useCallback(ev => {
23
27
  if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
24
28
  ev.preventDefault();
@@ -1,3 +1,10 @@
1
1
  import React from "react";
2
- declare const useModalManager: (open: boolean, closeModal: (e: KeyboardEvent) => void, modalRef: React.RefObject<HTMLElement>, setTriggerRefocusFlag?: ((flag: boolean) => void) | undefined) => void;
2
+ declare type UseModalManagerArgs = {
3
+ open: boolean;
4
+ closeModal: (e: KeyboardEvent) => void;
5
+ modalRef: React.RefObject<HTMLElement>;
6
+ setTriggerRefocusFlag?: (flag: boolean) => void;
7
+ triggerRefocusOnClose?: boolean;
8
+ };
9
+ declare const useModalManager: ({ open, closeModal, modalRef, setTriggerRefocusFlag, triggerRefocusOnClose, }: UseModalManagerArgs) => void;
3
10
  export default useModalManager;
@@ -1,7 +1,13 @@
1
1
  import { useEffect, useRef, useCallback } from "react";
2
2
  import ModalManager from "../../../components/modal/__internal__/modal-manager";
3
3
 
4
- const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
4
+ const useModalManager = ({
5
+ open,
6
+ closeModal,
7
+ modalRef,
8
+ setTriggerRefocusFlag,
9
+ triggerRefocusOnClose = true
10
+ }) => {
5
11
  const listenerAdded = useRef(false);
6
12
  const modalRegistered = useRef(false);
7
13
  const handleClose = useCallback(ev => {
@@ -45,10 +51,10 @@ const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
45
51
  }, [setTriggerRefocusFlag]);
46
52
  const unregisterModal = useCallback(ref => {
47
53
  if (modalRegistered.current) {
48
- ModalManager.removeModal(ref);
54
+ ModalManager.removeModal(ref, triggerRefocusOnClose);
49
55
  modalRegistered.current = false;
50
56
  }
51
- }, []);
57
+ }, [triggerRefocusOnClose]);
52
58
  useEffect(() => {
53
59
  const ref = modalRef.current;
54
60
 
@@ -141,7 +141,11 @@ const ActionPopover = ({
141
141
  focusButton();
142
142
  }
143
143
  }, [setOpen, focusButton]);
144
- (0, _useModalManager.default)(isOpen, handleEscapeKey, buttonRef);
144
+ (0, _useModalManager.default)({
145
+ open: isOpen,
146
+ closeModal: handleEscapeKey,
147
+ modalRef: buttonRef
148
+ });
145
149
  (0, _react.useEffect)(() => {
146
150
  const handler = ({
147
151
  target
@@ -15,7 +15,7 @@ declare class ModalManagerInstance {
15
15
  private getTopModal;
16
16
  addModal: (modal: HTMLElement | null, setTriggerRefocusFlag?: SetTriggerRefocusFlag | undefined) => void;
17
17
  isTopmost(modal: HTMLElement | null): boolean;
18
- removeModal(modal: HTMLElement | null): void;
18
+ removeModal(modal: HTMLElement | null, triggerRefocusOnClose?: boolean): void;
19
19
  clearList(): void;
20
20
  callTopModalSetters(): void;
21
21
  }