@decisiv/ui-components 2.0.1-alpha.220 → 2.0.1-alpha.222

package/lib/atoms/OptionsList/Category/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare const Category: ({ borderRadius, label, items, showCheckbox, size, }: import("../types").Category) => JSX.Element;
+declare const Category: ({ borderRadius, label, items, indexOffset, showCheckbox, isDragEnabled, size, }: import("../types").Category) => JSX.Element;
 export default Category;
 //# sourceMappingURL=index.d.ts.map

package/lib/atoms/OptionsList/Category/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAOA,QAAA,MAAM,QAAQ,mGA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAUA,QAAA,MAAM,QAAQ,+HA4Eb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/atoms/OptionsList/Category/index.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+
+var _ConfigProvider = require("../../../providers/ConfigProvider");
 
 var _Option = _interopRequireDefault(require("../Option"));
 
@@ -15,27 +19,65 @@ var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
 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); }
 
 var Category = function Category(_ref) {
   var borderRadius = _ref.borderRadius,
       label = _ref.label,
       items = _ref.items,
+      _ref$indexOffset = _ref.indexOffset,
+      indexOffset = _ref$indexOffset === void 0 ? 0 : _ref$indexOffset,
       showCheckbox = _ref.showCheckbox,
+      isDragEnabled = _ref.isDragEnabled,
       size = _ref.size;
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_styles.StyledCategory, {
-    size: size
-  }, label), items.map(function (subItem) {
-    var id = (0, _utils.getId)(subItem);
-    return _react.default.createElement(_Option.default, _extends({}, subItem, {
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Render a draggable item, using a portal if it's being dragged
+  // to avoid issues with parent containers having transform: *.
+  // See; https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
+
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
       key: id,
-      id: id,
-      borderRadius: borderRadius,
-      showCheckbox: showCheckbox,
-      size: size
-    }));
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        providerRef: provided.innerRef,
+        isDragEnabled: isDragEnabled,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactBeautifulDnd.Draggable, {
+    key: "category-".concat(label),
+    draggableId: "category-".concat(label),
+    index: indexOffset,
+    isDragDisabled: true
+  }, function (provided) {
+    return _react.default.createElement(_styles.StyledCategory, _extends({
+      size: size,
+      ref: provided.innerRef
+    }, provided.draggableProps, provided.dragHandleProps, {
+      role: "option"
+    }), label);
+  }), items.map(function (subItem, index) {
+    return renderDraggable(subItem, indexOffset + index + 1);
   }));
 };
 

package/lib/atoms/OptionsList/Category/styles.d.ts

@@ -1,6 +1,5 @@
 import { StyledCategoryProps } from '../types';
 export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
-    role: "option";
     'aria-disabled': true;
-} & StyledCategoryProps, "role" | "aria-disabled">;
+} & StyledCategoryProps, "aria-disabled">;
 //# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/Category/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;;kDAa1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;yCAY1B,CAAC"}

package/lib/atoms/OptionsList/Category/styles.js

@@ -26,7 +26,6 @@ var withCategorySizeModifiers = function withCategorySizeModifiers(props) {
 };
 
 var StyledCategory = _styledComponents.default.li.attrs({
-  role: 'option',
   'aria-disabled': true
 }).withConfig({
   displayName: "styles__StyledCategory",

package/lib/atoms/OptionsList/Option/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0H/C;;AAED,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA6DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkI/C;;AAED,wBAAkC"}

package/lib/atoms/OptionsList/Option/index.js

@@ -21,6 +21,8 @@ var _utils = require("../utils");
 
 var _styles = require("./styles");
 
+var _Grip = _interopRequireDefault(require("../../../components/Table/Grip"));
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -81,7 +83,11 @@ function Option(props) {
       _props$showCheckbox = props.showCheckbox,
       showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox,
       _props$size = props.size,
-      size = _props$size === void 0 ? 'small' : _props$size;
+      size = _props$size === void 0 ? 'small' : _props$size,
+      providerRef = props.providerRef,
+      draggableProps = props.draggableProps,
+      dragHandleProps = props.dragHandleProps,
+      isDragEnabled = props.isDragEnabled;
   var decorationType = (0, _get.default)(decoration, 'type');
 
   var _useOptionsList = (0, _context.useOptionsList)(),
@@ -123,7 +129,7 @@ function Option(props) {
       }, children);
     };
   }, [selectable]);
