carbon-react 114.16.0 → 114.17.0

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

@@ -1,6 +1,6 @@
 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); }
 
-import React, { useCallback, useState, useRef, useMemo, useEffect } from "react";
+import React, { useCallback, useState, useRef, useMemo, useEffect, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import Events from "../../__internal__/utils/helpers/events";
@@ -12,8 +12,7 @@ import { StyledContent, StyledColorOptions } from "./simple-color-picker.style";
 import ValidationIcon from "../../__internal__/validations/validation-icon.component";
 import { InputGroupContext } from "../../__internal__/input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-
-const SimpleColorPicker = props => {
+const SimpleColorPicker = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     children,
     error,
@@ -51,7 +50,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 = useMemo(() => filteredChildren.map(child => child.ref || /*#__PURE__*/React.createRef()), [filteredChildren]);
+  const gridItemRefs = useRef([]);
   const navigationGrid = filteredChildren.map((child, index) => {
     const allowUp = currentRow !== 1;
     let allowDown = false;
@@ -81,7 +80,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,
@@ -91,6 +92,14 @@ const SimpleColorPicker = props => {
     loopCounter += 1;
     return /*#__PURE__*/React.cloneElement(child, childProps);
   });
+  useImperativeHandle(ref, () => ({
+    gridItemRefs: gridItemRefs.current
+  }), [gridItemRefs]);
+  const getElementPosition = useCallback(target => {
+    return navigationGrid.findIndex(element => {
+      return target.getAttribute("value") === element.props.value;
+    });
+  }, [navigationGrid]);
   const onKeyDownHandler = useCallback(e => {
     if (onKeyDown) {
       onKeyDown(e);
@@ -111,14 +120,10 @@ const SimpleColorPicker = props => {
     }
 
     if (Events.isLeftKey(e) || Events.isRightKey(e)) {
-      const position = element => {
-        return target.getAttribute("value") === element.props.value;
-      };
-
       if (Events.isLeftKey(e)) {
-        itemIndex = navigationGrid.findIndex(position) - 1;
+        itemIndex = getElementPosition(target) - 1;
       } else {
-        itemIndex = navigationGrid.findIndex(position) + 1;
+        itemIndex = getElementPosition(target) + 1;
       }
 
       if (itemIndex < 0) {
@@ -131,11 +136,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)) {
@@ -203,8 +208,7 @@ const SimpleColorPicker = props => {
   }, navigationGrid))), !validationOnLegend && /*#__PURE__*/React.createElement(ValidationIcon, _extends({}, validationProps, {
     tooltipFlipOverrides: ["top", "bottom"]
   }))));
-};
-
+});
 SimpleColorPicker.propTypes = {
   "children": PropTypes.node,
   "childWidth": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -377,4 +381,5 @@ SimpleColorPicker.propTypes = {
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export { SimpleColorPicker };
+SimpleColorPicker.displayName = "SimpleColorPicker";
 export default SimpleColorPicker;

package/lib/__internal__/focus-trap/focus-trap.component.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-declare type CustomRefObject<T> = {
+export declare type CustomRefObject<T> = {
     current?: T | null;
 };
 export interface FocusTrapProps {
     children: React.ReactNode;
     autoFocus?: boolean;
     /** provide a custom first element to focus */
-    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement;
+    focusFirstElement?: CustomRefObject<HTMLElement> | HTMLElement | null;
     /** a custom callback that will override the default focus trap behaviour */
     bespokeTrap?: (ev: KeyboardEvent, firstElement?: HTMLElement, lastElement?: HTMLElement) => void;
     /** optional selector to identify the focusable elements, if not provided a default selector is used */

package/lib/__internal__/focus-trap/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./focus-trap.component";
-export type { FocusTrapProps } from "./focus-trap.component";
+export type { CustomRefObject, FocusTrapProps } from "./focus-trap.component";

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

@@ -0,0 +1,4 @@
+declare const StyledAdvancedColorPickerCell: import("styled-components").StyledComponent<"button", any, {
+    type: "button";
+}, "type">;
+export default StyledAdvancedColorPickerCell;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface AdvancedColor {
+    label: string;
+    value: string;
+}
+export interface AdvancedColorPickerProps extends MarginProps {
+    /** Prop to specify the aria-describedby property of the component */
+    "aria-describedby"?: string;
+    /**
+     * Prop to specify the aria-label of the component.
+     * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
+     */
+    "aria-label"?: string;
+    /**
+     * Prop to specify the aria-labeledby property of the component
+     * To be used when the title prop is a custom React Node,
+     * or the component is labelled by an internal element other than the title.
+     */
+    "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<HTMLInputElement>) => 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 const AdvancedColorPicker: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, availableColors, defaultColor, name, onOpen, onClose, onChange, onBlur, open, role, selectedColor, ...props }: AdvancedColorPickerProps) => JSX.Element;
+export default AdvancedColorPicker;

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

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
-
 var _advancedColorPicker = require("./advanced-color-picker.style");
 
 var _simpleColorPicker = require("../simple-color-picker");
@@ -27,31 +25,26 @@ 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  availableColors,
+  defaultColor,
   name,
-  open,
   onOpen,
   onClose,
   onChange,
   onBlur,
-  availableColors,
-  defaultColor,
-  selectedColor,
+  open = false,
   role,
+  selectedColor,
   ...props
 }) => {
-  const isOpen = open || false;
   const [dialogOpen, setDialogOpen] = (0, _react.useState)();
   const currentColor = selectedColor || defaultColor;
-  const [selectedColorRef, setSelectedColorRef] = (0, _react.useState)();
-  const gridItemRefs = (0, _react.useRef)(Array.from({
-    length: availableColors.length
-  }, () => /*#__PURE__*/_react.default.createRef()));
+  const [selectedColorRef, setSelectedColorRef] = (0, _react.useState)(null);
+  const simpleColorPickerData = (0, _react.useRef)(null);
   const colors = availableColors.map(({
     value,
     label
@@ -59,21 +52,28 @@ const AdvancedColorPicker = ({
     return {
       value,
       label,
-      ref: gridItemRefs.current[index]
+      getRef: () =>
+      /* Fallback to null to satisfy the TypeScript compiler */
+
+      /* istanbul ignore next */
+      simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
   (0, _react.useEffect)(() => {
-    if (dialogOpen || isOpen) {
-      const selected = colors.find(c => currentColor === c.value);
-      setSelectedColorRef(selected.ref.current);
+    if (dialogOpen || open) {
+      const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
+      /* istanbul ignore else */
+
+      if (newColor) {
+        setSelectedColorRef(newColor.getRef());
+      }
     }
-  }, [colors, currentColor, dialogOpen, isOpen]);
+  }, [colors, currentColor, dialogOpen, open]);
   const handleFocus = (0, _react.useCallback)((e, firstFocusableElement) => {
+    /* istanbul ignore else */
     if (e.key === "Tab") {
-      /* istanbul ignore else */
       if (e.shiftKey) {
-        /* istanbul ignore else */
-        if (document.activeElement === firstFocusableElement) {
+        if (document.activeElement === firstFocusableElement && selectedColorRef) {
           selectedColorRef.focus();
           e.preventDefault();
         }
@@ -98,8 +98,14 @@ const AdvancedColorPicker = ({
     }
   }, [onClose]);
   const handleOnChange = (0, _react.useCallback)(e => {
-    const selected = colors.find(c => e.target.value === c.value);
-    setSelectedColorRef(selected.ref.current);
+    const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => e.target.value === c.value);
+    /* istanbul ignore else */
+
+    if (newColor) {
+      setSelectedColorRef(newColor.getRef());
+    }
+    /* istanbul ignore else */
+
 
     if (onChange) {
       onChange(e);
@@ -129,12 +135,12 @@ const AdvancedColorPicker = ({
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
-    tabIndex: "0"
+    tabIndex: 0
   }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
-    open: dialogOpen || isOpen,
+    open: dialogOpen || open,
     size: "auto",
     onCancel: handleOnClose,
     bespokeFocusTrap: handleFocus,
@@ -148,70 +154,191 @@ const AdvancedColorPicker = ({
     legend: "",
     onChange: handleOnChange,
     onBlur: handleOnBlur,
-    onKeyDown: handleColorOnKeyDown
-  }, colors.map(({
+    onKeyDown: handleColorOnKeyDown,
+    ref: simpleColorPickerData
+  }, colors === null || colors === void 0 ? void 0 : colors.map(({
     value,
-    label,
-    ref
+    label
   }) => /*#__PURE__*/_react.default.createElement(_simpleColorPicker.SimpleColor, {
     value: value,
     key: value,
     "aria-label": label,
     id: value,
-    defaultChecked: value === currentColor,
-    ref: ref
+    defaultChecked: value === currentColor
   })))));
 };
 
 AdvancedColorPicker.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-label of the component.
-   * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
-   */
   "aria-label": _propTypes.default.string,
-
-  /**
-   * Prop to specify the aria-labeledby property of the component
-   * To be used when the title prop is a custom React Node,
-   * or the component is labelled by an internal element other than the title.
-   */
   "aria-labelledby": _propTypes.default.string,
-
-  /** Specifies the name prop to be applied to each color in the group */
-  name: _propTypes.default.string.isRequired,
-
-  /** Prop for `availableColors` containing array of objects of colors */
-  availableColors: _propTypes.default.array.isRequired,
-
-  /** Prop for `defaultColor` containing the default color for `uncontrolled` use */
-  defaultColor: _propTypes.default.string.isRequired,
-
-  /** Prop for `selectedColor` containing pre-selected color for `controlled` use */
-  selectedColor: _propTypes.default.string,
-
-  /** Prop for `onChange` event */
-  onChange: _propTypes.default.func,
-
-  /** Prop for `onOpen` event */
-  onOpen: _propTypes.default.func,
-
-  /** Prop for `onClose` event */
-  onClose: _propTypes.default.func,
-
-  /** Prop for `open` status */
-  open: _propTypes.default.bool,
-
-  /** Prop for `onBlur` event */
-  onBlur: _propTypes.default.func,
-
-  /** The ARIA role to be applied to the container */
-  role: _propTypes.default.string
+  "availableColors": _propTypes.default.arrayOf(_propTypes.default.shape({
+    "label": _propTypes.default.string.isRequired,
+    "value": _propTypes.default.string.isRequired
+  })).isRequired,
+  "defaultColor": _propTypes.default.string.isRequired,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string.isRequired,
+  "onBlur": _propTypes.default.func,
+  "onChange": _propTypes.default.func,
+  "onClose": _propTypes.default.func,
+  "onOpen": _propTypes.default.func,
+  "open": _propTypes.default.bool,
+  "role": _propTypes.default.string,
+  "selectedColor": _propTypes.default.string
 };
 var _default = AdvancedColorPicker;
 exports.default = _default;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
+declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
+export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

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

@@ -1 +1,2 @@
-export { default } from "./advanced-color-picker";
+export { default } from "./advanced-color-picker.component";
+export type { AdvancedColorPickerProps } from "./advanced-color-picker.component";

package/lib/components/alert/alert.component.js

@@ -57,15 +57,21 @@ Alert.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/confirm/confirm.component.js

@@ -165,15 +165,21 @@ Confirm.propTypes = {
   "disableCancel": _propTypes.default.bool,
   "disableConfirm": _propTypes.default.bool,
   "disableEscKey": _propTypes.default.bool,
-  "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,
   "iconType": _propTypes.default.oneOf(["error", "warning"]),
   "isLoadingConfirm": _propTypes.default.bool,

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,