carbon-react 142.13.1 → 142.13.2

package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -37,9 +37,11 @@ export interface DatePickerProps {
     setOpen: (isOpen: boolean) => void;
     /** Id passed to tab guard element */
     pickerTabGuardId?: string;
+    /** Callback triggered when the picker is closed */
+    onPickerClose?: () => void;
 }
 export declare const DatePicker: {
-    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, }: DatePickerProps): React.JSX.Element | null;
+    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, }: DatePickerProps): React.JSX.Element | null;
     displayName: string;
 };
 export default DatePicker;

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -28,7 +28,8 @@ export const DatePicker = ({
   pickerProps,
   open,
   setOpen,
-  pickerTabGuardId
+  pickerTabGuardId,
+  onPickerClose
 }) => {
   const locale = useLocale();
   const {
@@ -96,6 +97,7 @@ export const DatePicker = ({
         name
       };
       onDayClick?.(date, ev);
+      onPickerClose?.();
     }
   };
   const handleKeyUp = useCallback(ev => {
@@ -103,14 +105,16 @@ export const DatePicker = ({
     if (open && Events.isEscKey(ev)) {
       inputElement.current?.querySelector("input")?.focus();
       setOpen(false);
+      onPickerClose?.();
       ev.stopPropagation();
     }
-  }, [inputElement, open, setOpen]);
+  }, [inputElement, onPickerClose, open, setOpen]);
   const handleOnKeyDown = ev => {
     /* istanbul ignore else */
     if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && Events.isTabKey(ev) && Events.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       inputElement.current?.querySelector("input")?.focus();
     }
   };
