carbon-react 94.4.0 → 94.6.1

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

@@ -0,0 +1,573 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InDialog = exports.Grouped = exports.AlternativeSearch = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require(".");
+
+var _dialog = _interopRequireDefault(require("../dialog/dialog.component"));
+
+var _search = _interopRequireDefault(require("../search"));
+
+var _checkbox = require("../checkbox");
+
+var _box = _interopRequireDefault(require("../box"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _typography = _interopRequireDefault(require("../typography"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: "DuellingPicklist/Test",
+  parameters: {
+    info: {
+      disable: true
+    },
+    chromatic: {
+      disable: true
+    }
+  }
+};
+exports.default = _default;
+
+const Default = () => {
+  const mockData = (0, _react.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 = (0, _react.useMemo)(() => {
+    return mockData.reduce((obj, item) => {
+      obj[item.key] = item;
+      return obj;
+    }, {});
+  }, [mockData]);
+  const [isEachItemSelected, setIsEachItemSelected] = (0, _react.useState)(false);
+  const [order] = (0, _react.useState)(mockData.map(({
+    key
+  }) => key));
+  const [notSelectedItems, setNotSelectedItems] = (0, _react.useState)(allItems);
+  const [notSelectedSearch, setNotSelectedSearch] = (0, _react.useState)({});
+  const [selectedItems, setSelectedItems] = (0, _react.useState)({});
+  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
+  const isSearchMode = Boolean(searchQuery.length);
+  const onAdd = (0, _react.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 = (0, _react.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 = (0, _react.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.default.createElement(_.PicklistItem, {
+        key: key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          fontWeight: 700,
+          margin: 0,
+          marginLeft: 24
+        }
+      }, item.title)), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, item.description)))));
+    }
+
+    return items;
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    onChange: () => setIsEachItemSelected(!isEachItemSelected),
+    checked: isEachItemSelected,
+    label: "Example checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_.DuellingPicklist, {
+    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
+    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
+    leftControls: /*#__PURE__*/_react.default.createElement(_search.default, {
+      tabIndex: isEachItemSelected ? -1 : 0,
+      placeholder: "Search",
+      name: "search_name",
+      onChange: handleSearch,
+      value: searchQuery,
+      id: "search_id"
+    }),
+    disabled: isEachItemSelected
+  }, /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/_react.default.createElement("div", null, "Your own placeholder")
+  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/_react.default.createElement(_.PicklistDivider, null), /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/_react.default.createElement(_.PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, renderItems(selectedItems, "remove", onRemove))));
+};
+
+exports.Default = Default;
+
+const AlternativeSearch = () => {
+  const mockData = (0, _react.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 = (0, _react.useMemo)(() => {
+    return mockData.reduce((obj, item) => {
+      obj[item.key] = item;
+      return obj;
+    }, {});
+  }, [mockData]);
+  const [isEachItemSelected, setIsEachItemSelected] = (0, _react.useState)(false);
+  const [order] = (0, _react.useState)(mockData.map(({
+    key
+  }) => key));
+  const [notSelectedItems, setNotSelectedItems] = (0, _react.useState)(allItems);
+  const [notSelectedSearch, setNotSelectedSearch] = (0, _react.useState)({});
+  const [selectedItems, setSelectedItems] = (0, _react.useState)({});
+  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
+  const isSearchMode = Boolean(searchQuery.length);
+  const onAdd = (0, _react.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 = (0, _react.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 = (0, _react.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.default.createElement(_.PicklistItem, {
+        key: key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          fontWeight: 700,
+          margin: 0,
+          marginLeft: 24
+        }
+      }, item.title)), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: "50%"
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", {
+        style: {
+          margin: 0
+        }
+      }, item.description)))));
+    }
+
+    return items;
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_box.default, {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+    onChange: () => setIsEachItemSelected(!isEachItemSelected),
+    checked: isEachItemSelected,
+    label: "Example checkbox"
+  }), /*#__PURE__*/_react.default.createElement(_box.default, {
+    width: "calc(50% + 80px)"
+  }, /*#__PURE__*/_react.default.createElement(_search.default, {
+    tabIndex: isEachItemSelected ? -1 : 0,
+    placeholder: "Search",
+    name: "search_name",
+    onChange: handleSearch,
+    value: searchQuery,
+    id: "search_id"
+  }))), /*#__PURE__*/_react.default.createElement(_.DuellingPicklist, {
+    leftLabel: `List 1 (${Object.keys(notSelectedItems).length})`,
+    rightLabel: `List 2 (${Object.keys(selectedItems).length})`,
+    disabled: isEachItemSelected
+  }, /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/_react.default.createElement("div", null, "Your own placeholder")
+  }, renderItems(isSearchMode ? notSelectedSearch : notSelectedItems, "add", onAdd)), /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    disabled: isEachItemSelected,
+    placeholder: /*#__PURE__*/_react.default.createElement(_.PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, renderItems(selectedItems, "remove", onRemove))));
+};
+
+exports.AlternativeSearch = AlternativeSearch;
+
+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] = (0, _react.useState)(mockData);
+  const [selectedItems, setSelectedItems] = (0, _react.useState)({});
+  const getItemGroup = (0, _react.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 = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(group => {
+    const {
+      [group]: removed,
+      ...rest
+    } = notSelectedItems;
+    setNotSelectedItems(rest);
+    setSelectedItems({ ...selectedItems,
+      [group]: mockData[group]
+    });
+  }, [mockData, notSelectedItems, selectedItems]);
+  const removeGroup = (0, _react.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.default.createElement(_.PicklistItem, {
+        key: item.key,
+        type: type,
+        item: item,
+        onChange: handler
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: "flex",
+          width: "100%"
+        }
+      }, /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.DuellingPicklist, {
+    leftLabel: `List 1 (${getTotalItems(notSelectedItems)})`,
+    rightLabel: `List 2 (${getTotalItems(selectedItems)})`
+  }, /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    placeholder: /*#__PURE__*/_react.default.createElement(_.PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, notSelectedItems.groupA && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group A"),
+    type: "add",
+    onChange: () => addGroup("groupA")
+  }, renderItems(notSelectedItems.groupA, "add", onAdd)), notSelectedItems.groupB && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group B"),
+    type: "add",
+    onChange: () => addGroup("groupB")
+  }, renderItems(notSelectedItems.groupB, "add", onAdd)), notSelectedItems.groupC && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group C"),
+    type: "add",
+    onChange: () => addGroup("groupC")
+  }, renderItems(notSelectedItems.groupC, "add", onAdd))), /*#__PURE__*/_react.default.createElement(_.PicklistDivider, null), /*#__PURE__*/_react.default.createElement(_.Picklist, {
+    placeholder: /*#__PURE__*/_react.default.createElement(_.PicklistPlaceholder, {
+      text: "Nothing to see here"
+    })
+  }, selectedItems.groupA && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group A"),
+    type: "remove",
+    onChange: () => removeGroup("groupA")
+  }, renderItems(selectedItems.groupA, "remove", onRemove)), selectedItems.groupB && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group B"),
+    type: "remove",
+    onChange: () => removeGroup("groupB")
+  }, renderItems(selectedItems.groupB, "remove", onRemove)), selectedItems.groupC && /*#__PURE__*/_react.default.createElement(_.PicklistGroup, {
+    title: /*#__PURE__*/_react.default.createElement(_typography.default, {
+      variant: "b"
+    }, "Group C"),
+    type: "remove",
+    onChange: () => removeGroup("groupC")
+  }, renderItems(selectedItems.groupC, "remove", onRemove)))));
+};
+
+exports.Grouped = Grouped;
+
+const InDialog = () => {
+  const [isDialogOpen, setIsDialogOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+    onClick: () => setIsDialogOpen(true)
+  }, "Open Duelling Picklist"), /*#__PURE__*/_react.default.createElement(_dialog.default, {
+    open: isDialogOpen,
+    onCancel: () => setIsDialogOpen(false),
+    title: "Duelling Picklist",
+    size: "large"
+  }, /*#__PURE__*/_react.default.createElement(Default, null)));
+};
+
+exports.InDialog = InDialog;
+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/lib/components/duelling-picklist/duelling-picklist.style.js

