carbon-react 124.5.0 → 124.6.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 (11) hide show
  1. package/esm/components/progress-tracker/progress-tracker.component.d.ts +6 -4
  2. package/esm/components/progress-tracker/progress-tracker.component.js +6 -3
  3. package/esm/components/progress-tracker/progress-tracker.style.d.ts +2 -2
  4. package/esm/components/progress-tracker/progress-tracker.style.js +21 -3
  5. package/esm/components/select/select-list/select-list.component.js +9 -2
  6. package/lib/components/progress-tracker/progress-tracker.component.d.ts +6 -4
  7. package/lib/components/progress-tracker/progress-tracker.component.js +6 -3
  8. package/lib/components/progress-tracker/progress-tracker.style.d.ts +2 -2
  9. package/lib/components/progress-tracker/progress-tracker.style.js +21 -3
  10. package/lib/components/select/select-list/select-list.component.js +9 -2
  11. package/package.json +1 -1
package/esm/components/progress-tracker/progress-tracker.component.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface ProgressTrackerProps extends MarginProps {
17
17
  "aria-valuetext"?: string;
18
18
  /** Size of the progress bar. */
19
19
  size?: "small" | "medium" | "large";
20
- /** Length of the progress bar, any valid css string. */
20
+ /** Length of the component, any valid css string. */
21
21
  length?: string;
22
22
  /** Current progress (percentage). */
23
23
  progress?: number;
@@ -35,12 +35,14 @@ export interface ProgressTrackerProps extends MarginProps {
35
35
  customValuePreposition?: string;
36
36
  /**
37
37
  * The position the value label are rendered in.
38
- * Top/bottom apply to horizontal and left/right to vertical orientation.
38
+ * Top/bottom apply to horizontal and left applies to vertical orientation.
39
39
  */
40
- labelsPosition?: "top" | "bottom";
40
+ labelsPosition?: "top" | "bottom" | "left";
41
+ /** Label width */
42
+ labelWidth?: string;
41
43
  }
42
44
  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): React.JSX.Element;
