carbon-react 114.9.1 → 114.10.0

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

@@ -18,8 +18,8 @@ const DropTarget = ({
   const [, drop] = useDrop({
     accept: "draggableItem",
 
-    drop() {
-      getOrder();
+    drop(item) {
+      getOrder(item === null || item === void 0 ? void 0 : item.id);
     }
 
   });
@@ -65,13 +65,13 @@ const DraggableContainer = ({
     setDraggableItems(copyOfDraggableItems);
   };
 
-  const getItemsId = () => {
+  const getItemsId = item => {
     if (!getOrder) {
       return;
     }
 
     const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
-    getOrder(draggableItemIds);
+    getOrder(draggableItemIds, item);
   };
 
   const marginProps = filterStyledSystemMarginProps(rest);

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

@@ -9,7 +9,10 @@ type DraggableContainerChild =
 
 export interface DraggableContainerProps {
   /** Callback fired when order is changed */
-  getOrder?: (draggableItemIds: number[]) => void;
+  getOrder?: (
+    draggableItemIds: (number | string)[],
+    movedItemId: string | number
+  ) => void;
   /**
    * The content of the component
    *

package/esm/components/duelling-picklist/duelling-picklist.component.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface DuellingPicklistProps extends MarginProps {
+    /**
+     * Content of the component, should contain two Picklist children
+     * and a PicklistDivider
+     */
+    children?: React.ReactNode;
+    /** Indicate if component is disabled */
+    disabled?: boolean;
+    /** Place for components like Search or Filter placed above the left list */
+    leftControls?: React.ReactNode;
+    /** Left list label */
+    leftLabel?: string;
+    /** Place for components like Search or Filter placed above the right list */
+    rightControls?: React.ReactNode;
+    /** Right list label */
+    rightLabel?: string;
+}
+export declare const DuellingPicklist: ({ children, disabled, leftControls, rightControls, leftLabel, rightLabel, ...rest }: DuellingPicklistProps) => JSX.Element;
+export default DuellingPicklist;

package/esm/components/duelling-picklist/duelling-picklist.component.js

@@ -2,12 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledDuellingPicklistOverlay, StyledDuellingPicklist, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl } from "./duelling-picklist.style";
 import { Picklist } from "./picklist/picklist.component";
 import FocusContext from "./duelling-picklist.context";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const DuellingPicklist = ({
   children,
@@ -37,9 +35,15 @@ const DuellingPicklist = ({
     return index;
   };
 
-  const clonedChildren = React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
-    index: child.type === Picklist ? getIndex() : undefined
-  }));
+  const clonedChildren = React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child) && child.type === Picklist) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        index: getIndex()
+      });
+    }
+
+    return child;
+  });
   return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
     disabled: disabled,
     "data-component": "duelling-picklist"
@@ -59,36 +63,167 @@ const DuellingPicklist = ({
   }, /*#__PURE__*/React.createElement(StyledDuellingPicklist, null, clonedChildren)));
 };
 
-DuellingPicklist.propTypes = { ...marginPropTypes,
-
-  /**
-   * Content of the component, should contain two Picklist children
-   * and a PicklistDivider
-   */
-  children: (props, propName) => {
-    const prop = props[propName];
-    let error;
-
-    if (!prop || !Array.isArray(prop) || prop.filter(el => el.type === Picklist).length !== 2) {
-      error = new Error(`\`${propName}\` must have two \`${Picklist.displayName}\`s`);
-    }
-
-    return error;
-  },
-
-  /** Indicate if component is disabled */
-  disabled: PropTypes.bool,
-
-  /** Place for components like Search or Filter placed above the left list */
-  leftControls: PropTypes.node,
-
-  /** Place for components like Search or Filter placed above the right list */
-  rightControls: PropTypes.node,
-
-  /** Left list label */
-  leftLabel: PropTypes.string,
-
-  /** Right list label */
-  rightLabel: PropTypes.string
+DuellingPicklist.propTypes = {
+  "children": PropTypes.node,
+  "disabled": PropTypes.bool,
+  "leftControls": PropTypes.node,
+  "leftLabel": PropTypes.string,
+  "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]),
+  "rightControls": PropTypes.node,
+  "rightLabel": PropTypes.string
 };
+export { DuellingPicklist };
 export default DuellingPicklist;

package/esm/components/duelling-picklist/duelling-picklist.context.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+export declare type FocusContextType = {
+    setElementToFocus: (itemIndex?: number, listIndex?: number, groupIndex?: number) => void;
+    elementToFocus: {
+        itemIndex?: number;
+        listIndex?: number;
+        groupIndex?: number;
+    };
+};
+declare const FocusContext: React.Context<FocusContextType>;
+export default FocusContext;

package/esm/components/duelling-picklist/duelling-picklist.context.js

@@ -1,3 +1,8 @@
 import React from "react";
-const FocusContext = /*#__PURE__*/React.createContext({});
+const FocusContext = /*#__PURE__*/React.createContext({
+  setElementToFocus:
+  /* istanbul ignore next */
+  () => {},
+  elementToFocus: {}
+});
 export default FocusContext;

package/esm/components/duelling-picklist/duelling-picklist.style.d.ts

@@ -0,0 +1,10 @@
+declare const StyledDuellingPicklistOverlay: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+declare const StyledDuellingPicklist: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledLabel: import("styled-components").StyledComponent<"p", any, {}, never>;
+declare const StyledControlsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const StyledPicklistPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledDuellingPicklist, StyledDuellingPicklistOverlay, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl, StyledPicklistPlaceholder, };

