carbon-react 123.7.0 → 123.7.2

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 (5) hide show
  1. package/esm/components/popover-container/popover-container.component.js +20 -4
  2. package/esm/components/switch/switch.component.js +5 -2
  3. package/lib/components/popover-container/popover-container.component.js +19 -3
  4. package/lib/components/switch/switch.component.js +5 -2
  5. package/package.json +1 -1
package/esm/components/popover-container/popover-container.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- import React, { useEffect, useRef, useState } from "react";
2
+ import React, { useCallback, useEffect, useRef, useState } from "react";
3
3
  import PropTypes from "prop-types";
4
4
  import { Transition } from "react-transition-group";
5
5
  import { flip, offset } from "@floating-ui/dom";
@@ -9,6 +9,7 @@ import Popover from "../../__internal__/popover";
9
9
  import createGuid from "../../__internal__/utils/helpers/guid";
10
10
  import { filterStyledSystemPaddingProps } from "../../style/utils";
11
11
  import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
12
+ import Events from "../../__internal__/utils/helpers/events";
12
13
  export const renderOpen = ({
13
14
  tabIndex,
14
15
  onClick,
@@ -80,6 +81,23 @@ export const PopoverContainer = ({
80
81
  useEffect(() => {
81
82
  if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
82
83
  }, [isOpen]);
84
+ const closePopover = useCallback(ev => {
85
+ if (!isControlled) setIsOpenInternal(!isOpen);
86
+ if (onClose) onClose(ev);
87
+ if (isOpen && openButtonRef.current) openButtonRef.current.focus();
88
+ }, [isControlled, isOpen, onClose]);
89
+ const handleEscKey = useCallback(ev => {
90
+ const eventIsFromSelectInput = Events.composedPath(ev).find(element => {
91
+ return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
92
+ });
93
+ if (!eventIsFromSelectInput && Events.isEscKey(ev)) closePopover(ev);
94
+ }, [closePopover]);
95
+ useEffect(() => {
96
+ document.addEventListener("keydown", handleEscKey);
97
+ return () => {
98
+ document.removeEventListener("keydown", handleEscKey);
99
+ };
100
+ }, [handleEscKey]);
83
101
  const handleOpenButtonClick = e => {
84
102
  if (!isControlled) setIsOpenInternal(!isOpen);
85
103
 
@@ -89,9 +107,7 @@ export const PopoverContainer = ({
89
107
  } else if (onClose) onClose(e);
90
108
  };
91
109
  const handleCloseButtonClick = e => {
92
- if (!isControlled) setIsOpenInternal(!isOpen);
93
- if (onClose) onClose(e);
94
- if (isOpen && openButtonRef.current) openButtonRef.current.focus();
110
+ closePopover(e);
95
111
  };
96
112
  const renderOpenComponentProps = {
97
113
  tabIndex: isOpen ? -1 : 0,
package/esm/components/switch/switch.component.js CHANGED
@@ -156,12 +156,15 @@ const Switch = /*#__PURE__*/React.forwardRef(({
156
156
  ref: ref || inputRef,
157
157
  ...rest
158
158
  };
159
- 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
+ const applyValidation = error || warning;
160
+ return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Box, {
161
+ mb: labelHelp ? 0 : 1
162
+ }, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp)), /*#__PURE__*/React.createElement(Box, {
160
163
  position: "relative"
161
164
  }, /*#__PURE__*/React.createElement(ValidationMessage, {
162
165
  error: error,
163
166
  warning: warning
164
- }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
167
+ }), applyValidation && /*#__PURE__*/React.createElement(ErrorBorder, {
165
168
  warning: !!(!error && warning)
166
169
  }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
167
170
  helpAriaLabel: helpAriaLabel,
package/lib/components/popover-container/popover-container.component.js CHANGED
@@ -14,6 +14,7 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
14
14
  var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
15
15
  var _utils = require("../../style/utils");
16
16
  var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
17
+ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
17
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
19
  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
20
  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; }
@@ -91,6 +92,23 @@ const PopoverContainer = ({
91
92
  (0, _react.useEffect)(() => {
92
93
  if (isOpen && closeButtonRef.current) setTimeout(() => closeButtonRef.current?.focus(), 0);
93
94
  }, [isOpen]);
95
+ const closePopover = (0, _react.useCallback)(ev => {
96
+ if (!isControlled) setIsOpenInternal(!isOpen);
97
+ if (onClose) onClose(ev);
98
+ if (isOpen && openButtonRef.current) openButtonRef.current.focus();
99
+ }, [isControlled, isOpen, onClose]);
100
+ const handleEscKey = (0, _react.useCallback)(ev => {
101
+ const eventIsFromSelectInput = _events.default.composedPath(ev).find(element => {
102
+ return element instanceof HTMLElement && element.getAttribute("data-element") === "input" && element.getAttribute("aria-expanded") === "true";
103
+ });
104
+ if (!eventIsFromSelectInput && _events.default.isEscKey(ev)) closePopover(ev);
105
+ }, [closePopover]);
106
+ (0, _react.useEffect)(() => {
107
+ document.addEventListener("keydown", handleEscKey);
108
+ return () => {
109
+ document.removeEventListener("keydown", handleEscKey);
110
+ };
111
+ }, [handleEscKey]);
94
112
  const handleOpenButtonClick = e => {
95
113
  if (!isControlled) setIsOpenInternal(!isOpen);
96
114
 
@@ -100,9 +118,7 @@ const PopoverContainer = ({
100
118
  } else if (onClose) onClose(e);
101
119
  };
102
120
  const handleCloseButtonClick = e => {
103
- if (!isControlled) setIsOpenInternal(!isOpen);
104
- if (onClose) onClose(e);
105
- if (isOpen && openButtonRef.current) openButtonRef.current.focus();
121
+ closePopover(e);
106
122
  };
107
123
  const renderOpenComponentProps = {
108
124
  tabIndex: isOpen ? -1 : 0,
package/lib/components/switch/switch.component.js CHANGED
@@ -165,12 +165,15 @@ const Switch = /*#__PURE__*/_react.default.forwardRef(({
165
165
  ref: ref || inputRef,
166
166
  ...rest
167
167
  };
168
- 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
+ const applyValidation = error || warning;
169
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, /*#__PURE__*/_react.default.createElement(_box.default, {
170
+ mb: labelHelp ? 0 : 1
171
+ }, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp)), /*#__PURE__*/_react.default.createElement(_box.default, {
169
172
  position: "relative"
170
173
  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
171
174
  error: error,
172
175
  warning: warning
173
- }), (error || warning) && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
176
+ }), applyValidation && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
174
177
  warning: !!(!error && warning)
175
178
  }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
176
179
  helpAriaLabel: helpAriaLabel,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "123.7.0",
3
+ "version": "123.7.2",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",