carbon-react 114.18.2 → 115.0.0

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

@@ -1,12 +1,10 @@
 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 from "react";
-import { useDrop, useDrag } from "react-dnd";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
+import { useDrop, useDrag } from "react-dnd";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
-import { StyledDraggableItem } from "./draggable-item.style";
-const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes);
+import { StyledDraggableItem, StyledIcon } from "./draggable-item.style";
 
 const DraggableItem = ({
   id,
@@ -16,7 +14,14 @@ const DraggableItem = ({
   py = 1,
   ...rest
 }) => {
-  const originalIndex = findItem(id).index;
+  let originalIndex; // istanbul ignore else
+
+  if (findItem) {
+    var _findItem;
+
+    originalIndex = (_findItem = findItem(id)) === null || _findItem === void 0 ? void 0 : _findItem.index;
+  }
+
   const [{
     isDragging
   }, drag] = useDrag({
@@ -35,7 +40,7 @@ const DraggableItem = ({
       } = monitor.getItem();
       const didDrop = monitor.didDrop();
 
-      if (!didDrop) {
+      if (!didDrop && moveItem) {
         moveItem(droppedId, oIndex);
       }
     }
@@ -44,14 +49,15 @@ const DraggableItem = ({
     accept: "draggableItem",
     canDrop: () => false,
 
-    hover({
-      id: draggedId
-    }) {
-      if (draggedId !== id) {
+    hover(item) {
+      if ((item === null || item === void 0 ? void 0 : item.id) !== id && findItem) {
         const {
           index: overIndex
-        } = findItem(id);
-        moveItem(draggedId, overIndex);
+        } = findItem(id); // istanbul ignore else
+
+        if (moveItem) {
+          moveItem(item === null || item === void 0 ? void 0 : item.id, overIndex);
+        }
       }
     }
 
@@ -62,32 +68,170 @@ const DraggableItem = ({
     isDragging: isDragging,
     ref: node => drag(drop(node)),
     py: py
-  }, paddingProps), children);
+  }, paddingProps), children, /*#__PURE__*/React.createElement(StyledIcon, {
+    type: "drag"
+  }));
 };
 
-DraggableItem.propTypes = { ...paddingPropTypes,
-
-  /**
-   * The id of the `DraggableItem`.
-   *
-   * Use this prop to make `Draggable` works
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /** The content of the component. */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * @private
-   * @ignore
-   */
-  findItem: PropTypes.func,
-
-  /**
-   * @private
-   * @ignore
-   */
-  moveItem: PropTypes.func
+DraggableItem.propTypes = {
+  "children": PropTypes.node,
+  "findItem": PropTypes.func,
+  "id": PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  "moveItem": PropTypes.func,
+  "p": 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]),
+  "padding": 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]),
+  "paddingBottom": 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]),
+  "paddingLeft": 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]),
+  "paddingRight": 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]),
+  "paddingTop": 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]),
+  "paddingX": 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]),
+  "paddingY": 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]),
+  "pb": 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]),
+  "pl": 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]),
+  "pr": 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]),
+  "pt": 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]),
+  "px": 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]),
+  "py": 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])
 };
 DraggableItem.displayName = "DraggableItem";
 export default DraggableItem;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PaddingProps } from "styled-system";
+declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledDraggableItemProps extends PaddingProps {
+    isDragging?: boolean;
+}
+declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
+declare const StyledIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../icon").IconProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export { StyledDraggableContainer, StyledDraggableItem, StyledIcon };

package/esm/components/draggable/index.d.ts

@@ -1,2 +1,4 @@
-export { default as DraggableContainer } from "./draggable-container";
-export { default as DraggableItem } from "./draggable-item";
+export { default as DraggableContainer } from "./draggable-container.component";
+export type { DraggableContainerProps } from "./draggable-container.component";
+export { default as DraggableItem } from "./draggable-item.component";
+export type { DraggableItemProps } from "./draggable-item.component";

package/esm/components/draggable/internal/drop-target.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { DraggableContainerProps } from "../draggable-container.component";
+interface DropTargetProps extends Omit<DraggableContainerProps, "getOrder"> {
+    children?: React.ReactNode;
+    getOrder: (movedItemId?: string | number | undefined) => void;
+}
+declare const DropTarget: ({ children, getOrder, ...rest }: DropTargetProps) => JSX.Element;
+export default DropTarget;

package/esm/components/draggable/internal/drop-target.component.js

@@ -0,0 +1,187 @@
+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 from "react";
+import PropTypes from "prop-types";
+import { useDrop } from "react-dnd";
+import { StyledDraggableContainer } from "../draggable-item.style";
+
+const DropTarget = ({
+  children,
+  getOrder,
+  ...rest
+}) => {
+  const [, drop] = useDrop({
+    accept: "draggableItem",
+
+    drop(item) {
+      // istanbul ignore else
+      if (getOrder) {
+        getOrder(item === null || item === void 0 ? void 0 : item.id);
+      }
+    }
+
+  });
+  return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
+    ref: drop
+  }, rest), children);
+};
+
+DropTarget.propTypes = {
+  "children": PropTypes.node,
+  "getOrder": PropTypes.func.isRequired,
+  "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])
+};
+export default DropTarget;