-  return _react.default.createElement(_styles.Container, {
+  return _react.default.createElement(_styles.Container, _extends({
     "aria-disabled": !!disabled,
     "aria-selected": checked,
     borderRadius: borderRadius,
@@ -137,14 +143,18 @@ function Option(props) {
     inputMethod: inputMethod,
     role: itemRole,
     size: size,
-    pointerEvents: pointerEvents
-  }, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
+    pointerEvents: pointerEvents,
+    ref: providerRef
+  }, draggableProps, dragHandleProps), (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
     tabIndex: -1,
     to: props.linkTo,
     text: label,
     icon: isDecoration(decoration) && decoration.type === 'Icon' ? decoration.icon : undefined,
     disabled: !!disabled
-  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
+  }) : _react.default.createElement(LabelWrapper, null, isDragEnabled && _react.default.createElement(_Grip.default, {
+    marginRight: "10px",
+    selected: checked
+  }), selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
     disabled: !!disabled,
     size: sizeMapping[size],
     value: props.value

package/lib/atoms/OptionsList/Option/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA6GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA8GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}

package/lib/atoms/OptionsList/Option/styles.js

@@ -48,7 +48,7 @@ function getBorderRadius(_ref) {
 var Container = _styledComponents.default.li.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1vr9h8x-1"
-})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
+})(["text-align:left;list-style:none;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
   var pointerEvents = _ref2.pointerEvents;
   return pointerEvents;
 }, withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));

package/lib/atoms/OptionsList/index.d.ts

@@ -1,49 +1,6 @@
 import React from 'react';
 import { OptionsListProps } from './types';
-export declare const Container: import("styled-components").StyledComponent<"ul", any, Pick<Partial<{
-    height?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    width?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-}>, "maxHeight" | "maxWidth" | "minWidth">, never>;
+export { Container } from './styles';
 declare const OptionsListWithContainerRef: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLUListElement>>;
 export default OptionsListWithContainerRef;
 //# sourceMappingURL=index.d.ts.map

package/lib/atoms/OptionsList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAiTF,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAoBf,OAAO,EAGL,gBAAgB,EAGjB,MAAM,SAAS,CAAC;AAajB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAqZrC,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}

package/lib/atoms/OptionsList/index.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Container = void 0;
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    return _styles.Container;
+  }
+});
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
@@ -27,12 +31,16 @@ var _assignRef = _interopRequireDefault(require("../../utils/assignRef"));
 
 var _isCtrlCmd = _interopRequireDefault(require("../../utils/isCtrlCmd"));
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Category = _interopRequireDefault(require("./Category"));
 
 var _Footer = _interopRequireDefault(require("./Footer"));
 
+var _styles = require("./styles");
+
 var _context = require("./context");
 
 var _utils = require("./utils");
@@ -81,27 +89,12 @@ if (_canUseDOM.default) {
   });
 }
 
-var Container = _styledComponents.default.ul.withConfig({
-  displayName: "OptionsList__Container",
-  componentId: "sc-107p8d5-0"
-})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth ? "\nmin-width: ".concat(minWidth, ";\n") : '';
-}, function (_ref2) {
-  var maxWidth = _ref2.maxWidth;
-  return maxWidth ? "\nmax-width: ".concat(maxWidth, ";\n") : '';
-}, function (_ref3) {
-  var maxHeight = _ref3.maxHeight;
-  return maxHeight ? "\nmax-height: ".concat(maxHeight, ";\n") : '';
-});
-
-exports.Container = Container;
-
 function OptionsList(props, forwardedRef) {
   var actions = props.actions,
       items = props.items,
       multiple = props.multiple,
       onChange = props.onChange,
+      onDragEndProp = props.onDragEnd,
       name = props.name,
       selectedIdsProp = props.selected,
       renderOptionLabel = props.renderOptionLabel,
@@ -168,8 +161,8 @@ function OptionsList(props, forwardedRef) {
 
   var selectableIds = (0, _react.useMemo)(function () {
     return items.reduce(function (acc, item) {
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref4) {
-        var disabled = _ref4.disabled;
+      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref) {
+        var disabled = _ref.disabled;
         return !disabled;
       }) : [item.disabled ? undefined : item]).filter(Boolean)));
     }, []).map(_utils.getId);
