carbon-react 114.15.0 → 114.17.0

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,

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/heading/heading.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
+export declare type HeadingType = "h1" | "h2" | "h3" | "h4" | "h5";
 export interface HeadingProps extends MarginProps, TagProps {
     /** Child elements */
     children?: React.ReactNode;
@@ -12,6 +13,8 @@ export interface HeadingProps extends MarginProps, TagProps {
     subheader?: React.ReactNode;
     /** Defines the subtitle id for the heading. */
     subtitleId?: string;
+    /** Defines the HTML heading element of the title. */
+    headingType?: HeadingType;
     /** Defines the help text for the heading. */
     help?: string;
     /** Defines the help link for the heading. */
@@ -27,5 +30,5 @@ export interface HeadingProps extends MarginProps, TagProps {
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
 }
-export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
+export declare const Heading: ({ children, backLink, divider, help, helpAriaLabel, helpLink, pills, separator, subheader, subtitleId, headingType, title, titleId, ...rest }: HeadingProps) => JSX.Element | null;
 export default Heading;

package/lib/components/heading/heading.component.js

@@ -32,6 +32,7 @@ const Heading = ({
   separator = false,
   subheader,
   subtitleId,
+  headingType = "h1",
   title,
   titleId,
   ...rest
@@ -90,7 +91,7 @@ const Heading = ({
     hasBackLink: !!backLink
   }, backLink && getBackButton(), /*#__PURE__*/_react.default.createElement(_heading.StyledHeaderContent, null, /*#__PURE__*/_react.default.createElement(_heading.StyledHeadingTitle, {
     withMargin: !!pills || !!help,
-    variant: "h1",
+    variant: headingType,
     "data-element": "title",
     id: titleId
   }, title), (help || helpLink) && getHelp(), pills && getPills()), separator && /*#__PURE__*/_react.default.createElement(_heading.StyledSeparator, null), subheader && getSubheader()), divider && /*#__PURE__*/_react.default.createElement(_heading.StyledDivider, {
@@ -106,6 +107,7 @@ Heading.propTypes = {
   "data-element": _propTypes.default.string,
   "data-role": _propTypes.default.string,
   "divider": _propTypes.default.bool,
+  "headingType": _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5"]),
   "help": _propTypes.default.string,
   "helpAriaLabel": _propTypes.default.string,
   "helpLink": _propTypes.default.string,

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

@@ -1,2 +1,2 @@
 export { default } from "./heading.component";
-export type { HeadingProps } from "./heading.component";
+export type { HeadingProps, HeadingType } from "./heading.component";

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/settings-row/settings-row.component.js

@@ -27,6 +27,7 @@ const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.de
 
 const SettingsRow = ({
   title,
+  headingType = "h3",
   description,
   children,
   className,
@@ -36,6 +37,7 @@ const SettingsRow = ({
   const heading = () => {
     if (!title) return null;
     return /*#__PURE__*/_react.default.createElement(_heading.default, {
+      headingType: headingType,
       title: title,
       subheader: description,
       separator: description !== undefined,
@@ -62,6 +64,9 @@ SettingsRow.propTypes = { ...marginPropTypes,
   /**  A title for this group of settings. */
   title: _propTypes.default.string,
 
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType: _propTypes.default.oneOf(["h1", "h2", "h3", "h4", "h5"]),
+
   /**  A string or JSX object that provides a short description about the group of settings. */
   description: _propTypes.default.node,
 

package/lib/components/settings-row/settings-row.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
+import { HeadingType } from "../heading";
 
 export interface SettingsRowProps {
   /**  The CSS classes to apply to the component. */
   className?: string;
   /**  A title for this group of settings. */
   title?: string;
+  /** Defines the HTML heading element of the `title` within the component. */
+  headingType?: HeadingType;
   /**  A string or JSX object that provides a short description about the group of settings. */
   description?: React.ReactNode;
   /** Shows a divider below the component. */

package/lib/components/settings-row/settings-row.style.js

@@ -41,15 +41,6 @@ const StyledSettingsRow = _styledComponents.default.div`
     margin-bottom: 0;
   }
 
-  ${_heading.StyledHeadingTitle} {
-    color: var(--colorsUtilityYin090);
-    font-size: 15px;
-    font-weight: bold;
-    line-height: 18px;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-  }
-
   ${_heading.StyledSeparator} {
     margin-bottom: 17px;
   }

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.15.0",
+  "version": "114.17.0",
   "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;