package/esm/components/duelling-picklist/index.d.ts

@@ -1,6 +1,12 @@
-export { default as DuellingPicklist } from "./duelling-picklist";
-export { default as PicklistDivider } from "./picklist-divider/picklist-divider";
-export { default as PicklistItem } from "./picklist-item/picklist-item";
-export { default as Picklist } from "./picklist/picklist";
-export { default as PicklistPlaceholder } from "./picklist-placeholder/picklist-placeholder";
-export { default as PicklistGroup } from "./picklist-group/picklist-group";
+export { default as DuellingPicklist } from "./duelling-picklist.component";
+export type { DuellingPicklistProps } from "./duelling-picklist.component";
+export { default as PicklistDivider } from "./picklist-divider/picklist-divider.component";
+export type { PicklistDividerProps } from "./picklist-divider/picklist-divider.component";
+export { default as PicklistItem } from "./picklist-item/picklist-item.component";
+export type { PicklistItemProps } from "./picklist-item/picklist-item.component";
+export { default as Picklist } from "./picklist/picklist.component";
+export type { PicklistProps } from "./picklist/picklist.component";
+export { default as PicklistPlaceholder } from "./picklist-placeholder/picklist-placeholder.component";
+export type { PicklistPlaceholderProps } from "./picklist-placeholder/picklist-placeholder.component";
+export { default as PicklistGroup } from "./picklist-group/picklist-group.component";
+export type { PicklistGroupProps } from "./picklist-group/picklist-group.component";

package/esm/components/duelling-picklist/picklist/picklist.component.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface PicklistProps {
+    /** List of PicklistItem elements */
+    children?: React.ReactNode;
+    /** Placeholder to be rendered when list is empty */
+    placeholder?: React.ReactNode;
+    /** Indicate if component is disabled */
+    disabled?: boolean;
+    /** @private @ignore */
+    index?: number;
+}
+export declare const Picklist: {
+    ({ disabled, children, placeholder, index, }: PicklistProps): JSX.Element;
+    displayName: string;
+};
+export default Picklist;

package/esm/components/duelling-picklist/picklist/picklist.component.js

@@ -5,7 +5,8 @@ import { StyledPicklist, StyledEmptyContainer } from "./picklist.style";
 import FocusContext from "../duelling-picklist.context";
 import Events from "../../../__internal__/utils/helpers/events";
 import PicklistGroup from "../picklist-group/picklist-group.component";