@@ -266,6 +259,82 @@ function OptionsList(props, forwardedRef) {
     updateActiveId('');
     handleFocusToggle(event);
   }, [handleFocusToggle, updateActiveId]);
+  var positions = [];
+  var onDragEnd = (0, _react.useCallback)(function (_ref2) {
+    var source = _ref2.source,
+        destination = _ref2.destination;
+    if (!onDragEndProp || !destination) return;
+
+    var _positions$source$ind = _slicedToArray(positions[source.index], 2),
+        fromGroup = _positions$source$ind[0],
+        fromIndex = _positions$source$ind[1];
+
+    var _positions$destinatio = _slicedToArray(positions[destination.index], 2),
+        toGroup = _positions$destinatio[0],
+        toIndex = _positions$destinatio[1];
+
+    var hasGroups = fromIndex !== undefined || toIndex !== undefined;
+    var fixedGroup = toGroup;
+    var fixedIndex = toIndex;
+
+    if (!hasGroups) {
+      onDragEndProp(fromGroup, toGroup);
+      return;
+    } // when dropping in a header place
+
+
+    if (toIndex === undefined) {
+      if (toGroup === 0) return;
+
+      if (fromGroup >= toGroup) {
+        // it is actually aiming to the last position of previous group
+        var _positions = _slicedToArray(positions[destination.index - 1], 2);
+
+        fixedGroup = _positions[0];
+        fixedIndex = _positions[1];
+        fixedIndex += 1;
+      } else {
+        // aiming for the first position of the group
+        fixedIndex = 0;
+      }
+    } else if (fromGroup < toGroup) fixedIndex += 1;
+
+    onDragEndProp([fromGroup, fromIndex], [fixedGroup, fixedIndex]);
+  }, [onDragEndProp, positions]);
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal;
+
+  var isDragEnabled = !!onDragEndProp;
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: id,
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        isDragEnabled: isDragEnabled,
+        providerRef: provided.innerRef,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  var dndIndex = 0;
   return _react.default.createElement(_context.OptionsListContextProvider, {
     value: {
       toggleItemSelection: toggleItemSelection,
@@ -281,39 +350,52 @@ function OptionsList(props, forwardedRef) {
       itemRole: itemRole,
       pointerEvents: pointerEvents
     }
-  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
-    "aria-activedescendant": activeId,
-    "aria-multiselectable": !!multiple,
-    ref: setContainerRefFunc,
-    onKeyDown: onKeyDown,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onMouseLeave: function onMouseLeave() {
-      return updateActiveId('');
-    },
-    role: role,
-    tabIndex: tabIndex,
-    minWidth: minWidth,
-    maxWidth: maxWidth,
-    maxHeight: maxHeight
-  }, items.map(function (item) {
-    var id = (0, _utils.getId)(item);
-
-    if ((0, _utils.isCategory)(item)) {
-      return _react.default.createElement(_Category.default, _extends({}, item, {
-        key: id,
-        borderRadius: borderRadius,
-        showCheckbox: showCheckbox,
-        size: size
-      }));
-    }
+  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, _react.default.createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "droppable-options-list"
+  }, function (droppableProvided) {
+    return _react.default.createElement(_styles.Container, _extends({
+      "aria-activedescendant": activeId,
+      "aria-multiselectable": !!multiple,
+      ref: function ref(el) {
+        setContainerRefFunc(el);
+        droppableProvided.innerRef(el);
+      },
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseLeave: function onMouseLeave() {
+        return updateActiveId('');
+      },
+      role: role,
+      tabIndex: tabIndex,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      maxHeight: maxHeight
+    }, droppableProvided.droppableProps), items.map(function (item, index) {
+      var id = (0, _utils.getId)(item);
+      var indexOffset = positions.length;
+      positions[dndIndex] = [index];
+      dndIndex += 1;
+
+      if ((0, _utils.isCategory)(item)) {
+        item.items.forEach(function (_, subIndex) {
+          positions[dndIndex] = [index, subIndex];
+          dndIndex += 1;
+        });
+        return _react.default.createElement(_Category.default, _extends({}, item, {
+          key: id,
+          borderRadius: borderRadius,
+          showCheckbox: showCheckbox,
+          size: size,
+          indexOffset: indexOffset,
+          isDragEnabled: isDragEnabled
+        }));
+      }
 
-    return _react.default.createElement(_Option.default, _extends({}, item, {
-      key: id,
-      borderRadius: borderRadius,
-      showCheckbox: showCheckbox,
-      size: size
-    }));
+      return renderDraggable(item, dndIndex - 1);
+    }), droppableProvided.placeholder);
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions
   }))));