@@ -120,6 +124,7 @@ export const DatePicker = ({
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       const input = inputElement.current?.querySelector("input");
 
       /* istanbul ignore else */

package/esm/components/date/date.component.d.ts

@@ -38,6 +38,10 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
      * Name passed from DateRange to allow it to know which input is updating
      * */
     inputName?: InputName;
+    /** Callback triggered when the picker is opened */
+    onPickerOpen?: () => void;
+    /** Callback triggered when the picker is closed */
+    onPickerClose?: () => void;
 }
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

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

@@ -39,6 +39,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   labelWidth,
   maxWidth,
   inputName,
+  onPickerClose,
+  onPickerOpen,
   ...rest
 }, ref) => {
   const wrapperRef = useRef(null);
@@ -102,6 +104,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
           isBlurBlocked.current = false;
           internalInputRef.current?.blur();
           setOpen(false);
+          onPickerClose?.();
           alreadyFocused.current = false;
         }
       } else {
@@ -180,6 +183,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     if (!open && !alreadyFocused.current) {
       setTimeout(() => {
         setOpen(true);
+        onPickerOpen?.();
       }, 0);
     } else {
       alreadyFocused.current = false;
@@ -192,9 +196,10 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     /* istanbul ignore else */
     if (open && Events.isEscKey(ev)) {
       setOpen(false);
+      onPickerClose?.();
       ev.stopPropagation();
     }
-  }, [open]);
+  }, [onPickerClose, open]);
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
@@ -202,6 +207,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     if (open && Events.isTabKey(ev)) {
       if (Events.isShiftKey(ev)) {
         setOpen(false);
+        onPickerClose?.();
       } else if (!disablePortal) {
         ev.preventDefault();
         document?.querySelector(`[id="${pickerTabGuardId.current}"]`)?.focus();
@@ -225,11 +231,20 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     if (type !== "text") {
       alreadyFocused.current = true;
       setTimeout(() => {
-        setOpen(prev => !prev);
+        setOpen(prev => {
+          const nextState = !prev;
+          if (!nextState) {
+            onPickerClose?.();
+          } else {
+            onPickerOpen?.();
+          }
+          return nextState;
+        });
       }, 0);
     } else if (!open) {
       setTimeout(() => {
         setOpen(true);
+        onPickerOpen?.();
       }, 0);
     }
   };
@@ -333,7 +348,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     pickerMouseDown: handlePickerMouseDown,
     open: open,
     setOpen: setOpen,
-    pickerTabGuardId: pickerTabGuardId.current
+    pickerTabGuardId: pickerTabGuardId.current,
+    onPickerClose: onPickerClose
   }));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -719,6 +735,8 @@ if (process.env.NODE_ENV !== "production") {
     "onPasteCapture": PropTypes.func,
     "onPause": PropTypes.func,
     "onPauseCapture": PropTypes.func,
+    "onPickerClose": PropTypes.func,
+    "onPickerOpen": PropTypes.func,
     "onPlay": PropTypes.func,
     "onPlayCapture": PropTypes.func,
     "onPlaying": PropTypes.func,

package/esm/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -107,6 +107,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
   const titleChildren = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTitleContent, {
+    "data-role": "tab-title-content",
     error: error,
     warning: warning,
     info: info,
@@ -137,6 +138,7 @@ const TabTitle = /*#__PURE__*/React.forwardRef(({
     info: infoMessage
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/React.createElement(StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
+    "data-role": "tab-selected-indicator",
     position: position
   }));
   const titleWrapperProps = {

package/esm/components/tabs/tabs.component.js

@@ -102,6 +102,8 @@ const Tabs = ({
 
   /** Handles the changing of tabs with the mouse */
   const handleTabClick = ev => {
+    // istanbul ignore if
+    // (code doesn't seem to be ever reached - FE-6835 raised to investigate and hopefully remove this)
     if (Event.isEventType(ev, "keydown")) {
       return;
     }
@@ -256,7 +258,8 @@ const Tabs = ({
   };
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     className: className,
-    position: isInSidebar ? "left" : position
+    position: isInSidebar ? "left" : position,
+    "data-role": "tabs"
   }, tagComponent("tabs", rest), {
     isInSidebar: isInSidebar,
     headerWidth: headerWidth

package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts

@@ -37,9 +37,11 @@ export interface DatePickerProps {
     setOpen: (isOpen: boolean) => void;
     /** Id passed to tab guard element */
     pickerTabGuardId?: string;
+    /** Callback triggered when the picker is closed */
+    onPickerClose?: () => void;
 }
 export declare const DatePicker: {
-    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, }: DatePickerProps): React.JSX.Element | null;
+    ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, }: DatePickerProps): React.JSX.Element | null;
     displayName: string;
 };
 export default DatePicker;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -36,7 +36,8 @@ const DatePicker = ({
   pickerProps,
   open,
   setOpen,
-  pickerTabGuardId
+  pickerTabGuardId,
+  onPickerClose
 }) => {
   const locale = (0, _useLocale.default)();
   const {
@@ -104,6 +105,7 @@ const DatePicker = ({
         name
       };
       onDayClick?.(date, ev);
+      onPickerClose?.();
     }
   };
   const handleKeyUp = (0, _react.useCallback)(ev => {
@@ -111,14 +113,16 @@ const DatePicker = ({
     if (open && _events.default.isEscKey(ev)) {
       inputElement.current?.querySelector("input")?.focus();
       setOpen(false);
+      onPickerClose?.();
       ev.stopPropagation();
     }
-  }, [inputElement, open, setOpen]);
+  }, [inputElement, onPickerClose, open, setOpen]);
   const handleOnKeyDown = ev => {
     /* istanbul ignore else */
     if (ref.current?.querySelector(".DayPicker-NavBar button") === document.activeElement && _events.default.isTabKey(ev) && _events.default.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       inputElement.current?.querySelector("input")?.focus();
     }
   };
@@ -128,6 +132,7 @@ const DatePicker = ({
     if (_events.default.isTabKey(ev) && !_events.default.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       const input = inputElement.current?.querySelector("input");
 
       /* istanbul ignore else */

package/lib/components/date/date.component.d.ts

@@ -38,6 +38,10 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
      * Name passed from DateRange to allow it to know which input is updating
      * */
     inputName?: InputName;
+    /** Callback triggered when the picker is opened */
+    onPickerOpen?: () => void;
+    /** Callback triggered when the picker is closed */
+    onPickerClose?: () => void;
 }
 export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;

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

@@ -48,6 +48,8 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   labelWidth,
   maxWidth,
   inputName,
+  onPickerClose,
+  onPickerOpen,
   ...rest
 }, ref) => {
   const wrapperRef = (0, _react.useRef)(null);
@@ -111,6 +113,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
           isBlurBlocked.current = false;
           internalInputRef.current?.blur();
           setOpen(false);
+          onPickerClose?.();
           alreadyFocused.current = false;
         }
       } else {
@@ -189,6 +192,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     if (!open && !alreadyFocused.current) {
       setTimeout(() => {
         setOpen(true);
+        onPickerOpen?.();
       }, 0);
     } else {
       alreadyFocused.current = false;
@@ -201,9 +205,10 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     /* istanbul ignore else */
     if (open && _events.default.isEscKey(ev)) {
       setOpen(false);
+      onPickerClose?.();
       ev.stopPropagation();
     }
-  }, [open]);
+  }, [onPickerClose, open]);
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
@@ -211,6 +216,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     if (open && _events.default.isTabKey(ev)) {
       if (_events.default.isShiftKey(ev)) {
         setOpen(false);
+        onPickerClose?.();
       } else if (!disablePortal) {
         ev.preventDefault();
         document?.querySelector(`[id="${pickerTabGuardId.current}"]`)?.focus();
@@ -234,11 +240,20 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     if (type !== "text") {
       alreadyFocused.current = true;
       setTimeout(() => {
-        setOpen(prev => !prev);
+        setOpen(prev => {
+          const nextState = !prev;
+          if (!nextState) {
+            onPickerClose?.();
+          } else {
+            onPickerOpen?.();
+          }
+          return nextState;
+        });
       }, 0);
     } else if (!open) {
       setTimeout(() => {
         setOpen(true);
+        onPickerOpen?.();
       }, 0);
     }
   };
@@ -342,7 +357,8 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     pickerMouseDown: handlePickerMouseDown,
     open: open,
     setOpen: setOpen,
-    pickerTabGuardId: pickerTabGuardId.current
+    pickerTabGuardId: pickerTabGuardId.current,
+    onPickerClose: onPickerClose
   }));
 });
 if (process.env.NODE_ENV !== "production") {
@@ -728,6 +744,8 @@ if (process.env.NODE_ENV !== "production") {
     "onPasteCapture": _propTypes.default.func,
     "onPause": _propTypes.default.func,
     "onPauseCapture": _propTypes.default.func,
+    "onPickerClose": _propTypes.default.func,
+    "onPickerOpen": _propTypes.default.func,
     "onPlay": _propTypes.default.func,
     "onPlayCapture": _propTypes.default.func,
     "onPlaying": _propTypes.default.func,

package/lib/components/tabs/__internal__/tab-title/tab-title.component.js

@@ -116,6 +116,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     return titlePosition === "before" ? [titleText, titleSiblings] : [titleSiblings, titleText];
   };
   const titleChildren = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tabTitle.StyledTitleContent, {
+    "data-role": "tab-title-content",
     error: error,
     warning: warning,
     info: info,
@@ -146,6 +147,7 @@ const TabTitle = /*#__PURE__*/_react.default.forwardRef(({
     info: infoMessage
   }))), !(hasFailedValidation || hasAlternateStyling) && isTabSelected && /*#__PURE__*/_react.default.createElement(_tabTitle.StyledSelectedIndicator, {
     "data-element": "tab-selected-indicator",
+    "data-role": "tab-selected-indicator",
     position: position
   }));
   const titleWrapperProps = {

package/lib/components/tabs/tabs.component.js

@@ -117,6 +117,8 @@ const Tabs = ({
 
   /** Handles the changing of tabs with the mouse */
   const handleTabClick = ev => {
+    // istanbul ignore if
+    // (code doesn't seem to be ever reached - FE-6835 raised to investigate and hopefully remove this)
     if (_events.default.isEventType(ev, "keydown")) {
       return;
     }
@@ -271,7 +273,8 @@ const Tabs = ({
   };
   return /*#__PURE__*/_react.default.createElement(_tabs.default, _extends({
     className: className,
-    position: isInSidebar ? "left" : position
+    position: isInSidebar ? "left" : position,
+    "data-role": "tabs"
   }, (0, _tags.default)("tabs", rest), {
     isInSidebar: isInSidebar,
     headerWidth: headerWidth

package/package.json

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