carbon-react 114.18.2 → 115.0.0

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -29,7 +29,7 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     reverse?: boolean;
     /** Size of the component */
     size?: "small" | "large";
-    /** The id of the element that labels the input */
+    /** Prop to specify the aria-labelledby attribute of the input */
     ariaLabelledBy?: string;
     /** When true, displays validation icon on label */
     validationOnLabel?: boolean;

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -9,7 +9,7 @@ import HiddenCheckableInput from "./hidden-checkable-input.component";
 import guid from "../utils/helpers/guid";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 const CheckableInput = /*#__PURE__*/React.forwardRef(({
-  ariaLabelledBy: externalAriaLabelledBy,
+  ariaLabelledBy,
   autoFocus,
   checked,
   children,
@@ -45,8 +45,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     labelId,
     fieldHelpId,
     validationIconId,
-    ariaDescribedBy,
-    ariaLabelledBy
+    ariaDescribedBy
   } = useInputAccessibility({
     id,
     error,
@@ -82,7 +81,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   };
   const inputProps = {
     "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": externalAriaLabelledBy || ariaLabelledBy,
+    "aria-labelledby": ariaLabelledBy,
     "aria-invalid": !!error,
     autoFocus,
     checked,

package/esm/__internal__/checkable-input/hidden-checkable-input.component.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface CommonHiddenCheckableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "type"> {
+    /** Prop to specify the aria-labelledby attribute of the input */
+    ariaLabelledBy?: string;
     /** If true the Component will be focused when page load */
     autoFocus?: boolean;
     /** Checked state of the input */

package/esm/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import HiddenCheckableInputStyle from "./hidden-checkable-input.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
+  ariaLabelledBy,
   name,
   checked,
   type,
@@ -18,8 +19,7 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
     onBlur,
     onFocus,
     onMouseEnter,
-    onMouseLeave,
-    ariaLabelledBy
+    onMouseLeave
   } = useContext(InputContext);
   const {
     onBlur: onBlurGroup,
@@ -53,6 +53,7 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
   };
 
   return /*#__PURE__*/React.createElement(HiddenCheckableInputStyle, _extends({
+    "aria-labelledby": ariaLabelledBy,
     autoFocus: autoFocus,
     "aria-checked": checked,
     checked: checked,
@@ -60,9 +61,7 @@ const HiddenCheckableInput = /*#__PURE__*/React.forwardRef(({
     role: role || type,
     type: type,
     value: value
-  }, props, ariaLabelledBy && {
-    "aria-labelledby": ariaLabelledBy
-  }, {
+  }, props, {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onMouseEnter: handleMouseEnter,
@@ -124,6 +123,7 @@ HiddenCheckableInput.propTypes = {
   "aria-valuemin": PropTypes.number,
   "aria-valuenow": PropTypes.number,
   "aria-valuetext": PropTypes.string,
+  "ariaLabelledBy": PropTypes.string,
   "autoCapitalize": PropTypes.string,
   "autoComplete": PropTypes.string,
   "autoCorrect": PropTypes.string,

package/esm/__internal__/input/input.component.js

@@ -29,6 +29,7 @@ function selectTextOnFocus(input) {
 
 const Input = /*#__PURE__*/React.forwardRef(({
   align,
+  "aria-labelledby": ariaLabelledBy,
   placeholder,
   disabled,
   readOnly,
@@ -145,7 +146,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
   };
 
   return /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
-    "aria-labelledby": context.ariaLabelledBy,
+    "aria-labelledby": ariaLabelledBy,
     align: align,
     placeholder: placeholder,
     disabled: disabled,

package/esm/__internal__/input-behaviour/input-behaviour.component.js

@@ -1,6 +1,5 @@
-import React, { useContext } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { InlineInputsContext } from "../../components/inline-inputs";
 import useInputBehaviour from "./useInputBehaviour";
 const InputContext = /*#__PURE__*/React.createContext({});
 
@@ -8,12 +7,8 @@ const InputBehaviour = ({
   children
 }) => {
   const contextValue = useInputBehaviour();
-  const {
-    ariaLabelledBy
-  } = useContext(InlineInputsContext);
   return /*#__PURE__*/React.createElement(InputContext.Provider, {
-    value: { ...contextValue,
-      ariaLabelledBy
+    value: { ...contextValue
     }
   }, children);
 };

package/esm/__internal__/input-behaviour/useInputBehaviour.d.ts

@@ -9,7 +9,6 @@ export interface InputContextProps {
     inputRef?: (input: {
         current: HTMLInputElement | HTMLTextAreaElement | null;
     }) => void;
-    ariaLabelledBy?: string;
 }
 declare const useInputBehaviour: (blockGroupBehaviour?: boolean | undefined) => InputContextProps;
 export default useInputBehaviour;

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

@@ -4,6 +4,8 @@ import { CommonCheckableInputProps } from "../../__internal__/checkable-input/ch
 export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
     /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
     adaptiveSpacingBreakpoint?: number;
+    /** Prop to specify the aria-labelledby property of the input */
+    "aria-labelledby"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */

package/esm/components/checkbox/checkbox.component.js

@@ -12,6 +12,7 @@ import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef(({
+  "aria-labelledby": ariaLabelledBy,
   id,
   label,
   onChange,
@@ -61,6 +62,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   }
 
   const inputProps = {
+    ariaLabelledBy,
     onClick,
     onChange,
     onBlur,

package/esm/components/draggable/draggable-container.component.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface DraggableContainerProps extends MarginProps {
+    /** Callback fired when order is changed */
+    getOrder?: (draggableItemIds?: (string | number | undefined)[], movedItemId?: string | number | undefined) => void;
+    /**
+     * The content of the component
+     *
+     * `<DraggableItem />` is required to make `Draggable` works
+     */
+    children?: React.ReactNode;
+}
+declare const DraggableContainer: {
+    ({ children, getOrder, ...rest }: DraggableContainerProps): JSX.Element;
+    displayName: string;
+};
+export default DraggableContainer;

package/esm/components/draggable/draggable-container.component.js

@@ -1,32 +1,13 @@
 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, { useEffect, useState, useRef } from "react";
-import { DndProvider, useDrop } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import React, { useEffect, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import DraggableItem from "./draggable-item.component";
-import { StyledIcon, StyledDraggableContainer } from "./draggable-item.style";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes);
-
-const DropTarget = ({
-  children,
-  getOrder,
-  ...rest
-}) => {
-  const [, drop] = useDrop({
-    accept: "draggableItem",
-
-    drop(item) {
-      getOrder(item === null || item === void 0 ? void 0 : item.id);
-    }
-
-  });
-  return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
-    ref: drop
-  }, rest), children);
-};
+import DropTarget from "./internal/drop-target.component";
 
 const DraggableContainer = ({
   children,
@@ -34,6 +15,9 @@ const DraggableContainer = ({
   ...rest
 }) => {
   const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
+  const hasProperChildren = useMemo(() => React.Children.toArray(children).every(child => /*#__PURE__*/React.isValidElement(child) && child.type.displayName === DraggableItem.displayName), [children]); // `<DraggableItem />` is required to make `Draggable` work
+
+  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `\`${DraggableContainer.displayName}\` only accepts children of type \`${DraggableItem.displayName}\`.`) : invariant(false) : void 0;
   const isFirstRender = useRef(true);
   useEffect(() => {
     if (!isFirstRender.current) {
@@ -45,7 +29,7 @@ const DraggableContainer = ({
 
   const findItem = id => {
     const draggableItem = draggableItems.filter(item => {
-      return `${item.props.id}` === id;
+      return /*#__PURE__*/React.isValidElement(item) && `${item.props.id}` === id;
     })[0];
     return {
       draggableItem,
@@ -79,43 +63,172 @@ const DraggableContainer = ({
     backend: HTML5Backend
   }, /*#__PURE__*/React.createElement(DropTarget, _extends({
     getOrder: getItemsId
-  }, marginProps), draggableItems.map(item => /*#__PURE__*/React.cloneElement(item, {
-    id: `${item.props.id}`,
-    findItem,
-    moveItem
-  }, [item.props.children, /*#__PURE__*/React.createElement(StyledIcon, {
-    key: item.props.id,
-    type: "drag"
-  })]))));
+  }, marginProps), draggableItems.map(item => {
+    return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
+      id: `${item.props.id}`,
+      findItem,
+      moveItem
+    }, [item.props.children]);
+  })));
 };
 
-DraggableContainer.propTypes = { ...marginPropTypes,
-
-  /** Callback fired when order is changed */
-  getOrder: PropTypes.func,
-
-  /**
-   * The content of the component
-   *
-   *  `<DraggableItem />` is required to make `Draggable` works
-   * */
-  children: (props, propName, componentName) => {
-    const prop = props[propName];
-    let error;
-    React.Children.forEach(prop, child => {
-      if (!child) {
-        return;
-      }
-
-      if (DraggableItem.displayName !== child.type.displayName) {
-        error = new Error(`\`${componentName}\` only accepts children of type \`${DraggableItem.displayName}\`.`);
-      }
-    });
-    return error;
-  }
-};
-DropTarget.propTypes = { ...marginPropTypes,
-  children: PropTypes.node.isRequired,
-  getOrder: PropTypes.func
+DraggableContainer.propTypes = {
+  "children": PropTypes.node,
+  "getOrder": PropTypes.func,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])
 };
+DraggableContainer.displayName = "DraggableContainer";
 export default DraggableContainer;

package/esm/components/draggable/draggable-item.component.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { PaddingProps } from "styled-system";
+export interface DraggableItemProps extends PaddingProps {
+    /**
+     * The id of the `DraggableItem`.
+     *
+     * Use this prop to make `Draggable` work
+     */
+    id: number | string;
+    /** The content of the component. */
+    children: React.ReactNode;
+    /**
+     * @private
+     * @ignore
+     */
+    findItem?: (id: string | number) => {
+        DraggableItemProps: React.ReactElement;
+        index: number;
+    };
+    /**
+     * @private
+     * @ignore
+     */
+    moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+}
+declare const DraggableItem: {
+    ({ id, findItem, moveItem, children, py, ...rest }: DraggableItemProps): JSX.Element;
+    displayName: string;
+};
+export default DraggableItem;