@@ -11,8 +11,6 @@ var _styledSystem = require("styled-system");
 
 var _themes = require("../../style/themes");
 
-var _picklist = require("./picklist/picklist.style");
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,21 +34,13 @@ const StyledDuellingPicklist = _styledComponents.default.div`
   justify-content: space-between;
   align-items: stretch;
   position: relative;
-
-  ${_picklist.StyledPicklist}:first-of-type {
-    padding-right: 36px;
-  }
-
-  ${_picklist.StyledPicklist}:last-of-type {
-    padding-left: 36px;
-  }
 `;
 exports.StyledDuellingPicklist = StyledDuellingPicklist;
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
   justify-content: space-around;
-  margin-top: 36px;
-  margin-bottom: 24px;
+  margin-top: 40px;
+  margin-bottom: 16px;
 `;
 exports.StyledLabelContainer = StyledLabelContainer;
 const StyledLabel = _styledComponents.default.p`

package/lib/components/duelling-picklist/picklist/picklist.style.js

@@ -16,15 +16,15 @@ const StyledPicklist = (0, _styledComponents.default)(_box.default).attrs({
 })`
   position: relative;
   list-style: none;
-  margin: 0 -4px;
-  padding: 4px 4px;
+  margin: 0;
+  padding: 4px 8px 8px 8px;
   width: 100%;
   box-sizing: border-box;
   overflow-y: auto;
   height: 400px;
 
   & + & {
-    margin-left: 80px;
+    margin-left: 32px;
   }
 
   .picklist-item-enter {

package/lib/components/duelling-picklist/picklist-divider/picklist-divider.style.js

@@ -16,8 +16,8 @@ const StyledPicklistDivider = _styledComponents.default.div`
     #bfcbd1 0%,
     rgba(191, 203, 209, 0) 99.9%
   );
