carbon-react 125.2.2 → 125.3.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 (21) hide show
  1. package/esm/components/select/filterable-select/filterable-select.component.js +1 -1
  2. package/esm/components/select/option/option.component.d.ts +2 -0
  3. package/esm/components/select/option/option.component.js +6 -0
  4. package/esm/components/select/option/option.style.d.ts +1 -0
  5. package/esm/components/select/option/option.style.js +10 -0
  6. package/esm/components/select/option-row/option-row.component.d.ts +2 -0
  7. package/esm/components/select/option-row/option-row.component.js +7 -0
  8. package/esm/components/select/option-row/option-row.style.d.ts +1 -0
  9. package/esm/components/select/option-row/option-row.style.js +10 -0
  10. package/esm/components/select/select-list/select-list.component.js +4 -1
  11. package/lib/components/select/filterable-select/filterable-select.component.js +1 -1
  12. package/lib/components/select/option/option.component.d.ts +2 -0
  13. package/lib/components/select/option/option.component.js +6 -0
  14. package/lib/components/select/option/option.style.d.ts +1 -0
  15. package/lib/components/select/option/option.style.js +10 -0
  16. package/lib/components/select/option-row/option-row.component.d.ts +2 -0
  17. package/lib/components/select/option-row/option-row.component.js +7 -0
  18. package/lib/components/select/option-row/option-row.style.d.ts +1 -0
  19. package/lib/components/select/option-row/option-row.style.js +10 -0
  20. package/lib/components/select/select-list/select-list.component.js +4 -1
  21. package/package.json +1 -1
