carbon-react 119.5.0 → 119.6.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.
@@ -6,7 +6,7 @@ const StyledValidationMessage = styled.p`
6
6
  } = _ref;
7
7
  return css`
8
8
  color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
9
- font-weight: ${isWarning ? "regular" : "bold"};
9
+ font-weight: ${isWarning ? "normal" : "bold"};
10
10
  margin-top: 0px;
11
11
  margin-bottom: 8px;
12
12
  `;
@@ -46,6 +46,7 @@ export const MenuFullscreen = _ref => {
46
46
  }
47
47
  }
48
48
  };
49
+ const filteredChildren = React.Children.toArray(children).filter(c => /*#__PURE__*/React.isValidElement(c));
49
50
  return /*#__PURE__*/React.createElement("li", {
50
51
  "aria-label": "menu-fullscreen"
51
52
  }, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(FocusTrap, {
@@ -89,6 +90,6 @@ export const MenuFullscreen = _ref => {
89
90
  openSubmenuId: null,
90
91
  setOpenSubmenuId: /* istanbul ignore next */() => {}
91
92
  }
92
- }, React.Children.map(children, (child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < React.Children.count(children) - 1 && /*#__PURE__*/React.createElement(MenuDivider, null))))))))));
93
+ }, filteredChildren.map((child, index) => /*#__PURE__*/React.createElement(React.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/React.createElement(MenuDivider, null) : null)))))))));
93
94
  };
94
95
  export default MenuFullscreen;
@@ -1,12 +1,16 @@
1
- import React, { useState, useCallback } from "react";
1
+ import React, { useState, useCallback, useContext } from "react";
2
2
  import PropTypes from "prop-types";
3
- import StyledSwitch from "./switch.style";
3
+ import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
4
4
  import CheckableInput from "../../__internal__/checkable-input";
5
5
  import SwitchSlider from "./__internal__/switch-slider.component";
6
6
  import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
7
7
  import { TooltipProvider } from "../../__internal__/tooltip-provider";
8
8
  import Logger from "../../__internal__/utils/logger";
9
9
  import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
10
+ import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
11
+ import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
12
+ import Box from "../box";
13
+ import Label from "../../__internal__/label";
10
14
  let deprecateInputRefWarnTriggered = false;
11
15
  let deprecateUncontrolledWarnTriggered = false;
12
16
  const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -43,6 +47,9 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
43
47
  ...rest
44
48
  } = _ref;
45
49
  const isControlled = checked !== undefined;
50
+ const {
51
+ validationRedesignOptIn
52
+ } = useContext(NewValidationContext);
46
53
  const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
47
54
  if (!deprecateInputRefWarnTriggered && inputRef) {
48
55
  deprecateInputRefWarnTriggered = true;
@@ -84,7 +91,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
84
91
  error,
85
92
  warning,
86
93
  info,
87
- useValidationIcon: !shouldValidationBeOnLabel && !disabled
94
+ useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
88
95
  };
89
96
  const inputProps = {
90
97
  autoFocus,
@@ -93,6 +100,8 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
93
100
  info,
94
101
  disabled: disabled || loading,
95
102
  checked: isControlled ? checked : checkedInternal,
103
+ label,
104
+ labelHelp,
96
105
  fieldHelpInline,
97
106
  labelInline: shouldLabelBeInline,
98
107
  labelSpacing,
@@ -101,8 +110,6 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
101
110
  onChange: isControlled ? onChange : onChangeInternal,
102
111
  id,
103
112
  name,
104
- label,
105
- labelHelp,
106
113
  value,
107
114
  type: "checkbox",
108
115
  role: "switch",
@@ -112,10 +119,53 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
112
119
  ref: ref || inputRef,
113
120
  ...rest
114
121
  };
115
- return /*#__PURE__*/React.createElement(TooltipProvider, {
122
+
123
+ // Created separate const declarations to help when removing the old validation.
124
+ // Not all props utilised by the old validation work or will be needed with the new validation.
125
+ const switchStylePropsForNewValidation = {
126
+ "data-component": dataComponent,
127
+ "data-role": dataRole,
128
+ "data-element": dataElement,
129
+ checked: isControlled ? checked : checkedInternal,
130
+ size,
131
+ ...marginProps
132
+ };
133
+ const switchSliderPropsForNewValidation = {
134
+ checked: isControlled ? checked : checkedInternal,
135
+ disabled: disabled || loading,
136
+ loading,
137
+ size,
138
+ error,
139
+ warning
140
+ };
141
+ const inputPropsForNewValidation = {
142
+ autoFocus,
143
+ error,
144
+ warning,
145
+ disabled: disabled || loading,
146
+ checked: isControlled ? checked : checkedInternal,
147
+ onBlur,
148
+ onFocus,
149
+ onChange: isControlled ? onChange : onChangeInternal,
150
+ id,
151
+ name,
152
+ value,
153
+ type: "checkbox",
154
+ role: "switch",
155
+ ref: ref || inputRef,
156
+ ...rest
157
+ };
158
+ return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
159
+ position: "relative"
160
+ }, /*#__PURE__*/React.createElement(ValidationMessage, {
161
+ error: error,
162
+ warning: warning
163
+ }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
164
+ warning: !!(!error && warning)
165
+ }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
116
166
  helpAriaLabel: helpAriaLabel,
117
167
  tooltipPosition: tooltipPosition
118
- }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
168
+ }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps)))));
119
169
  });
120
170
  Switch.propTypes = {
121
171
  "about": PropTypes.string,
@@ -1,4 +1,8 @@
1
1
  import { SwitchProps } from "./switch.component";
2
2
  declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
3
+ export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
4
+ warning: boolean;
5
+ }, never>;
6
+ export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
3
7
  declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
4
8
  export default StyledSwitch;
@@ -8,14 +8,37 @@ import { StyledCheckableInput } from "../../__internal__/checkable-input/checkab
8
8
  import StyledSwitchSlider from "./__internal__/switch-slider.style";
9
9
  import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
10
10
  import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
11
- const StyledSwitch = styled.div`
11
+ export const ErrorBorder = styled.span`
12
12
  ${_ref => {
13
+ let {
14
+ warning
15
+ } = _ref;
16
+ return css`
17
+ position: absolute;
18
+ z-index: 6;
19
+ width: 2px;
20
+ background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
21
+ left: -12px;
22
+ bottom: -4px;
23
+ top: 2px;
24
+ `;
25
+ }}
26
+ `;
27
+ export const StyledHintText = styled.div`
28
+ margin-top: 8px;
29
+ margin-bottom: 8px;
30
+ color: var(--colorsUtilityYin055);
31
+ font-size: 14px;
32
+ font-weight: 400;
33
+ `;
34
+ const StyledSwitch = styled.div`
35
+ ${_ref2 => {
13
36
  let {
14
37
  fieldHelpInline,
15
38
  labelInline,
16
39
  reverse,
17
40
  size
18
- } = _ref;
41
+ } = _ref2;
19
42
  return css`
