carbon-react 104.34.0 → 104.36.0

package/esm/components/duelling-picklist/duelling-picklist-test.stories.js

@@ -0,0 +1,539 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { DuellingPicklist, Picklist, PicklistItem, PicklistDivider, PicklistPlaceholder, PicklistGroup } from ".";
+import Dialog from "../dialog/dialog.component";
+import Search from "../search";
+import { Checkbox } from "../checkbox";
+import Box from "../box";
+import Button from "../button";
+import Typography from "../typography";
+export default {
+  title: "DuellingPicklist/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+export const Default = () => {
+  const mockData = useMemo(() => {
+    const arr = [];
+
+    for (let i = 0; i < 20; i++) {
+      const data = {
+        key: i.toString(),
+        title: `Content ${i + 1}`,
+        description: `Description ${i + 1}`
+      };
+      arr.push(data);
+    }
+
+    return arr;
+  }, []);
+  const allItems = useMemo(() => {
+    return mockData.reduce((obj, item) => {
+      obj[item.key] = item;
+      return obj;
+    }, {});
+  }, [mockData]);
+  const [isEachItemSelected, setIsEachItemSelected] = useState(false);
+  const [order] = useState(mockData.map(({
+    key
+  }) => key));
+  const [notSelectedItems, setNotSelectedItems] = useState(allItems);
+  const [notSelectedSearch, setNotSelectedSearch] = useState({});
+  const [selectedItems, setSelectedItems] = useState({});
+  const [searchQuery, setSearchQuery] = useState("");
+  const isSearchMode = Boolean(searchQuery.length);
+  const onAdd = useCallback(item => {
+    const {
+      [item.key]: removed,
+      ...rest
+    } = notSelectedItems;
+    setNotSelectedItems(rest);
+    setSelectedItems({ ...selectedItems,
+      [item.key]: item
+    });
+    const {
+      [item.key]: removed2,
+      ...rest2
+    } = notSelectedSearch;
+    setNotSelectedSearch(rest2);
+  }, [notSelectedItems, notSelectedSearch, selectedItems]);
+  const onRemove = useCallback(item => {
+    const {
+      [item.key]: removed,
+      ...rest
+    } = selectedItems;
+    setSelectedItems(rest);
+    setNotSelectedItems({ ...notSelectedItems,
+      [item.key]: item
+    });
+
+    if (isSearchMode && item.title.includes(searchQuery)) {
+      setNotSelectedSearch({ ...notSelectedSearch,
+        [item.key]: item
+      });
+    }
+  }, [isSearchMode, notSelectedItems, notSelectedSearch, searchQuery, selectedItems]);
+  const handleSearch = useCallback(ev => {
+    setSearchQuery(ev.target.value);
+    const tempNotSelectedItems = Object.keys(notSelectedItems).reduce((items, key) => {
+      const item = notSelectedItems[key];
+
+      if (item.title.includes(ev.target.value)) {
+        items[item.key] = item;
+      }
+
+      return items;
+    }, {});
+    setNotSelectedSearch(tempNotSelectedItems);
+  }, [notSelectedItems]);
+
+  const renderItems = (list, type, handler) => order.reduce((items, key) => {
+    const item = list[key];
+
+    if (item) {
+      items.push( /*#__PURE__*/React.createElement(PicklistItem, {
+        key: key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        style: {
+          fontWeight: 700,
+          margin: 0,
+          marginLeft: 24
+        }
+      }, item.title)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, item.description)))));
+    }
+
+    return items;
+  }, []);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: () => setIsEachItemSelected(!isEachItemSelected),
+    checked: isEachItemSelected,
+    label: "Example checkbox"
+  }), /*#__PURE__*/React.createElement(DuellingPicklist, {
+    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
+    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
+    leftControls: /*#__PURE__*/React.createElement(Search, {
+      tabIndex: isEachItemSelected ? -1 : 0,
+      placeholder: "Search",
+      name: "search_name",
+      onChange: handleSearch,
+      value: searchQuery,
+      id: "search_id"
+    }),
+    disabled: isEachItemSelected
+  }, /*#__PURE__*/React.createElement(Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/React.createElement("div", null, "Your own placeholder")
+  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/React.createElement(PicklistDivider, null), /*#__PURE__*/React.createElement(Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, renderItems(selectedItems, "remove", onRemove))));
+};
+export const AlternativeSearch = () => {
+  const mockData = useMemo(() => {
+    const arr = [];
+
+    for (let i = 0; i < 20; i++) {
+      const data = {
+        key: i.toString(),
+        title: `Content ${i + 1}`,
+        description: `Description ${i + 1}`
+      };
+      arr.push(data);
+    }
+
+    return arr;
+  }, []);
+  const allItems = useMemo(() => {
+    return mockData.reduce((obj, item) => {
+      obj[item.key] = item;
+      return obj;
+    }, {});
+  }, [mockData]);
+  const [isEachItemSelected, setIsEachItemSelected] = useState(false);
+  const [order] = useState(mockData.map(({
+    key
+  }) => key));
+  const [notSelectedItems, setNotSelectedItems] = useState(allItems);
+  const [notSelectedSearch, setNotSelectedSearch] = useState({});
+  const [selectedItems, setSelectedItems] = useState({});
+  const [searchQuery, setSearchQuery] = useState("");
+  const isSearchMode = Boolean(searchQuery.length);
+  const onAdd = useCallback(item => {
+    const {
+      [item.key]: removed,
+      ...rest
+    } = notSelectedItems;
+    setNotSelectedItems(rest);
+    setSelectedItems({ ...selectedItems,
+      [item.key]: item
+    });
+    const {
+      [item.key]: removed2,
+      ...rest2
+    } = notSelectedSearch;
+    setNotSelectedSearch(rest2);
+  }, [notSelectedItems, notSelectedSearch, selectedItems]);
+  const onRemove = useCallback(item => {
+    const {
+      [item.key]: removed,
+      ...rest
+    } = selectedItems;
+    setSelectedItems(rest);
+    setNotSelectedItems({ ...notSelectedItems,
+      [item.key]: item
+    });
+
+    if (isSearchMode && item.title.includes(searchQuery)) {
+      setNotSelectedSearch({ ...notSelectedSearch,
+        [item.key]: item
+      });
+    }
+  }, [isSearchMode, notSelectedItems, notSelectedSearch, searchQuery, selectedItems]);
+  const handleSearch = useCallback(ev => {
+    setSearchQuery(ev.target.value);
+    const tempNotSelectedItems = Object.keys(notSelectedItems).reduce((items, key) => {
+      const item = notSelectedItems[key];
+
+      if (item.title.includes(ev.target.value)) {
+        items[item.key] = item;
+      }
+
+      return items;
+    }, {});
+    setNotSelectedSearch(tempNotSelectedItems);
+  }, [notSelectedItems]);
+
+  const renderItems = (list, type, handler) => order.reduce((items, key) => {
+    const item = list[key];
+
+    if (item) {
+      items.push( /*#__PURE__*/React.createElement(PicklistItem, {
+        key: key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        style: {
+          fontWeight: 700,
+          margin: 0,
+          marginLeft: 24
+        }
+      }, item.title)), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, item.description)))));
+    }
+
+    return items;
+  }, []);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: () => setIsEachItemSelected(!isEachItemSelected),
+    checked: isEachItemSelected,
+    label: "Example checkbox"
+  }), /*#__PURE__*/React.createElement(Box, {
+    width: "calc(50% + 80px)"
+  }, /*#__PURE__*/React.createElement(Search, {
+    tabIndex: isEachItemSelected ? -1 : 0,
+    placeholder: "Search",
+    name: "search_name",
+    onChange: handleSearch,
+    value: searchQuery,
+    id: "search_id"
+  }))), /*#__PURE__*/React.createElement(DuellingPicklist, {
+    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
+    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
+    disabled: isEachItemSelected
+  }, /*#__PURE__*/React.createElement(Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/React.createElement("div", null, "Your own placeholder")
+  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/React.createElement(Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, renderItems(selectedItems, "remove", onRemove))));
+};
+export const Grouped = () => {
+  const mockData = {
+    groupA: [{
+      key: 1,
+      title: "Content 1"
+    }, {
+      key: 2,
+      title: "Content 2"
+    }, {
+      key: 3,
+      title: "Content 3"
+    }],
+    groupB: [{
+      key: 4,
+      title: "Content 4"
+    }],
+    groupC: [{
+      key: 5,
+      title: "Content 5"
+    }, {
+      key: 6,
+      title: "Content 6"
+    }]
+  };
+  const [notSelectedItems, setNotSelectedItems] = useState(mockData);
+  const [selectedItems, setSelectedItems] = useState({});
+  const getItemGroup = useCallback(item => {
+    let group;
+
+    for (const [key, value] of Object.entries(mockData)) {
+      if (value.filter(data => data.key === item.key).length > 0) group = key;
+    }
+
+    return group;
+  }, [mockData]);
+  const onAdd = useCallback(item => {
+    const itemGroup = getItemGroup(item);
+    const {
+      [itemGroup]: group,
+      ...rest
+    } = notSelectedItems;
+    const itemIndex = group.indexOf(item);
+    group.splice(itemIndex, 1);
+
+    if (group.length > 0) {
+      setNotSelectedItems({ ...rest,
+        [itemGroup]: group
+      });
+    } else {
+      setNotSelectedItems({ ...rest
+      });
+    }
+
+    if (selectedItems[itemGroup]) {
+      setSelectedItems({ ...selectedItems,
+        [itemGroup]: [...selectedItems[itemGroup], item]
+      });
+    } else {
+      setSelectedItems({ ...selectedItems,
+        [itemGroup]: [item]
+      });
+    }
+  }, [notSelectedItems, selectedItems, getItemGroup]);
+  const onRemove = useCallback(item => {
+    const itemGroup = getItemGroup(item);
+    const {
+      [itemGroup]: group,
+      ...rest
+    } = selectedItems;
+    const itemIndex = group.indexOf(item);
+    group.splice(itemIndex, 1);
+
+    if (group.length > 0) {
+      setSelectedItems({ ...rest,
+        [itemGroup]: group
+      });
+    } else {
+      setSelectedItems({ ...rest
+      });
+    }
+
+    if (notSelectedItems[itemGroup]) {
+      setNotSelectedItems({ ...notSelectedItems,
+        [itemGroup]: [...notSelectedItems[itemGroup], item]
+      });
+    } else {
+      setNotSelectedItems({ ...notSelectedItems,
+        [itemGroup]: [item]
+      });
+    }
+  }, [notSelectedItems, selectedItems, getItemGroup]);
+  const addGroup = useCallback(group => {
+    const {
+      [group]: removed,
+      ...rest
+    } = notSelectedItems;
+    setNotSelectedItems(rest);
+    setSelectedItems({ ...selectedItems,
+      [group]: mockData[group]
+    });
+  }, [mockData, notSelectedItems, selectedItems]);
+  const removeGroup = useCallback(group => {
+    const {
+      [group]: removed,
+      ...rest
+    } = selectedItems;
+    setSelectedItems(rest);
+    setNotSelectedItems({ ...notSelectedItems,
+      [group]: mockData[group]
+    });
+  }, [mockData, notSelectedItems, selectedItems]);
+
+  const renderItems = (list, type, handler) => {
+    if (!list) return null;
+    list.sort((a, b) => a.key - b.key);
+    return list.map(item => {
+      return /*#__PURE__*/React.createElement(PicklistItem, {
+        key: item.key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/React.createElement("p", {
+        style: {
+          fontWeight: 700,
+          margin: 0,
+          marginLeft: 24
+        }
+      }, item.title)));
+    });
+  };
+
+  const getTotalItems = items => {
+    let total = 0;
+    const groups = Object.values(items);
+    groups.forEach(item => {
+      total += item.length;
+    });
+    return total;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DuellingPicklist, {
+    leftLabel: `List 1 (${getTotalItems(notSelectedItems)})`,
+    rightLabel: `List 2 (${getTotalItems(selectedItems)})`
+  }, /*#__PURE__*/React.createElement(Picklist, {
+    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, notSelectedItems.groupA && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group A"),
+    type: "add",
+    onChange: () => addGroup("groupA")
+  }, renderItems(notSelectedItems.groupA, "add", onAdd)), notSelectedItems.groupB && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group B"),
+    type: "add",
+    onChange: () => addGroup("groupB")
+  }, renderItems(notSelectedItems.groupB, "add", onAdd)), notSelectedItems.groupC && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group C"),
+    type: "add",
+    onChange: () => addGroup("groupC")
+  }, renderItems(notSelectedItems.groupC, "add", onAdd))), /*#__PURE__*/React.createElement(PicklistDivider, null), /*#__PURE__*/React.createElement(Picklist, {
+    placeholder: /*#__PURE__*/React.createElement(PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, selectedItems.groupA && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group A"),
+    type: "remove",
+    onChange: () => removeGroup("groupA")
+  }, renderItems(selectedItems.groupA, "remove", onRemove)), selectedItems.groupB && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group B"),
+    type: "remove",
+    onChange: () => removeGroup("groupB")
+  }, renderItems(selectedItems.groupB, "remove", onRemove)), selectedItems.groupC && /*#__PURE__*/React.createElement(PicklistGroup, {
+    title: /*#__PURE__*/React.createElement(Typography, {
+      variant: "b"
+    }, "Group C"),
+    type: "remove",
+    onChange: () => removeGroup("groupC")
+  }, renderItems(selectedItems.groupC, "remove", onRemove)))));
+};
+export const InDialog = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setIsDialogOpen(true)
+  }, "Open Duelling Picklist"), /*#__PURE__*/React.createElement(Dialog, {
+    open: isDialogOpen,
+    onCancel: () => setIsDialogOpen(false),
+    title: "Duelling Picklist",
+    size: "large"
+  }, /*#__PURE__*/React.createElement(Default, null)));
+};
+Default.story = {
+  name: "default",
+  parameters: {
+    chromatic: {
+      disable: false
+    }
+  }
+};
+AlternativeSearch.story = {
+  name: "alternative search placement",
+  parameters: {
+    chromatic: {
+      disable: false
+    }
+  }
+};
+Grouped.story = {
+  name: "grouped",
+  parameters: {
+    chromatic: {
+      disable: false
+    }
+  }
+};
+InDialog.story = {
+  name: "in dialog",
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};

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