-export const Picklist = ({
+
+const Picklist = ({
   disabled,
   children,
   placeholder,
@@ -21,8 +22,10 @@ export const Picklist = ({
     length: filteredChildren.length
   }, () => /*#__PURE__*/React.createRef()), [filteredChildren.length]);
   const focusItem = useCallback((ev, itemIndex) => {
+    var _refs$itemIndex$curre;
+
     ev.preventDefault();
-    refs[itemIndex].current.focus();
+    (_refs$itemIndex$curre = refs[itemIndex].current) === null || _refs$itemIndex$curre === void 0 ? void 0 : _refs$itemIndex$curre.focus();
   }, [refs]);
   const handleKeyDown = useCallback(ev => {
     if (Events.isHomeKey(ev)) {
@@ -31,22 +34,31 @@ export const Picklist = ({
       focusItem(ev, refs.length - 1);
     }
   }, [focusItem, refs]);
-  const content = filteredChildren.map((child, childIndex) => child && /*#__PURE__*/React.cloneElement(child, {
-    ref: refs[childIndex],
-    disabled,
-    index: childIndex,
-    listIndex: index,
-    isLastGroup: child.type === PicklistGroup && childIndex === filteredChildren.length - 1
-  }));
+  const content = filteredChildren.map((child, childIndex) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    const props = {
+      ref: refs[childIndex],
+      disabled,
+      index: childIndex,
+      listIndex: index,
+      isLastGroup: child.type === PicklistGroup && childIndex === filteredChildren.length - 1
+    };
+    return /*#__PURE__*/React.cloneElement(child, props);
+  });
   useEffect(() => {
-    if ((elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.groupIndex) === undefined && index === (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.listIndex)) {
+    if (elementToFocus.groupIndex === undefined && elementToFocus.listIndex === index && elementToFocus.itemIndex !== undefined) {
       var _refs$elementToFocus$;
 
-      if ((_refs$elementToFocus$ = refs[elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.itemIndex]) !== null && _refs$elementToFocus$ !== void 0 && _refs$elementToFocus$.current) {
-        refs[elementToFocus.itemIndex].current.focus();
+      const itemToBeFocused = (_refs$elementToFocus$ = refs[elementToFocus.itemIndex]) === null || _refs$elementToFocus$ === void 0 ? void 0 : _refs$elementToFocus$.current;
+
+      if (itemToBeFocused) {
+        itemToBeFocused.focus();
         setElementToFocus();
       } else {
-        setElementToFocus(0, index === 0 ? 1 : 0, elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.groupIndex);
+        setElementToFocus(0, index === 0 ? 1 : 0, elementToFocus.groupIndex);
       }
     }
   }, [elementToFocus, index, refs, setElementToFocus]);
@@ -58,33 +70,13 @@ export const Picklist = ({
     component: null
   }, content));
 };
-Picklist.propTypes = {
-  /** List of PicklistItem elements */
-  children: PropTypes.node,
-
-  /** Placeholder to be rendered when list is empty */
-  placeholder: PropTypes.node,
 
-  /** Indicate if component is disabled */
-  disabled: PropTypes.bool,
-
-  /** @private @ignore */
-  index: PropTypes.number
-};
-export const areEqual = (prevProps, nextProps) => {
-  let changesCounter = 0;
-  const prevChildCount = React.Children.count(prevProps.children);
-  const nextChildCount = React.Children.count(nextProps.children);
-
-  if (prevChildCount !== nextChildCount) {
-    changesCounter += 1;
-  }
-
-  if (prevProps.disabled !== nextProps.disabled) {
-    changesCounter += 1;
-  }
-
-  return !changesCounter;
+Picklist.propTypes = {
+  "children": PropTypes.node,
+  "disabled": PropTypes.bool,
+  "index": PropTypes.number,
+  "placeholder": PropTypes.node
 };
+export { Picklist };
 Picklist.displayName = "Picklist";
 export default Picklist;

package/esm/components/duelling-picklist/picklist/picklist.style.d.ts

@@ -0,0 +1,5 @@
+declare const StyledPicklist: import("styled-components").StyledComponent<"div", any, import("../../box").BoxProps & {
+    as: string;
+}, "as">;
+declare const StyledEmptyContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
+export { StyledPicklist, StyledEmptyContainer };

package/esm/components/duelling-picklist/picklist-divider/picklist-divider.component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StyledComponentProps } from "styled-components";
+export declare type PicklistDividerProps = StyledComponentProps<"div", Record<string, unknown>, Record<string, unknown>, "">;
+declare const PicklistDivider: (props: PicklistDividerProps) => JSX.Element;
+export default PicklistDivider;

package/esm/components/duelling-picklist/picklist-divider/picklist-divider.component.js

@@ -1,10 +1,14 @@
 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 StyledPicklistDivider from "./picklist-divider.style";
 
 const PicklistDivider = props => /*#__PURE__*/React.createElement(StyledPicklistDivider, _extends({}, props, {
   "data-element": "picklist-divider"
 }));
 
+PicklistDivider.propTypes = {
+  "theme": PropTypes.object
+};
 export default PicklistDivider;

package/esm/components/duelling-picklist/picklist-divider/picklist-divider.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledPicklistDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledPicklistDivider;

package/esm/components/duelling-picklist/picklist-group/picklist-group.component.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface PicklistGroupProps {
+    /** Group title */
+    title: React.ReactNode;
+    /** Item content */
+    children: React.ReactNode;
+    /** Define if item is of type add or remove */
+    type: "add" | "remove";
+    /** Handler invoked when add/remove button is clicked or when space/enter is pressed on the whole item */
+    onChange: () => void;
+    /** @private @ignore */
+    index?: number;
+    /** @private @ignore */
+    listIndex?: number;
+    /** @private @ignore */
+    isLastGroup?: boolean;
+}
+export declare const PicklistGroup: React.ForwardRefExoticComponent<PicklistGroupProps & React.RefAttributes<HTMLButtonElement>>;
+export default PicklistGroup;

package/esm/components/duelling-picklist/picklist-group/picklist-group.component.js

@@ -14,7 +14,7 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
   index,
   listIndex,
   isLastGroup,
-  ...rest
+  ...transitionGroupProps
 }, ref) => {
   const {
     setElementToFocus,
@@ -36,17 +36,26 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
   const refs = useMemo(() => Array.from({
     length: filteredChildren.length
   }, () => /*#__PURE__*/React.createRef()), [filteredChildren.length]);
-  const content = React.Children.map(children, (child, childIndex) => child && /*#__PURE__*/React.cloneElement(child, {
-    ref: refs[childIndex],
-    index: childIndex,
-    listIndex,
-    groupIndex: index,
-    isLastGroup,
-    isLastItem: childIndex === filteredChildren.length - 1
-  }));
+  const content = React.Children.map(children, (child, childIndex) => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
+    const props = {
+      ref: refs[childIndex],
+      index: childIndex,
+      listIndex,
+      groupIndex: index,
+      isLastGroup,
+      isLastItem: childIndex === filteredChildren.length - 1
+    };
+    return /*#__PURE__*/React.cloneElement(child, props);
+  });
   useEffect(() => {
-    if (index === (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.groupIndex) && listIndex === (elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.listIndex)) {
-      refs[elementToFocus === null || elementToFocus === void 0 ? void 0 : elementToFocus.itemIndex].current.focus();
+    if (elementToFocus.groupIndex === index && elementToFocus.listIndex === listIndex && elementToFocus.itemIndex !== undefined) {
+      var _refs$elementToFocus$;
+
+      (_refs$elementToFocus$ = refs[elementToFocus.itemIndex].current) === null || _refs$elementToFocus$ === void 0 ? void 0 : _refs$elementToFocus$.focus();
       setElementToFocus();
     }
   }, [elementToFocus, index, isLastGroup, listIndex, refs, setElementToFocus]);
@@ -57,7 +66,7 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
       exit: 0
     },
     classNames: "picklist-group"
-  }, rest, type === "add" ? {
+  }, transitionGroupProps, type === "add" ? {
     enter: false
   } : {}), /*#__PURE__*/React.createElement(StyledGroupWrapper, {
     highlighted: highlighted,
@@ -80,25 +89,14 @@ const PicklistGroup = /*#__PURE__*/React.forwardRef(({
   }, content))));
 });
 PicklistGroup.propTypes = {
-  /** Group title */
-  title: PropTypes.node.isRequired,
-
-  /** Item content */
-  children: PropTypes.node.isRequired,
-
-  /** Define if item is of type add or remove */
-  type: PropTypes.oneOf(["add", "remove"]).isRequired,
-
-  /** Handler invoked when add/remove button is clicked or when space/enter is pressed on the whole item */
-  onChange: PropTypes.func.isRequired,
-
-  /** @private @ignore */
-  index: PropTypes.number,
-
-  /** @private @ignore */
-  listIndex: PropTypes.number,
-
-  /** @private @ignore */
-  isLastGroup: PropTypes.bool
+  "children": PropTypes.node,
+  "index": PropTypes.number,
+  "isLastGroup": PropTypes.bool,
+  "listIndex": PropTypes.number,
+  "onChange": PropTypes.func.isRequired,
+  "title": PropTypes.node,
+  "type": PropTypes.oneOf(["add", "remove"]).isRequired
 };
+export { PicklistGroup };
+PicklistGroup.displayName = "PicklistGroup";
 export default PicklistGroup;

package/esm/components/duelling-picklist/picklist-group/picklist-group.style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { PicklistGroupProps } from "./picklist-group.component";
+declare const StyledGroupWrapper: import("styled-components").StyledComponent<"li", any, {
+    highlighted: boolean;
+    type: PicklistGroupProps["type"];
+}, never>;
+declare const StyledPicklistGroupUl: import("styled-components").StyledComponent<"ul", any, {}, never>;
+declare const StyledPicklistGroup: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare const StyledGroupButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {
+    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconType: PicklistGroupProps["type"];
+}, never>;
+export { StyledGroupWrapper, StyledPicklistGroupUl, StyledPicklistGroup, StyledGroupButton, };