package/lib/atoms/OptionsList/index.test.js

@@ -385,5 +385,61 @@ describe('OptionsList', function () {
         expect(baseElement).toMatchSnapshot();
       });
     });
+    describe('drag and drop', function () {
+      it('has draggable attributes', function () {
+        var mockedFn = jest.fn();
+
+        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render12.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).toHaveAttribute('draggable');
+        });
+      });
+      it('does not have draggable attributes when onDragEnd is not provided', function () {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size
+        }))),
+            getByText = _render13.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).not.toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).not.toHaveAttribute('draggable');
+        });
+      }); // TODO: re-enable once migrated to pragmatic-drag-and-drop
+
+      it.skip('calls onDragEnd when drag ends', function () {
+        var mockedFn = jest.fn();
+
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render14.getByText;
+
+        var draggableElement = getByText(items[0].label).closest('li');
+        var dropTarget = getByText('Option 2').closest('li');
+
+        _react2.fireEvent.dragStart(draggableElement);
+
+        _react2.fireEvent.dragEnter(dropTarget);
+
+        _react2.fireEvent.dragOver(dropTarget);
+
+        _react2.fireEvent.drop(dropTarget);
+
+        _react2.fireEvent.dragEnd(draggableElement);
+
+        expect(mockedFn).toHaveBeenCalled();
+      });
+    });
   });
 });

package/lib/atoms/OptionsList/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA6ExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAgFxD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -41,7 +41,8 @@ schema.makePropTypes = function () {
     selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
     role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
     itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
-    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small')
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small'),
+    onDragEnd: _reactDesc.PropTypes.func.description("If present, enables Drag-and-Drop sorting. This function will be called after the order of rows changes when a row is dragged and dropped. It is called with 2 arguments: the index from where it's dragged, and the index to where it's dropped. If there are grouped rows then each argument is an array where the first element is the group index and the second the row index inside the group. See below for function signature.")
   };
 };
 

package/lib/atoms/OptionsList/styles.d.ts

@@ -0,0 +1,45 @@
+export declare const Container: import("styled-components").StyledComponent<"ul", any, Pick<Partial<{
+    height?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    maxHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    maxWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    minHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    minWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    width?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+}>, "maxHeight" | "maxWidth" | "minWidth">, never>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC"}

package/lib/atoms/OptionsList/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var Container = _styledComponents.default.ul.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1rytot8-0"
+})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
+  var minWidth = _ref.minWidth;
+  return minWidth ? "\n      min-width: ".concat(minWidth, ";\n") : '';
+}, function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth ? "\n      max-width: ".concat(maxWidth, ";\n") : '';
+}, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
+  return maxHeight ? "\n      max-height: ".concat(maxHeight, ";\n") : '';
+});
+
+exports.Container = Container;

package/lib/atoms/OptionsList/types.d.ts

@@ -1,6 +1,7 @@
 import { BorderRadiusProperty } from 'csstype';
 import { KeyboardEvent } from 'react';
 import { IconProps } from '@decisiv/iconix';
+import { DraggableProvidedDragHandleProps, DraggableProvidedDraggableProps } from 'react-beautiful-dnd';
 import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