@@ -0,0 +1,21 @@
+export default DuellingPicklist;
+declare function DuellingPicklist({ children, disabled, leftControls, rightControls, leftLabel, rightLabel, ...rest }: {
+    [x: string]: any;
+    children: any;
+    disabled: any;
+    leftControls: any;
+    rightControls: any;
+    leftLabel: any;
+    rightLabel: any;
+}): JSX.Element;
+declare namespace DuellingPicklist {
+    namespace propTypes {
+        function children(props: any, propName: any): Error | undefined;
+        const disabled: PropTypes.Requireable<boolean>;
+        const leftControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const rightControls: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const leftLabel: PropTypes.Requireable<string>;
+        const rightLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

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

@@ -0,0 +1,89 @@
+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, { 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,
+  disabled,
+  leftControls,
+  rightControls,
+  leftLabel,
+  rightLabel,
+  ...rest
+}) => {
+  const shouldDisplayLabels = leftLabel || rightLabel;
+  const shouldDisplayControls = leftControls || rightControls;
+  const [elementToFocus, setElementToFocus] = useState({});
+  let pickListIndex = 0;
+
+  const addElementToFocus = (itemIndex, listIndex, groupIndex) => {
+    setElementToFocus({
+      itemIndex,
+      listIndex,
+      groupIndex
+    });
+  };
+
+  const getIndex = () => {
+    const index = pickListIndex;
+    pickListIndex += 1;
+    return index;
+  };
+
+  const clonedChildren = React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
+    index: child.type === Picklist ? getIndex() : undefined
+  }));
+  return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
+    disabled: disabled,
+    "data-component": "duelling-picklist"
+  }, filterStyledSystemMarginProps(rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-element": "picklist-left-label"
+  }, leftLabel), /*#__PURE__*/React.createElement(StyledLabel, {
+    "data-element": "picklist-right-label"
+  }, rightLabel)), shouldDisplayControls && /*#__PURE__*/React.createElement(StyledControlsContainer, null, /*#__PURE__*/React.createElement(StyledControl, {
+    "data-element": "picklist-left-control"
+  }, leftControls), /*#__PURE__*/React.createElement(StyledControl, {
+    "data-element": "picklist-right-label"
+  }, rightControls)), /*#__PURE__*/React.createElement(FocusContext.Provider, {
+    value: {
+      setElementToFocus: addElementToFocus,
+      elementToFocus
+    }
+  }, /*#__PURE__*/React.createElement(StyledDuellingPicklist, null, clonedChildren)));
+};
+
+DuellingPicklist.propTypes = { ...marginPropTypes,
+  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
+};
+export default DuellingPicklist;

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

@@ -0,0 +1,3 @@
+export default FocusContext;
+declare const FocusContext: React.Context<{}>;
+import React from "react";

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

@@ -0,0 +1,3 @@
+import React from "react";
+const FocusContext = /*#__PURE__*/React.createContext({});
+export default FocusContext;

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { MarginProps } from "styled-system";
+
+export interface DuellingPicklistProps extends MarginProps {
+  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;
+}
+
+declare function DuellingPicklist(props: DuellingPicklistProps): JSX.Element;
+
+export default DuellingPicklist;

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

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