carbon-react 114.16.0 → 114.17.1

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

@@ -2,11 +2,9 @@ import React from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
 import { DialogSizes } from "./dialog.config";
+import { CustomRefObject } from "../../__internal__/focus-trap";
 declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
 declare type PaddingValues = typeof PADDING_VALUES[number];
-declare type CustomRefObject<T> = {
-    current?: T | null;
-};
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
@@ -37,7 +35,7 @@ export interface DialogProps extends ModalProps, TagProps {
      */
     bespokeFocusTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** Allows developers to specify a specific height for the dialog. */

package/lib/components/dialog/dialog.component.js

@@ -248,15 +248,21 @@ Dialog.propTypes = {
     }
   })),
   "focusableSelectors": _propTypes.default.string,
-  "focusFirstElement": _propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+  "focusFirstElement": _propTypes.default.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, _propTypes.default.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
-  }),
+    }
+  })]),
   "height": _propTypes.default.string,
   "help": _propTypes.default.string,
   "onCancel": _propTypes.default.func,

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { ModalProps } from "../modal";
+import { CustomRefObject } from "../../__internal__/focus-trap";
 export interface DialogFullScreenProps extends ModalProps {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
@@ -23,7 +24,7 @@ export interface DialogFullScreenProps extends ModalProps {
     /** remove padding from content */
     disableContentPadding?: boolean;
     /** Optional reference to an element meant to be focused on open */
-    focusFirstElement?: React.MutableRefObject<HTMLElement | null>;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /**
      * Function to replace focus trap
      * @ignore
@@ -45,7 +46,7 @@ export interface DialogFullScreenProps extends ModalProps {
     /** The ARIA role to be applied to the DialogFullscreen container */
     role?: string;
     /** an optional array of refs to containers whose content should also be reachable by tabbing from the dialog */
-    focusableContainers?: React.MutableRefObject<HTMLElement | null>[];
+    focusableContainers?: CustomRefObject<HTMLElement>[];
     /** Optional selector to identify the focusable elements, if not provided a default selector is used */
     focusableSelectors?: string;
     /** A custom close event handler */

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -162,24 +162,30 @@ DialogFullScreen.propTypes = {
   "disableEscKey": _propTypes.default.bool,
   "enableBackgroundUI": _propTypes.default.bool,
   "focusableContainers": _propTypes.default.arrayOf(_propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
+    }
   })),
   "focusableSelectors": _propTypes.default.string,
-  "focusFirstElement": _propTypes.default.shape({
-    "current": _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), function (props, propName) {
+  "focusFirstElement": _propTypes.default.oneOfType([function (props, propName) {
+    if (props[propName] == null) {
+      return new Error("Prop '" + propName + "' is required but wasn't specified");
+    } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+      return new Error("Expected prop '" + propName + "' to be of type Element");
+    }
+  }, _propTypes.default.shape({
+    "current": function (props, propName) {
       if (props[propName] == null) {
-        return new Error("Prop '" + propName + "' is required but wasn't specified");
+        return null;
       } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
         return new Error("Expected prop '" + propName + "' to be of type Element");
       }
-    }]).isRequired
-  }),
+    }
+  })]),
   "headerChildren": _propTypes.default.node,
   "help": _propTypes.default.string,
   "onCancel": _propTypes.default.func,

package/lib/components/menu/__internal__/submenu/submenu.component.js

@@ -68,6 +68,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
   const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
   const [characterString, setCharacterString] = (0, _react.useState)("");
   const shiftTabPressed = (0, _react.useRef)(false);