20
43
  ${margin}
21
44
  ${FieldLineStyle} {
@@ -14,7 +14,7 @@ const StyledValidationMessage = _styledComponents.default.p`
14
14
  } = _ref;
15
15
  return (0, _styledComponents.css)`
16
16
  color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
17
- font-weight: ${isWarning ? "regular" : "bold"};
17
+ font-weight: ${isWarning ? "normal" : "bold"};
18
18
  margin-top: 0px;
19
19
  margin-bottom: 8px;
20
20
  `;
@@ -55,6 +55,7 @@ const MenuFullscreen = _ref => {
55
55
  }
56
56
  }
57
57
  };
58
+ const filteredChildren = _react.default.Children.toArray(children).filter(c => /*#__PURE__*/_react.default.isValidElement(c));
58
59
  return /*#__PURE__*/_react.default.createElement("li", {
59
60
  "aria-label": "menu-fullscreen"
60
61
  }, /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_focusTrap.default, {
@@ -98,7 +99,7 @@ const MenuFullscreen = _ref => {
98
99
  openSubmenuId: null,
99
100
  setOpenSubmenuId: /* istanbul ignore next */() => {}
100
101
  }
101
- }, _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < _react.default.Children.count(children) - 1 && /*#__PURE__*/_react.default.createElement(_menuDivider.default, null))))))))));
102
+ }, filteredChildren.map((child, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, child, index < filteredChildren.length - 1 ? /*#__PURE__*/_react.default.createElement(_menuDivider.default, null) : null)))))))));
102
103
  };
103
104
  exports.MenuFullscreen = MenuFullscreen;
104
105
  var _default = MenuFullscreen;
@@ -6,13 +6,17 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.default = exports.Switch = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
- var _switch = _interopRequireDefault(require("./switch.style"));
9
+ var _switch = _interopRequireWildcard(require("./switch.style"));
10
10
  var _checkableInput = _interopRequireDefault(require("../../__internal__/checkable-input"));
11
11
  var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
12
12
  var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
13
13
  var _tooltipProvider = require("../../__internal__/tooltip-provider");
14
14
  var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
15
15
  var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
16
+ var _carbonProvider = require("../carbon-provider/carbon-provider.component");
17
+ var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
18
+ var _box = _interopRequireDefault(require("../box"));
19
+ var _label = _interopRequireDefault(require("../../__internal__/label"));
16
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
21
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -52,6 +56,9 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
52
56
  ...rest
53
57
  } = _ref;
54
58
  const isControlled = checked !== undefined;
59
+ const {
60
+ validationRedesignOptIn
61
+ } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
55
62
  const [checkedInternal, setCheckedInternal] = (0, _react.useState)(defaultChecked || false);
56
63
  if (!deprecateInputRefWarnTriggered && inputRef) {
57
64
  deprecateInputRefWarnTriggered = true;
@@ -93,7 +100,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
93
100
  error,
94
101
  warning,
95
102
  info,
96
- useValidationIcon: !shouldValidationBeOnLabel && !disabled
103
+ useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
97
104
  };
98
105
  const inputProps = {
99
106
  autoFocus,
@@ -102,6 +109,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
102
109
  info,
103
110
  disabled: disabled || loading,
104
111
  checked: isControlled ? checked : checkedInternal,
112
+ label,
113
+ labelHelp,
105
114
  fieldHelpInline,
106
115
  labelInline: shouldLabelBeInline,
107
116
  labelSpacing,
@@ -110,8 +119,6 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
110
119
  onChange: isControlled ? onChange : onChangeInternal,
111
120
  id,
112
121
  name,
113
- label,
114
- labelHelp,
115
122
  value,
116
123
  type: "checkbox",
117
124
  role: "switch",
@@ -121,10 +128,53 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
121
128
  ref: ref || inputRef,
122
129
  ...rest
123
130
  };
124
- return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
131
+
132
+ // Created separate const declarations to help when removing the old validation.
133
+ // Not all props utilised by the old validation work or will be needed with the new validation.
134
+ const switchStylePropsForNewValidation = {
135
+ "data-component": dataComponent,
136
+ "data-role": dataRole,
137
+ "data-element": dataElement,
138
+ checked: isControlled ? checked : checkedInternal,
139
+ size,
140
+ ...marginProps
141
+ };
142
+ const switchSliderPropsForNewValidation = {
143
+ checked: isControlled ? checked : checkedInternal,
144
+ disabled: disabled || loading,
145
+ loading,
146
+ size,
147
+ error,
148
+ warning
149
+ };
150
+ const inputPropsForNewValidation = {
151
+ autoFocus,
152
+ error,
153
+ warning,
154
+ disabled: disabled || loading,
155
+ checked: isControlled ? checked : checkedInternal,
156
+ onBlur,
157
+ onFocus,
158
+ onChange: isControlled ? onChange : onChangeInternal,
159
+ id,
160
+ name,
161
+ value,
162
+ type: "checkbox",
163
+ role: "switch",
164
+ ref: ref || inputRef,
165
+ ...rest
166
+ };
167
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
168
+ position: "relative"
169
+ }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
170
+ error: error,
171
+ warning: warning
172
+ }), (error || warning) && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
173
+ warning: !!(!error && warning)
174
+ }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
125
175
  helpAriaLabel: helpAriaLabel,
126
176
  tooltipPosition: tooltipPosition
127
- }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps))));
177
+ }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
128
178
  });
129
179
  exports.Switch = Switch;
130
180
  Switch.propTypes = {
@@ -1,4 +1,8 @@
1
1
  import { SwitchProps } from "./switch.component";
2
2
  declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
3
+ export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
4
+ warning: boolean;
5
+ }, never>;
6
+ export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
3
7
  declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
4
8
  export default StyledSwitch;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = void 0;
6
+ exports.default = exports.StyledHintText = exports.ErrorBorder = void 0;
7
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
8
8
  var _styledSystem = require("styled-system");
9
9
  var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -17,14 +17,39 @@ var _formField = require("../../__internal__/form-field/form-field.style");
17
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
19
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
20
- const StyledSwitch = _styledComponents.default.div`
20
+ const ErrorBorder = _styledComponents.default.span`
21
21
  ${_ref => {
22
+ let {
23
+ warning
24
+ } = _ref;
25
+ return (0, _styledComponents.css)`
26
+ position: absolute;
27
+ z-index: 6;
28
+ width: 2px;
29
+ background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
30
+ left: -12px;
31
+ bottom: -4px;
32
+ top: 2px;
33
+ `;
34
+ }}
35
+ `;
36
+ exports.ErrorBorder = ErrorBorder;
37
+ const StyledHintText = _styledComponents.default.div`
38
+ margin-top: 8px;
39
+ margin-bottom: 8px;
40
+ color: var(--colorsUtilityYin055);
41
+ font-size: 14px;
42
+ font-weight: 400;
43
+ `;
44
+ exports.StyledHintText = StyledHintText;
45
+ const StyledSwitch = _styledComponents.default.div`
46
+ ${_ref2 => {
22
47
  let {
23
48
  fieldHelpInline,
24
49
  labelInline,
25
50
  reverse,
26
51
  size
27
- } = _ref;
52
+ } = _ref2;
28
53
  return (0, _styledComponents.css)`
29
54
  ${_styledSystem.margin}
30
55
  ${_formField.FieldLineStyle} {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "119.5.0",
3
+ "version": "119.6.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",