carbon-react 142.11.4 → 142.11.6

package/esm/__internal__/form-field/form-field.component.js

@@ -87,6 +87,7 @@ const FormField = ({
     id: fieldHelpId
   }, fieldHelpContent) : null;
   return /*#__PURE__*/React.createElement(FormFieldStyle, _extends({}, tagComponent(dataComponent, rest), marginProps), /*#__PURE__*/React.createElement(FieldLineStyle, {
+    "data-role": "field-line",
     inline: inlineLabel
   }, reverse && children, label && /*#__PURE__*/React.createElement(Label, {
     labelId: labelId,

package/esm/components/date/date.component.js

@@ -10,7 +10,6 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/__internal__/date-range.context";
-import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 const DateInput = /*#__PURE__*/React.forwardRef(({
@@ -48,6 +47,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
+  const blockClose = useRef(false);
   const locale = useLocale();
   const {
     dateFnsLocale
@@ -89,17 +89,30 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  useEffect(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -165,7 +178,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -200,7 +215,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -209,9 +224,13 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -220,7 +239,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = useCallback(inputElement => {
     internalInputRef.current = inputElement;

package/esm/components/navigation-bar/navigation-bar.component.js

@@ -15,12 +15,7 @@ const NavigationBar = ({
   ...props
 }) => {
   const navbarRef = useRef(null);
-  return /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
-    orientation: isGlobal ? "top" : orientation,
-    offset: isGlobal ? "0px" : offset,
-    position: isGlobal ? "fixed" : position,
-    navbarRef: navbarRef
-  }, /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
+  return /*#__PURE__*/React.createElement(StyledNavigationBar, _extends({
     role: "navigation",
     "data-component": isGlobal ? "global-header" : "navigation-bar",
     "aria-label": isGlobal ? "Global Header" : ariaLabel,
@@ -31,7 +26,12 @@ const NavigationBar = ({
   }, props, {
     isGlobal: isGlobal,
     ref: navbarRef
-  }), !isLoading && children));
+  }), /*#__PURE__*/React.createElement(FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarRef: navbarRef
+  }, !isLoading && children));
 };
 if (process.env.NODE_ENV !== "production") {
   NavigationBar.propTypes = {

package/lib/__internal__/form-field/form-field.component.js

@@ -96,6 +96,7 @@ const FormField = ({
     id: fieldHelpId
   }, fieldHelpContent) : null;
   return /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, (0, _tags.default)(dataComponent, rest), marginProps), /*#__PURE__*/_react.default.createElement(_formField.FieldLineStyle, {
+    "data-role": "field-line",
     inline: inlineLabel
   }, reverse && children, label && /*#__PURE__*/_react.default.createElement(_label.default, {
     labelId: labelId,

package/lib/components/date/date.component.js

@@ -15,7 +15,6 @@ var _date = _interopRequireDefault(require("./date.style"));
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
-var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,6 +56,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
+  const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale
@@ -98,17 +98,30 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  (0, _react.useEffect)(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -174,7 +187,9 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -209,7 +224,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -218,9 +233,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -229,7 +248,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = (0, _react.useCallback)(inputElement => {
     internalInputRef.current = inputElement;

package/lib/components/navigation-bar/navigation-bar.component.js

@@ -24,12 +24,7 @@ const NavigationBar = ({
   ...props
 }) => {
   const navbarRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
-    orientation: isGlobal ? "top" : orientation,
-    offset: isGlobal ? "0px" : offset,
-    position: isGlobal ? "fixed" : position,
-    navbarRef: navbarRef
-  }, /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
     role: "navigation",
     "data-component": isGlobal ? "global-header" : "navigation-bar",
     "aria-label": isGlobal ? "Global Header" : ariaLabel,
@@ -40,7 +35,12 @@ const NavigationBar = ({
   }, props, {
     isGlobal: isGlobal,
     ref: navbarRef
-  }), !isLoading && children));
+  }), /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
+    orientation: isGlobal ? "top" : orientation,
+    offset: isGlobal ? "0px" : offset,
+    position: isGlobal ? "fixed" : position,
+    navbarRef: navbarRef
+  }, !isLoading && children));
 };
 exports.NavigationBar = NavigationBar;
 if (process.env.NODE_ENV !== "production") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.11.4",
+  "version": "142.11.6",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",