package/esm/components/grouped-character/grouped-character.component.js

@@ -249,7 +249,6 @@ GroupedCharacter.propTypes = {
   "label": PropTypes.string,
   "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
-  "labelId": PropTypes.string,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),
   "labelWidth": PropTypes.number,

package/esm/components/inline-inputs/index.d.ts

@@ -1,2 +1,2 @@
-export { default, InlineInputsContext } from "./inline-inputs.component";
+export { default } from "./inline-inputs.component";
 export type { InlineInputsProps } from "./inline-inputs.component";

package/esm/components/inline-inputs/index.js

@@ -1 +1 @@
-export { default, InlineInputsContext } from "./inline-inputs.component";
+export { default } from "./inline-inputs.component";

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
-interface InlineInputsContextProps {
-    ariaLabelledBy?: string;
-}
 export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps {
     /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
@@ -15,12 +12,16 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     htmlFor?: string;
     /** Defines the label text for the heading. */
     label?: string;
+    /**
+     * Custom label id, could be used in combination with aria-labelledby prop of each input,
+     * to make them accesible for screen readers.
+     */
+    labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
 }
-export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -1,31 +1,26 @@
 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, { useRef } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
-import createGuid from "../../__internal__/utils/helpers/guid";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-export const InlineInputsContext = /*#__PURE__*/React.createContext({});
 
-const columnWrapper = (children, gutter, labelId) => {
+const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
-    return /*#__PURE__*/React.createElement(InlineInputsContext.Provider, {
-      value: {
-        ariaLabelledBy: labelId
-      }
-    }, /*#__PURE__*/React.createElement(StyledInlineInput, {
+    return /*#__PURE__*/React.createElement(StyledInlineInput, {
       gutter: gutter,
       "data-element": "inline-input"
-    }, input));
+    }, input);
   });
 };
 
 const InlineInputs = ({
   adaptiveLabelBreakpoint,
   label,
+  labelId,
   htmlFor,
   children = null,
   className = "",
@@ -36,7 +31,6 @@ const InlineInputs = ({
   required,
   ...rest
 }) => {
-  const labelId = useRef(createGuid());
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
 
@@ -47,7 +41,7 @@ const InlineInputs = ({
   function renderLabel() {
     if (!label) return null;
     return /*#__PURE__*/React.createElement(Label, {
-      labelId: labelId.current,
+      labelId: labelId,
       inline: inlineLabel,
       htmlFor: htmlFor,
       isRequired: required
@@ -67,7 +61,7 @@ const InlineInputs = ({
     inputWidth: inputWidth
   }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, columnWrapper(children, gutter, label ? labelId.current : undefined))));
+  }, columnWrapper(children, gutter))));
 };
 
 InlineInputs.propTypes = {
@@ -78,6 +72,7 @@ InlineInputs.propTypes = {
   "htmlFor": PropTypes.string,
   "inputWidth": PropTypes.number,
   "label": PropTypes.string,
+  "labelId": PropTypes.string,
   "labelInline": PropTypes.bool,
   "labelWidth": PropTypes.number,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/number/number.component.js

@@ -173,7 +173,6 @@ Number.propTypes = {
   "label": PropTypes.string,
   "labelAlign": PropTypes.oneOf(["left", "right"]),
   "labelHelp": PropTypes.node,
-  "labelId": PropTypes.string,
   "labelInline": PropTypes.bool,
   "labelSpacing": PropTypes.oneOf([1, 2]),
   "labelWidth": PropTypes.number,

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -14,6 +14,7 @@ import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
+import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
@@ -55,7 +56,6 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
   const selectListId = useRef(guid());
-  const labelId = useRef(label ? guid() : undefined);
   const containerRef = useRef();
   const listboxRef = useRef();
   const isControlled = useRef(value !== undefined);
@@ -68,6 +68,13 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
+  const inputId = useRef(id || guid());
+  const {
+    labelId
+  } = useInputAccessibility({
+    id: inputId.current,
+    label
+  });
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -389,7 +396,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
 
   function getTextboxProps() {
     return {
-      id,
+      id: inputId.current,
       name,
       label,
       disabled,
@@ -414,7 +421,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
-    labelId: label ? labelId.current : undefined,
+    labelId: labelId,
     anchorElement: textboxRef && textboxRef.parentElement,
     onSelect: onSelectOption,
     onSelectListClose: onSelectListClose,
@@ -451,7 +458,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     activeDescendantId: activeDescendantId,
-    labelId: label ? labelId.current : undefined,
+    labelId: labelId,
     "aria-controls": selectListId.current,
     isOpen: isOpen,
     hasTextCursor: true,