@@ -41,6 +42,8 @@ export interface Category {
     label: string;
     showCheckbox?: boolean;
     size?: Size;
+    indexOffset?: number;
+    isDragEnabled?: boolean;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -54,6 +57,10 @@ interface BaseOption {
     showCheckbox?: boolean;
     meta?: Record<any, unknown>;
     size?: Size;
+    providerRef?: React.Ref<HTMLLIElement>;
+    draggableProps?: DraggableProvidedDraggableProps;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
+    isDragEnabled?: boolean;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -85,10 +92,14 @@ export interface OptionsListProps extends OptionsListDimensions {
     role?: string;
     itemRole?: string;
     pointerEvents?: string;
+    onDragEnd?: (from: number | number[], to: number | number[]) => void;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
-export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
+export interface StyledCategoryProps {
     size: Size;
+    ref?: React.Ref<HTMLLIElement>;
+    ariaDisabled?: boolean;
+    role?: string;
 }
 export interface ContainerProps {
     borderRadius?: BorderRadiusProperty<string>;

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}

package/lib/components/Badge/styles.js

@@ -38,7 +38,8 @@ var PALETTE_MAPPER = {
 var colorModifiers = function colorModifiers(props) {
   var _props$palette = props.palette,
       palette = _props$palette === void 0 ? 'bright' : _props$palette,
-      color = props.color;
+      _props$color = props.color,
+      color = _props$color === void 0 ? 'information' : _props$color;
 
   if (color && color in _commonUIColors.commonUIColors) {
     var baseColor = _commonUIColors.commonUIThreeShadeColors[color];

package/lib/components/Badge/types.d.ts

@@ -22,6 +22,7 @@ export declare const propTypes: {
 export declare const defaultProps: {
     size: string;
     variant: string;
+    color: string;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/components/Badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;CAGxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EACL,iBAAiB,EAElB,MAAM,4BAA4B,CAAC;AAIpC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,oBAAY,QAAQ,GAAG,cAAc,CAAC;AAItC,MAAM,WAAW,UAAU;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC9B;AAED,iBAAS,gBAAgB,CACvB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,SAAS,EACnB,aAAa,EAAE,OAAO,GACrB,KAAK,GAAG,IAAI,CAqBd;AAED,eAAO,MAAM,SAAS;;;;;CAKrB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC"}

package/lib/components/Badge/types.js

@@ -43,6 +43,7 @@ var propTypes = {
 exports.propTypes = propTypes;
 var defaultProps = {
   size: 'medium',
-  variant: 'round'
+  variant: 'round',
+  color: 'information'
 };
 exports.defaultProps = defaultProps;

package/lib/components/Combobox/index.test.js

@@ -854,7 +854,8 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument();
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+      expect(li).toHaveAttribute('aria-selected', 'true');
     });
     describe('when typing', function () {
       it('does NOT update the selection automatically', function () {
@@ -887,7 +888,8 @@ describe('Combobox', function () {
         });
 
         expect(onChangeValue).toHaveBeenCalledTimes(1);
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+        var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+        expect(li).toHaveAttribute('aria-selected', 'true');
       });
     });
     describe('when clicking the clear button', function () {
@@ -958,7 +960,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender, li, li2;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -1019,10 +1021,12 @@ describe('Combobox', function () {
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement;
+              expect(li).toHaveAttribute('aria-selected', 'true');
+              li2 = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+              expect(li2).toHaveAttribute('aria-selected', 'false');
 
-            case 23:
+            case 25:
             case "end":
               return _context.stop();
           }

package/lib/components/LeftNav/Item/NavExpandedItem/index.js

@@ -37,6 +37,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
+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); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -52,7 +54,8 @@ function MenuItem(props) {
       toggleExpanded = _useMenuItem.toggleExpanded;
 
   var disabled = item.disabled,
-      text = item.text;
+      text = item.text,
+      target = item.target;
 
   var _useConfig = (0, _ConfigProvider.useConfig)(),
       LinkComponent = _useConfig.linkRenderer;
@@ -63,7 +66,9 @@ function MenuItem(props) {
           _ = _ref.navVariant,
           linkProps = _objectWithoutProperties(_ref, ["active", "navVariant"]);
 
-      return _react.default.createElement(LinkComponent, linkProps);
+      return _react.default.createElement(LinkComponent, _extends({
+        target: target
+      }, linkProps));
     }).withConfig({
       displayName: "NavExpandedItem",
       componentId: "ep2orz-0"

package/lib/components/LeftNav/index.test.js

@@ -96,13 +96,29 @@ describe('LeftNav', function () {
 
     expect(container).toMatchSnapshot();
   });
+  it('has the expected target attribute', function () {
+    var props = _objectSpread({}, defaultProps, {
+      items: [{
+        icon: _iconix.default.Home,
+        text: 'Home',
+        path: '/',
+        target: '_blank'
+      }]
+    });
+
+    var _render2 = render(_react2.default.createElement(_.default, props)),
+        getByText = _render2.getByText;
+
+    var anchor = getByText('Home').closest('a');
+    expect(anchor).toHaveAttribute('target', '_blank');
+  });
   describe('opening a sub menu', function () {
     describe('where the top menu item has NO link', function () {
       test('clicking the label toggles the sub menu', function () {
-        var _render2 = render(_react2.default.createElement(_.default, defaultProps)),
-            container = _render2.container,
-            getByText = _render2.getByText,
-            queryByText = _render2.queryByText;
+        var _render3 = render(_react2.default.createElement(_.default, defaultProps)),
+            container = _render3.container,
+            getByText = _render3.getByText,
+            queryByText = _render3.queryByText;
 
         var nonLinkWithSubItems = items[2];
         expect(queryByText(nonLinkWithSubItems.items[0].text)).toBe(null);
@@ -115,9 +131,9 @@ describe('LeftNav', function () {
     });
     describe('where the top menu item has a link', function () {
       test('clicking the label changes route but does not expand the sub menu', function () {
-        var _render3 = render(_react2.default.createElement(_.default, defaultProps)),
-            getByText = _render3.getByText,
-            queryByText = _render3.queryByText;
+        var _render4 = render(_react2.default.createElement(_.default, defaultProps)),
+            getByText = _render4.getByText,
+            queryByText = _render4.queryByText;
 
         var linkWithSubItems = items[3];
         expect(queryByText(linkWithSubItems.items[0].text)).toBe(null);
@@ -127,10 +143,10 @@ describe('LeftNav', function () {
         expect(queryByText(linkWithSubItems.items[0].text)).toBe(null);
       });
       test('clicking expander button toggles the sub menu', function () {
-        var _render4 = render(_react2.default.createElement(_.default, defaultProps)),
-            container = _render4.container,
-            queryByText = _render4.queryByText,
-            getByRole = _render4.getByRole;
+        var _render5 = render(_react2.default.createElement(_.default, defaultProps)),
+            container = _render5.container,
+            queryByText = _render5.queryByText,
+            getByRole = _render5.getByRole;
 
         var linkWithSubItems = items[3];
         var itemLink = queryByText(linkWithSubItems.text);
@@ -149,22 +165,22 @@ describe('LeftNav', function () {
       (0, _setupTests.mockMatchMedia)(_useNav.MEDIA_QUERIES[1]);
     });
     it('renders as expected', function () {
-      var _render5 = render(_react2.default.createElement(_.default, defaultProps)),
-          container = _render5.container;
+      var _render6 = render(_react2.default.createElement(_.default, defaultProps)),
+          container = _render6.container;
 
       expect(container).toMatchSnapshot();
     });
     describe('when the top menu item has sub items', function () {
       test('focusing on the top menu item shows the sub items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _render6, queryByText, linkWithSubItems, itemLink;
+        var _render7, queryByText, linkWithSubItems, itemLink;
 
         return regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _render6 = render(_react2.default.createElement(_.default, _extends({}, defaultProps, {
+                _render7 = render(_react2.default.createElement(_.default, _extends({}, defaultProps, {
                   navExpandedState: _useNav.NAV_EXPANDED_STATES.COLLAPSED_X
-                }))), queryByText = _render6.queryByText;
+                }))), queryByText = _render7.queryByText;
                 linkWithSubItems = items[3];
                 itemLink = queryByText(linkWithSubItems.text);
                 expect(queryByText(linkWithSubItems.items[0].text)).not.toBeInTheDocument();
@@ -199,9 +215,9 @@ describe('LeftNav', function () {
     });
     describe('where the top menu item has a link', function () {
       test('clicking the label changes route but does not expand the sub menu', function () {
-        var _render7 = render(_react2.default.createElement(_.default, defaultProps)),
-            getByText = _render7.getByText,
-            queryByText = _render7.queryByText;
+        var _render8 = render(_react2.default.createElement(_.default, defaultProps)),
+            getByText = _render8.getByText,
+            queryByText = _render8.queryByText;
 
         var linkWithSubItems = items[3];
         expect(queryByText(linkWithSubItems.items[0].text)).toBe(null);

package/lib/components/LeftNav/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAuC,CAAC;AA6DpD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAuC,CAAC;AAmEpD,eAAe,MAAM,CAAC"}

package/lib/components/LeftNav/schema.js

@@ -23,12 +23,14 @@ schema.propTypes = {
     text: _reactDesc.PropTypes.string.description('The label for the menu item.').isRequired,
     path: _reactDesc.PropTypes.string.description('The path for an internal link. Can not be used with a `url` attribute.'),
     url: _reactDesc.PropTypes.string.description('The path for an external link. Can not be used with a `path` attribute.'),
+    target: _reactDesc.PropTypes.string.description('Specifies where to open the linked document'),
     items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
       active: _reactDesc.PropTypes.bool.description('Sets the menu item as active.'),
       disabled: _reactDesc.PropTypes.bool.description('Disables the menu subitem.'),
       text: _reactDesc.PropTypes.string.description('The label for the menu subitem.').isRequired,
       path: _reactDesc.PropTypes.string.description('The path for an internal link. Can not be used with a `url` attribute.'),
-      url: _reactDesc.PropTypes.string.description('The path for an external link. Can not be used with a `path` attribute.')
+      url: _reactDesc.PropTypes.string.description('The path for an external link. Can not be used with a `path` attribute.'),
+      target: _reactDesc.PropTypes.string.description('Specifies where to open the linked document')
     }).description('The definition for a subitem.')).description('An optional array of subitems.')
   }).description('The definition for items.')).description('An array of menu item definitions.').defaultValue('[]')
 };

package/lib/components/LeftNav/types.d.ts

@@ -5,6 +5,7 @@ declare type IconComponent = (props: IconProps) => JSX.Element;
 interface BaseMenuItem {
     active?: boolean;
     disabled?: boolean;
+    target?: HTMLAnchorElement['target'];
     text: string;
 }
 export interface MenuItemInternalLink extends BaseMenuItem {

package/lib/components/LeftNav/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAExE,oBAAY,eAAe,GAAG,aAAa,GAAG;IAC5C,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,YAAY,GAAG;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,2BAA2B,GAAG,oBAAoB,GAAG;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,SAAS,GACjB,eAAe,GACf,uBAAuB,GACvB,2BAA2B,CAAC;AAChC,oBAAY,UAAU,GAAG,SAAS,EAAE,CAAC;AAErC,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,EAAE,KAAK,CAAC;CAChB;AAED,oBAAY,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IACpD,wBAAwB,CAAC,EAAE,CACzB,gBAAgB,EAAE,MAAM,OAAO,mBAAmB,KAC/C,IAAI,CAAC;CACX"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAExE,oBAAY,eAAe,GAAG,aAAa,GAAG;IAC5C,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,YAAY,GAAG;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,2BAA2B,GAAG,oBAAoB,GAAG;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,SAAS,GACjB,eAAe,GACf,uBAAuB,GACvB,2BAA2B,CAAC;AAChC,oBAAY,UAAU,GAAG,SAAS,EAAE,CAAC;AAErC,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,EAAE,KAAK,CAAC;CAChB;AAED,oBAAY,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IACpD,wBAAwB,CAAC,EAAE,CACzB,gBAAgB,EAAE,MAAM,OAAO,mBAAmB,KAC/C,IAAI,CAAC;CACX"}

package/lib/components/Link/DisabledLink.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LinkRendererProps } from '../../providers/ConfigProvider';
-declare const _default: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "to"> & React.RefAttributes<HTMLAnchorElement>>, any, {
+declare const _default: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "target" | "to"> & React.RefAttributes<HTMLAnchorElement>>, any, {
     size?: "small" | "medium" | undefined;
 }, never>;
 export default _default;

package/lib/components/Table/Grip.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;
+interface GripProps {
+    marginRight?: string | number;
+    selected?: boolean;
+}
+declare const Grip: ({ marginRight, selected }: GripProps) => JSX.Element;
+export default Grip;
 //# sourceMappingURL=Grip.d.ts.map

package/lib/components/Table/Grip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Grip.tsx"],"names":[],"mappings":";;AAEA,wBAgBE"}
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Grip.tsx"],"names":[],"mappings":";AAEA,UAAU,SAAS;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,uDAmBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Table/Grip.js

@@ -9,10 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = function _default() {
+var Grip = function Grip(_ref) {
+  var marginRight = _ref.marginRight,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected;
+  var fillColor = selected ? '#fff' : '#1C6EE6';
   return _react.default.createElement("svg", {
     style: {
-      margin: '0 5px'
+      margin: '0 5px',
+      marginRight: marginRight
     },
     xmlns: "http://www.w3.org/2000/svg",
     width: "8",
@@ -23,8 +28,9 @@ var _default = function _default() {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M2 0.75C1.30964 0.75 0.75 1.30964 0.75 2C0.75 2.69036 1.30964 3.25 2 3.25C2.69036 3.25 3.25 2.69036 3.25 2C3.25 1.30964 2.69036 0.75 2 0.75ZM2 4.75C1.30964 4.75 0.75 5.30964 0.75 6C0.75 6.69036 1.30964 7.25 2 7.25C2.69036 7.25 3.25 6.69036 3.25 6C3.25 5.30964 2.69036 4.75 2 4.75ZM0.75 10C0.75 9.30964 1.30964 8.75 2 8.75C2.69036 8.75 3.25 9.30964 3.25 10C3.25 10.6904 2.69036 11.25 2 11.25C1.30964 11.25 0.75 10.6904 0.75 10ZM6 4.75C5.30964 4.75 4.75 5.30964 4.75 6C4.75 6.69036 5.30964 7.25 6 7.25C6.69036 7.25 7.25 6.69036 7.25 6C7.25 5.30964 6.69036 4.75 6 4.75ZM4.75 2C4.75 1.30964 5.30964 0.75 6 0.75C6.69036 0.75 7.25 1.30964 7.25 2C7.25 2.69036 6.69036 3.25 6 3.25C5.30964 3.25 4.75 2.69036 4.75 2ZM6 8.75C5.30964 8.75 4.75 9.30964 4.75 10C4.75 10.6904 5.30964 11.25 6 11.25C6.69036 11.25 7.25 10.6904 7.25 10C7.25 9.30964 6.69036 8.75 6 8.75ZM0.75 14C0.75 13.3096 1.30964 12.75 2 12.75C2.69036 12.75 3.25 13.3096 3.25 14C3.25 14.6904 2.69036 15.25 2 15.25C1.30964 15.25 0.75 14.6904 0.75 14ZM6 12.75C5.30964 12.75 4.75 13.3096 4.75 14C4.75 14.6904 5.30964 15.25 6 15.25C6.69036 15.25 7.25 14.6904 7.25 14C7.25 13.3096 6.69036 12.75 6 12.75Z",
-    fill: "#1C6EE6"
+    fill: fillColor
   }));
 };
 
+var _default = Grip;
 exports.default = _default;

package/lib/providers/ConfigProvider/utils/linkRenderer.d.ts

@@ -4,7 +4,8 @@ export interface LinkRendererProps {
     ref?: Ref<LinkRendererRef>;
     to: string;
     children?: ReactNode;
+    target?: HTMLAnchorElement['target'];
 }
-declare const linkRendererWithRef: React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "to"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const linkRendererWithRef: React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "target" | "to"> & React.RefAttributes<HTMLAnchorElement>>;
 export default linkRendererWithRef;
 //# sourceMappingURL=linkRenderer.d.ts.map

package/lib/providers/ConfigProvider/utils/linkRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linkRenderer.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/linkRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAE1D,oBAAY,eAAe,GAAG,iBAAiB,CAAC;AAWhD,MAAM,WAAW,iBAAiB;IAEhC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoBD,QAAA,MAAM,mBAAmB,sHAA2B,CAAC;AAErD,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"linkRenderer.d.ts","sourceRoot":"","sources":["../../../../src/providers/ConfigProvider/utils/linkRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAE1D,oBAAY,eAAe,GAAG,iBAAiB,CAAC;AAWhD,MAAM,WAAW,iBAAiB;IAEhC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACtC;AAoBD,QAAA,MAAM,mBAAmB,iIAA2B,CAAC;AAErD,eAAe,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.220",
+  "version": "2.0.1-alpha.222",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",