package/esm/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -120,7 +120,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
120
120
  setSelectedValue(previousValue => {
121
121
  const match = findElementWithMatchingText(newFilterText, children);
122
122
  const isFilterCleared = isDeleteEvent && newFilterText === "";
123
- if (!match || isFilterCleared) {
123
+ if (!match || isFilterCleared || match.props.disabled) {
124
124
  setTextValue(newFilterText);
125
125
  triggerChange("", false);
126
126
  return "";
package/esm/components/select/option/option.component.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
16
16
  borderColor?: string;
17
17
  /** MultiSelect only - fill Pill background with color */
18
18
  fill?: boolean;
19
+ /** If true, the component will be disabled */
20
+ disabled?: boolean;
19
21
  /**
20
22
  * @private
21
23
  * @ignore
package/esm/components/select/option/option.component.js CHANGED
@@ -6,6 +6,7 @@ import SelectListContext from "../__internal__/select-list-context";
6
6
  const Option = /*#__PURE__*/React.forwardRef(({
7
7
  text,
8
8
  children,
9
+ disabled,
9
10
  onSelect,
10
11
  value,
11
12
  id,
@@ -21,6 +22,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
21
22
  isSelected = selectListContext.multiselectValues.includes(value);
22
23
  }
23
24
  function handleClick() {
25
+ if (disabled) {
26
+ return;
27
+ }
24
28
  if (!onClick) {
25
29
  onSelect?.({
26
30
  text,
@@ -36,7 +40,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
36
40
  id: id,
37
41
  ref: ref,
38
42
  "aria-selected": isSelected,
43
+ "aria-disabled": disabled,
39
44
  "data-component": "option",
45
+ isDisabled: disabled,
40
46
  onClick: handleClick,
41
47
  isHighlighted: selectListContext.currentOptionsListIndex === index,
42
48
  role: "option",
package/esm/components/select/option/option.style.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { OptionProps } from ".";
2
2
  interface StyledOptionProps extends Pick<OptionProps, "id"> {
3
3
  isHighlighted?: boolean;
4
+ isDisabled?: boolean;
4
5
  }
5
6
  declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
6
7
  export default StyledOption;
package/esm/components/select/option/option.style.js CHANGED
@@ -24,5 +24,15 @@ const StyledOption = styled.li`
24
24
  :hover {
25
25
  background-color: var(--colorsUtilityMajor100);
26
26
  }
27
+
28
+ ${({
29
+ isDisabled
30
+ }) => isDisabled && css`
31
+ color: var(--colorsUtilityYin030);
32
+ cursor: not-allowed;
33
+ :hover {
34
+ background-color: var(--colorsUtilityYang100);
35
+ }
36
+ `}
27
37
  `;
28
38
  export default StyledOption;
package/esm/components/select/option-row/option-row.component.d.ts CHANGED
@@ -13,6 +13,8 @@ export interface OptionRowProps extends TagProps {
13
13
  * Will use a randomly generated GUID if none is provided.
14
14
  */
15
15
  id?: string;
16
+ /** If true, the component will be disabled */
17
+ disabled?: boolean;
16
18
  /**
17
19
  * @private
18
20
  * @ignore
package/esm/components/select/option-row/option-row.component.js CHANGED
@@ -7,6 +7,7 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
7
7
  id,
8
8
  text,
9
9
  children,
10
+ disabled,
10
11
  onSelect,
11
12
  value,
12
13
  index,
@@ -15,6 +16,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
15
16
  ...rest
16
17
  }, ref) => {
17
18
  const handleClick = () => {
19
+ if (disabled) {
20
+ return;
21
+ }
18
22
  onSelect?.({
19
23
  id,
20
24
  text,
@@ -30,7 +34,9 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
30
34
  id: id,
31
35
  ref: ref,
32
36
  "aria-selected": isSelected,
37
+ "aria-disabled": disabled,
33
38
  "data-component": "option-row",
39
+ isDisabled: disabled,
34
40
  onClick: handleClick,
35
41
  isHighlighted: selectListContext.currentOptionsListIndex === index,
36
42
  role: "option",
@@ -43,6 +49,7 @@ OptionRow.propTypes = {
43
49
  "data-component": PropTypes.string,
44
50
  "data-element": PropTypes.string,
45
51
  "data-role": PropTypes.string,
52
+ "disabled": PropTypes.bool,
46
53
  "hidden": PropTypes.bool,
47
54
  "id": PropTypes.string,
48
55
  "index": PropTypes.number,
package/esm/components/select/option-row/option-row.style.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { OptionRowProps } from ".";
2
2
  interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
3
3
  isHighlighted?: boolean;
4
+ isDisabled?: boolean;
4
5
  }
5
6
  declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
6
7
  export default StyledOptionRow;
package/esm/components/select/option-row/option-row.style.js CHANGED
@@ -28,5 +28,15 @@ const StyledOptionRow = styled.tr`
28
28
  font-weight: 700;
29
29
  }
30
30
  }
31
+
32
+ ${({
33
+ isDisabled
34
+ }) => isDisabled && css`
35
+ color: var(--colorsUtilityYin030);
36
+ cursor: not-allowed;
37
+ :hover {
38
+ background-color: var(--colorsUtilityYang100);
39
+ }
40
+ `}
31
41
  `;
32
42
  export default StyledOptionRow;
package/esm/components/select/select-list/select-list.component.js CHANGED
@@ -189,7 +189,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
189
189
  }
190
190
  let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
191
191
  const nextElement = childrenList[nextIndex];
192
- if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow) {
192
+ if ( /*#__PURE__*/React.isValidElement(nextElement) && nextElement.type !== Option && nextElement.type !== OptionRow || nextElement.props.disabled) {
193
193
  nextIndex = getNextHighlightableItemIndex(key, nextIndex);
194
194
  }
195
195
  return nextIndex;
@@ -254,6 +254,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
254
254
  onSelectListClose();
255
255
  return;
256
256
  }
257
+ if (currentOption.props.disabled) {
258
+ return;
259
+ }
257
260
  const {
258
261
  text,
259
262
  value
package/lib/components/select/filterable-select/filterable-select.component.js CHANGED
@@ -129,7 +129,7 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
129
129
  setSelectedValue(previousValue => {
130
130
  const match = findElementWithMatchingText(newFilterText, children);
131
131
  const isFilterCleared = isDeleteEvent && newFilterText === "";
132
- if (!match || isFilterCleared) {
132
+ if (!match || isFilterCleared || match.props.disabled) {
133
133
  setTextValue(newFilterText);
134
134
  triggerChange("", false);
135
135
  return "";
package/lib/components/select/option/option.component.d.ts CHANGED
@@ -16,6 +16,8 @@ export interface OptionProps extends Omit<React.InputHTMLAttributes<HTMLLIElemen
16
16
  borderColor?: string;
17
17
  /** MultiSelect only - fill Pill background with color */
18
18
  fill?: boolean;
19
+ /** If true, the component will be disabled */
20
+ disabled?: boolean;
19
21
  /**
20
22
  * @private
21
23
  * @ignore
package/lib/components/select/option/option.component.js CHANGED
@@ -15,6 +15,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
15
15
  const Option = /*#__PURE__*/_react.default.forwardRef(({
16
16
  text,
17
17
  children,
18
+ disabled,
18
19
  onSelect,
19
20
  value,
20
21
  id,
@@ -30,6 +31,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
30
31
  isSelected = selectListContext.multiselectValues.includes(value);
31
32
  }
32
33
  function handleClick() {
34
+ if (disabled) {
35
+ return;
36
+ }
33
37
  if (!onClick) {
34
38
  onSelect?.({
35
39
  text,
@@ -45,7 +49,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
45
49
  id: id,
46
50
  ref: ref,
47
51
  "aria-selected": isSelected,
52
+ "aria-disabled": disabled,
48
53
  "data-component": "option",
54
+ isDisabled: disabled,
49
55
  onClick: handleClick,
50
56
  isHighlighted: selectListContext.currentOptionsListIndex === index,
51
57
  role: "option",
package/lib/components/select/option/option.style.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { OptionProps } from ".";
2
2
  interface StyledOptionProps extends Pick<OptionProps, "id"> {
3
3
  isHighlighted?: boolean;
4
+ isDisabled?: boolean;
4
5
  }
5
6
  declare const StyledOption: import("styled-components").StyledComponent<"li", any, StyledOptionProps, never>;
6
7
  export default StyledOption;
package/lib/components/select/option/option.style.js CHANGED
@@ -32,5 +32,15 @@ const StyledOption = _styledComponents.default.li`
32
32
  :hover {
33
33
  background-color: var(--colorsUtilityMajor100);
34
34
  }
35
+
36
+ ${({
37
+ isDisabled
38
+ }) => isDisabled && (0, _styledComponents.css)`
39
+ color: var(--colorsUtilityYin030);
40
+ cursor: not-allowed;
41
+ :hover {
42
+ background-color: var(--colorsUtilityYang100);
43
+ }
44
+ `}
35
45
  `;
36
46
  var _default = exports.default = StyledOption;
package/lib/components/select/option-row/option-row.component.d.ts CHANGED
@@ -13,6 +13,8 @@ export interface OptionRowProps extends TagProps {
13
13
  * Will use a randomly generated GUID if none is provided.
14
14
  */
15
15
  id?: string;
16
+ /** If true, the component will be disabled */
17
+ disabled?: boolean;
16
18
  /**
17
19
  * @private
18
20
  * @ignore
package/lib/components/select/option-row/option-row.component.js CHANGED
@@ -16,6 +16,7 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
16
16
  id,
17
17
  text,
18
18
  children,
19
+ disabled,
19
20
  onSelect,
20
21
  value,
21
22
  index,
@@ -24,6 +25,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
24
25
  ...rest
25
26
  }, ref) => {
26
27
  const handleClick = () => {
28
+ if (disabled) {
29
+ return;
30
+ }
27
31
  onSelect?.({
28
32
  id,
29
33
  text,
@@ -39,7 +43,9 @@ const OptionRow = /*#__PURE__*/_react.default.forwardRef(({
39
43
  id: id,
40
44
  ref: ref,
41
45
  "aria-selected": isSelected,
46
+ "aria-disabled": disabled,
42
47
  "data-component": "option-row",
48
+ isDisabled: disabled,
43
49
  onClick: handleClick,
44
50
  isHighlighted: selectListContext.currentOptionsListIndex === index,
45
51
  role: "option",
@@ -52,6 +58,7 @@ OptionRow.propTypes = {
52
58
  "data-component": _propTypes.default.string,
53
59
  "data-element": _propTypes.default.string,
54
60
  "data-role": _propTypes.default.string,
61
+ "disabled": _propTypes.default.bool,
55
62
  "hidden": _propTypes.default.bool,
56
63
  "id": _propTypes.default.string,
57
64
  "index": _propTypes.default.number,
package/lib/components/select/option-row/option-row.style.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { OptionRowProps } from ".";
2
2
  interface StyledOptionRowProps extends Pick<OptionRowProps, "hidden"> {
3
3
  isHighlighted?: boolean;
4
+ isDisabled?: boolean;
4
5
  }
5
6
  declare const StyledOptionRow: import("styled-components").StyledComponent<"tr", any, StyledOptionRowProps, never>;
6
7
  export default StyledOptionRow;
package/lib/components/select/option-row/option-row.style.js CHANGED
@@ -36,5 +36,15 @@ const StyledOptionRow = _styledComponents.default.tr`
36
36
  font-weight: 700;
37
37
  }
38
38
  }
39
+
40
+ ${({
41
+ isDisabled
42
+ }) => isDisabled && (0, _styledComponents.css)`
43
+ color: var(--colorsUtilityYin030);
44
+ cursor: not-allowed;
45
+ :hover {
46
+ background-color: var(--colorsUtilityYang100);
47
+ }
48
+ `}
39
49
  `;
40
50
  var _default = exports.default = StyledOptionRow;
package/lib/components/select/select-list/select-list.component.js CHANGED
@@ -198,7 +198,7 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
198
198
  }
199
199
  let nextIndex = (0, _getNextIndexByKey.default)(key, indexOfHighlighted, lastIndex, isLoading);
200
200
  const nextElement = childrenList[nextIndex];
201
- if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default) {
201
+ if ( /*#__PURE__*/_react.default.isValidElement(nextElement) && nextElement.type !== _option.default && nextElement.type !== _optionRow.default || nextElement.props.disabled) {
202
202
  nextIndex = getNextHighlightableItemIndex(key, nextIndex);
203
203
  }
204
204
  return nextIndex;
@@ -263,6 +263,9 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
263
263
  onSelectListClose();
264
264
  return;
265
265
  }
266
+ if (currentOption.props.disabled) {
267
+ return;
268
+ }
266
269
  const {
267
270
  text,
268
271
  value
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "125.2.2",
3
+ "version": "125.3.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",