-  margin-left: 4px;
-  margin-right: 4px;
+  margin-left: 16px;
+  margin-right: 16px;
 `;
 var _default = StyledPicklistDivider;
 exports.default = _default;

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

@@ -85,7 +85,7 @@ const PicklistGroup = /*#__PURE__*/_react.default.forwardRef(({
   } : {}), /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledGroupWrapper, {
     highlighted: highlighted,
     type: type
-  }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledPicklistGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledPicklistGroupUl, null, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledPicklistGroup, {
     onKeyDown: handleKeydown,
     "data-element": "picklist-group"
   }, title, /*#__PURE__*/_react.default.createElement(_picklistGroup.StyledGroupButton, {

package/lib/components/duelling-picklist/picklist-group/picklist-group.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledGroupWrapper = void 0;
+exports.StyledGroupButton = exports.StyledPicklistGroup = exports.StyledPicklistGroupUl = exports.StyledGroupWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -37,6 +37,10 @@ const StyledGroupWrapper = _styledComponents.default.li`
   `}
 `;
 exports.StyledGroupWrapper = StyledGroupWrapper;
+const StyledPicklistGroupUl = _styledComponents.default.ul`
+  padding: 0;
+`;
+exports.StyledPicklistGroupUl = StyledPicklistGroupUl;
 const StyledPicklistGroup = _styledComponents.default.li`
   display: flex;
   align-items: center;

package/lib/style/design-tokens/carbon-global-tokens-provider/carbon-global-tokens-provider.component.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ *
+ * Converts theme properties to css variables form and set them globally
+ *
+ */
+const CarbonGlobalTokensProvider = (0, _styledComponents.createGlobalStyle)`
+  :root {
+    ${props => (0, _generateCssVariables.default)(props.theme)}
+  }
+`;
+var _default = CarbonGlobalTokensProvider;
+exports.default = _default;