+  const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
   const registerItem = (0, _react.useCallback)(id => {
     setSubmenuItemIds(prevState => {
       return [...prevState, id];
@@ -134,6 +135,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
       if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
         event.preventDefault();
         openSubmenu();
+        focusFirstMenuItemOnOpen.current = !href;
       }
     }
 
@@ -237,10 +239,11 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
     }
   }, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
   (0, _react.useEffect)(() => {
-    if (submenuOpen && !href && !submenuFocusId && submenuItemIds.length) {
+    if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
+      focusFirstMenuItemOnOpen.current = false;
       setSubmenuFocusId(submenuItemIds[0]);
     }
-  }, [submenuOpen, href, submenuFocusId, submenuItemIds]);
+  }, [submenuOpen, submenuFocusId, submenuItemIds]);
 
   const handleClickAway = () => {
     document.removeEventListener("click", handleClickAway);

package/lib/components/menu/menu-item/menu-item.component.js

@@ -147,7 +147,7 @@ const MenuItem = ({
     href,
     target,
     rel,
-    onClick: onClick || (inputRef.current ? updateFocusOnClick : undefined),
+    onClick,
     icon,
     selected,
     variant,
@@ -196,7 +196,8 @@ const MenuItem = ({
   }, rest, {
     inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
     menuOpen: menuOpen,
-    id: menuItemId.current
+    id: menuItemId.current,
+    onClick: updateFocusOnClick
   }), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
     as: inputRef.current ? "div" : _link.default,
     isSearch: inputRef.current,

package/lib/components/search/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./search.component";
-export type { SearchProps } from "./search.component";
+export type { SearchProps, SearchEvent } from "./search.component";

package/lib/components/simple-color-picker/index.d.ts

@@ -1,4 +1,4 @@
 export { default as SimpleColorPicker } from "./simple-color-picker.component";
-export type { SimpleColorPickerProps } from "./simple-color-picker.component";
+export type { SimpleColorPickerProps, SimpleColorPickerRef, } from "./simple-color-picker.component";
 export { default as SimpleColor } from "./simple-color";
 export type { SimpleColorProps } from "./simple-color";

package/lib/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -27,5 +27,9 @@ export interface SimpleColorPickerProps extends ValidationProps, MarginProps {
     /** The currently selected color. */
     value?: string;
 }
-export declare const SimpleColorPicker: (props: SimpleColorPickerProps) => JSX.Element;
+export interface SimpleColorPickerRef {
+    /** List of color input HTML refs */
+    gridItemRefs: (HTMLInputElement | null)[];
+}
+export declare const SimpleColorPicker: React.ForwardRefExoticComponent<SimpleColorPickerProps & React.RefAttributes<SimpleColorPickerRef>>;
 export default SimpleColorPicker;

package/lib/components/simple-color-picker/simple-color-picker.component.js

@@ -37,7 +37,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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); }
 
-const SimpleColorPicker = props => {
+const SimpleColorPicker = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     children,
     error,
@@ -77,7 +77,7 @@ const SimpleColorPicker = props => {
   let blankSlots = itemsPerRow * rowCount - (filteredChildren === null || filteredChildren === void 0 ? void 0 : filteredChildren.length);
   let currentRow = 1;
   let loopCounter = 1;
-  const gridItemRefs = (0, _react.useMemo)(() => filteredChildren.map(child => child.ref || /*#__PURE__*/_react.default.createRef()), [filteredChildren]);
+  const gridItemRefs = (0, _react.useRef)([]);
   const navigationGrid = filteredChildren.map((child, index) => {
     const allowUp = currentRow !== 1;
     let allowDown = false;
@@ -107,7 +107,9 @@ const SimpleColorPicker = props => {
     }
 
     const childProps = {
-      ref: gridItemRefs[index],
+      ref: element => {
+        gridItemRefs.current[index] = element;
+      },
       "data-up": allowUp,
       "data-down": allowDown,
       "data-item-up": upItem,
@@ -117,6 +119,14 @@ const SimpleColorPicker = props => {
     loopCounter += 1;
     return /*#__PURE__*/_react.default.cloneElement(child, childProps);
   });
+  (0, _react.useImperativeHandle)(ref, () => ({
+    gridItemRefs: gridItemRefs.current
+  }), [gridItemRefs]);
+  const getElementPosition = (0, _react.useCallback)(target => {
+    return navigationGrid.findIndex(element => {
+      return target.getAttribute("value") === element.props.value;
+    });
+  }, [navigationGrid]);
   const onKeyDownHandler = (0, _react.useCallback)(e => {
     if (onKeyDown) {
       onKeyDown(e);
@@ -137,14 +147,10 @@ const SimpleColorPicker = props => {
     }
 
     if (_events.default.isLeftKey(e) || _events.default.isRightKey(e)) {
-      const position = element => {
-        return target.getAttribute("value") === element.props.value;
-      };
-
       if (_events.default.isLeftKey(e)) {
-        itemIndex = navigationGrid.findIndex(position) - 1;
+        itemIndex = getElementPosition(target) - 1;
       } else {
-        itemIndex = navigationGrid.findIndex(position) + 1;
+        itemIndex = getElementPosition(target) + 1;
       }
 
       if (itemIndex < 0) {
@@ -157,11 +163,11 @@ const SimpleColorPicker = props => {
 
 
     if (itemIndex !== null) {
-      const item = gridItemRefs[itemIndex].current;
+      const item = gridItemRefs.current[itemIndex];
       item === null || item === void 0 ? void 0 : item.focus();
       item === null || item === void 0 ? void 0 : item.click();
     }
-  }, [onKeyDown, navigationGrid, gridItemRefs]);
+  }, [onKeyDown, navigationGrid, getElementPosition]);
 
   const handleClickOutside = ev => {
     if (internalRef.current && ev.target && !internalRef.current.contains(ev.target)) {
@@ -229,7 +235,7 @@ const SimpleColorPicker = props => {
   }, navigationGrid))), !validationOnLegend && /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
-};
+});
 
 exports.SimpleColorPicker = SimpleColorPicker;
 SimpleColorPicker.propTypes = {
@@ -403,5 +409,6 @@ SimpleColorPicker.propTypes = {
   "value": _propTypes.default.string,
   "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool])
 };
+SimpleColorPicker.displayName = "SimpleColorPicker";
 var _default = SimpleColorPicker;
 exports.default = _default;

package/package.json

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

package/esm/components/advanced-color-picker/advanced-color-picker.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface AdvancedColor {
-  label: string;
-  value: string;
-}
-
-export interface AdvancedColorPickerPropTypes extends MarginProps {
-  /** Prop to specify the aria-describedby property of the component */
-  "aria-describedby"?: string;
-  /** Prop to specify the aria-label of the component */
-  "aria-label"?: string;
-  /** Prop to specify the aria-labeledby property of the component */
-  "aria-labelledby"?: string;
-  /** Prop for `availableColors` containing array of objects of colors */
-  availableColors: AdvancedColor[];
-  /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
-  defaultColor: string;
-  /** Specifies the name prop to be applied to each color in the group */
-  name: string;
-  /** Prop for `onBlur` event */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Prop for `onChange` event */
-  onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** Prop for `onClose` event */
-  onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Prop for `onOpen` event */
-  onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Prop for `open` status */
-  open?: boolean;
-  /** The ARIA role to be applied to the component container */
-  role?: string;
-  /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
-  selectedColor?: string;
-}
-
-declare function AdvancedColorPicker(
-  props: AdvancedColorPickerPropTypes
-): JSX.Element;
-
-export default AdvancedColorPicker;

package/lib/components/advanced-color-picker/advanced-color-picker.d.ts

@@ -1,42 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-
-export interface AdvancedColor {
-  label: string;
-  value: string;
-}
-
-export interface AdvancedColorPickerPropTypes extends MarginProps {
-  /** Prop to specify the aria-describedby property of the component */
-  "aria-describedby"?: string;
-  /** Prop to specify the aria-label of the component */
-  "aria-label"?: string;
-  /** Prop to specify the aria-labeledby property of the component */
-  "aria-labelledby"?: string;
-  /** Prop for `availableColors` containing array of objects of colors */
-  availableColors: AdvancedColor[];
-  /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
-  defaultColor: string;
-  /** Specifies the name prop to be applied to each color in the group */
-  name: string;
-  /** Prop for `onBlur` event */
-  onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Prop for `onChange` event */
-  onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
-  /** Prop for `onClose` event */
-  onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Prop for `onOpen` event */
-  onOpen?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** Prop for `open` status */
-  open?: boolean;
-  /** The ARIA role to be applied to the component container */
-  role?: string;
-  /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
-  selectedColor?: string;
-}
-
-declare function AdvancedColorPicker(
-  props: AdvancedColorPickerPropTypes
-): JSX.Element;
-
-export default AdvancedColorPicker;