45
+ ({ "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, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
44
46
  displayName: string;
45
47
  };
46
48
  export default ProgressTracker;
package/esm/components/progress-tracker/progress-tracker.component.js CHANGED
@@ -21,7 +21,8 @@ const ProgressTracker = ({
21
21
  currentProgressLabel,
22
22
  customValuePreposition,
23
23
  maxProgressLabel,
24
- labelsPosition,
24
+ labelsPosition = "top",
25
+ labelWidth,
25
26
  ...rest
26
27
  }) => {
27
28
  const l = useLocale();
@@ -51,7 +52,8 @@ const ProgressTracker = ({
51
52
  const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
52
53
  return /*#__PURE__*/React.createElement(StyledValuesLabel, {
53
54
  labelsPosition: labelsPosition,
54
- size: size
55
+ size: size,
56
+ labelWidth: labelWidth
55
57
  }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, {
56
58
  "data-element": "current-progress-label"
57
59
  }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -72,7 +74,8 @@ const ProgressTracker = ({
72
74
  "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
73
75
  "aria-valuemin": ariaValueMin,
74
76
  "aria-valuemax": ariaValueMax,
75
- "aria-valuetext": ariaValueText
77
+ "aria-valuetext": ariaValueText,
78
+ labelsPosition: labelsPosition
76
79
  }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
77
80
  size: size,
78
81
  ref: barRef,
package/esm/components/progress-tracker/progress-tracker.style.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { ProgressTrackerProps } from "./progress-tracker.component";
2
- declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin">, never>;
2
+ declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
3
3
  declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
4
4
  declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
5
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>;
6
+ declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
7
7
  declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
8
8
  export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
package/esm/components/progress-tracker/progress-tracker.style.js CHANGED
@@ -37,6 +37,12 @@ const StyledProgressTracker = styled.div`
37
37
  }) => css`
38
38
  width: ${length};
39
39
  `};
40
+ ${({
41
+ labelsPosition
42
+ }) => labelsPosition === "left" && css`
43
+ display: flex;
44
+ align-items: center;
45
+ `}
40
46
  `;
41
47
  const StyledProgressBar = styled.span`
42
48
  ${({
@@ -71,6 +77,11 @@ const StyledDescription = styled.span`
71
77
  color: var(--colorsUtilityYin055);
72
78
  margin-left: 4px;
73
79
  `;
80
+ const labelsPositionMargin = {
81
+ top: "bottom",
82
+ bottom: "top",
83
+ left: "right"
84
+ };
74
85
  const StyledValuesLabel = styled.span`
75
86
  text-align: start;
76
87
  display: flex;
@@ -79,12 +90,19 @@ const StyledValuesLabel = styled.span`
79
90
  font-size: ${({
80
91
  size
81
92
  }) => size && fontSizes[size]};
93
+
82
94
  ${({
83
95
  labelsPosition
84
- }) => labelsPosition === "bottom" && "margin-top: 8px"};
96
+ }) => labelsPosition && `
97
+ margin-${labelsPositionMargin[labelsPosition]}: var(--spacing100);
98
+ `};
99
+
85
100
  ${({
86
- labelsPosition
87
- }) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
101
+ labelWidth
102
+ }) => labelWidth && css`
103
+ width: ${labelWidth};
104
+ flex-shrink: 0;
105
+ `};
88
106
  `;
89
107
  const InnerBar = styled.span`
90
108
  ${({
package/esm/components/select/select-list/select-list.component.js CHANGED
@@ -324,8 +324,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
324
324
  return;
325
325
  }
326
326
  setCurrentOptionsListIndex(indexOfMatch);
327
- virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
328
- }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
327
+ }, [getIndexOfMatch, highlightedValue]);
328
+
329
+ // ensure that the currently-selected option is always visible immediately after
330
+ // it has been changed
331
+ useEffect(() => {
332
+ if (currentOptionsListIndex > -1) {
333
+ virtualizer.scrollToIndex(currentOptionsListIndex, SCROLL_OPTIONS);
334
+ }
335
+ }, [currentOptionsListIndex, virtualizer]);
329
336
  useEffect(() => {
330
337
  if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
331
338
  virtualizer.scrollToIndex(lastOptionIndex, {
package/lib/components/progress-tracker/progress-tracker.component.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface ProgressTrackerProps extends MarginProps {
17
17
  "aria-valuetext"?: string;
18
18
  /** Size of the progress bar. */
19
19
  size?: "small" | "medium" | "large";
20
- /** Length of the progress bar, any valid css string. */
20
+ /** Length of the component, any valid css string. */
21
21
  length?: string;
22
22
  /** Current progress (percentage). */
23
23
  progress?: number;
@@ -35,12 +35,14 @@ export interface ProgressTrackerProps extends MarginProps {
35
35
  customValuePreposition?: string;
36
36
  /**
37
37
  * The position the value label are rendered in.
38
- * Top/bottom apply to horizontal and left/right to vertical orientation.
38
+ * Top/bottom apply to horizontal and left applies to vertical orientation.
39
39
  */
40
- labelsPosition?: "top" | "bottom";
40
+ labelsPosition?: "top" | "bottom" | "left";
41
+ /** Label width */
42
+ labelWidth?: string;
41
43
  }
42
44
  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): React.JSX.Element;
45
+ ({ "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, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
44
46
  displayName: string;
45
47
  };
46
48
  export default ProgressTracker;
package/lib/components/progress-tracker/progress-tracker.component.js CHANGED
@@ -30,7 +30,8 @@ const ProgressTracker = ({
30
30
  currentProgressLabel,
31
31
  customValuePreposition,
32
32
  maxProgressLabel,
33
- labelsPosition,
33
+ labelsPosition = "top",
34
+ labelWidth,
34
35
  ...rest
35
36
  }) => {
36
37
  const l = (0, _useLocale.default)();
@@ -60,7 +61,8 @@ const ProgressTracker = ({
60
61
  const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
61
62
  return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
62
63
  labelsPosition: labelsPosition,
63
- size: size
64
+ size: size,
65
+ labelWidth: labelWidth
64
66
  }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
65
67
  "data-element": "current-progress-label"
66
68
  }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
@@ -81,7 +83,8 @@ const ProgressTracker = ({
81
83
  "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
82
84
  "aria-valuemin": ariaValueMin,
83
85
  "aria-valuemax": ariaValueMax,
84
- "aria-valuetext": ariaValueText
86
+ "aria-valuetext": ariaValueText,
87
+ labelsPosition: labelsPosition
85
88
  }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
86
89
  size: size,
87
90
  ref: barRef,
package/lib/components/progress-tracker/progress-tracker.style.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { ProgressTrackerProps } from "./progress-tracker.component";
2
- declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin">, never>;
2
+ declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
3
3
  declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
4
4
  declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
5
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>;
6
+ declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
7
7
  declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
8
8
  export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };
package/lib/components/progress-tracker/progress-tracker.style.js CHANGED
@@ -46,6 +46,12 @@ const StyledProgressTracker = exports.StyledProgressTracker = _styledComponents.
46
46
  }) => (0, _styledComponents.css)`
47
47
  width: ${length};
48
48
  `};
49
+ ${({
50
+ labelsPosition
51
+ }) => labelsPosition === "left" && (0, _styledComponents.css)`
52
+ display: flex;
53
+ align-items: center;
54
+ `}
49
55
  `;
50
56
  const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.span`
51
57
  ${({
@@ -80,6 +86,11 @@ const StyledDescription = exports.StyledDescription = _styledComponents.default.
80
86
  color: var(--colorsUtilityYin055);
81
87
  margin-left: 4px;
82
88
  `;
89
+ const labelsPositionMargin = {
90
+ top: "bottom",
91
+ bottom: "top",
92
+ left: "right"
93
+ };
83
94
  const StyledValuesLabel = exports.StyledValuesLabel = _styledComponents.default.span`
84
95
  text-align: start;
85
96
  display: flex;
@@ -88,12 +99,19 @@ const StyledValuesLabel = exports.StyledValuesLabel = _styledComponents.default.
88
99
  font-size: ${({
89
100
  size
90
101
  }) => size && fontSizes[size]};
102
+
91
103
  ${({
92
104
  labelsPosition
93
- }) => labelsPosition === "bottom" && "margin-top: 8px"};
105
+ }) => labelsPosition && `
106
+ margin-${labelsPositionMargin[labelsPosition]}: var(--spacing100);
107
+ `};
108
+
94
109
  ${({
95
- labelsPosition
96
- }) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
110
+ labelWidth
111
+ }) => labelWidth && (0, _styledComponents.css)`
112
+ width: ${labelWidth};
113
+ flex-shrink: 0;
114
+ `};
97
115
  `;
98
116
  const InnerBar = exports.InnerBar = _styledComponents.default.span`
99
117
  ${({
package/lib/components/select/select-list/select-list.component.js CHANGED
@@ -333,8 +333,15 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
333
333
  return;
334
334
  }
335
335
  setCurrentOptionsListIndex(indexOfMatch);
336
- virtualizer.scrollToIndex(indexOfMatch, SCROLL_OPTIONS);
337
- }, [getIndexOfMatch, highlightedValue, virtualizer, handleListScroll, listContainerRef]);
336
+ }, [getIndexOfMatch, highlightedValue]);
337
+
338
+ // ensure that the currently-selected option is always visible immediately after
339
+ // it has been changed
340
+ (0, _react.useEffect)(() => {
341
+ if (currentOptionsListIndex > -1) {
342
+ virtualizer.scrollToIndex(currentOptionsListIndex, SCROLL_OPTIONS);
343
+ }
344
+ }, [currentOptionsListIndex, virtualizer]);
338
345
  (0, _react.useEffect)(() => {
339
346
  if (isLoading && currentOptionsListIndex === lastOptionIndex && lastOptionIndex > -1) {
340
347
  virtualizer.scrollToIndex(lastOptionIndex, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "124.5.0",
3
+ "version": "124.6.1",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",