@decisiv/ui-components 2.0.1-alpha.99 → 2.0.2-alpha.2

package/lib/components/SearchInput/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/styles.ts"],"names":[],"mappings":";AAOA,OAAgB,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,YAAY,CAAC;AAM5D,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAatB,CAAC;AAEF,eAAO,MAAM,UAAU,sGAItB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAKvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAM7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkB5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAGvB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAezB,CAAC;AAEF,eAAO,MAAM,cAAc,6IAAkC,CAAC;AAE9D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAKhC,CAAC"}

package/lib/components/SearchInput/styles.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInputContainer = exports.WarningMessage = exports.SelectWrapper = exports.StyledInput = exports.TimesIconWrapper = exports.SearchIconWrapper = exports.ButtonGroup = exports.StyledBody = exports.StyledFlex = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _Message = _interopRequireDefault(require("../Message"));
+
+var _focusRingWithColor = _interopRequireDefault(require("../../utils/focusRingWithColor"));
+
+var _Input = _interopRequireDefault(require("../TextField/Input"));
+
+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; } }
+
+var StyledFlex = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__StyledFlex",
+  componentId: "rlmiu8-0"
+})(["align-items:center;[cursor='text']{height:", "px;> div{", ";padding-bottom:", ";}}"], function (_ref) {
+  var mediumSized = _ref.mediumSized;
+  return mediumSized ? 50 : 32;
+}, function (_ref2) {
+  var mediumSized = _ref2.mediumSized;
+  return !mediumSized && "padding-top: ".concat((0, _rem.default)(_spacing.default.base * 0.1));
+}, function (_ref3) {
+  var mediumSized = _ref3.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 0.6 : 0.1));
+});
+exports.StyledFlex = StyledFlex;
+var StyledBody = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__StyledBody",
+  componentId: "rlmiu8-1"
+})(["flex:1;align-items:center;height:inherit;"]);
+exports.StyledBody = StyledBody;
+var ButtonGroup = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__ButtonGroup",
+  componentId: "rlmiu8-2"
+})(["align-items:center;margin-right:", ";cursor:default;"], function (_ref4) {
+  var mediumSized = _ref4.mediumSized;
+  return (0, _rem.default)(_spacing.default.base * (mediumSized ? 1 : 0.3));
+});
+exports.ButtonGroup = ButtonGroup;
+var SearchIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__SearchIconWrapper",
+  componentId: "rlmiu8-3"
+})(["color:", ";margin-right:", ";margin-left:", ";align-items:center;"], (0, _toColorString.default)(_color.default.base.alaskanHusky), (0, _rem.default)(_spacing.default.base * 1.5), function (_ref5) {
+  var inputSize = _ref5.inputSize;
+  return inputSize === 'small' ? 0 : (0, _rem.default)(_spacing.default.base * 0.5);
+});
+exports.SearchIconWrapper = SearchIconWrapper;
+var TimesIconWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__TimesIconWrapper",
+  componentId: "rlmiu8-4"
+})(["height:inherit;visibility:", ";margin-right:", ";color:", ";align-items:center;border:1px solid transparent;border-radius:2px;&:hover{color:", ";}&:focus{outline:none;border:1px solid ", ";", "}"], function (_ref6) {
+  var visible = _ref6.visible;
+  return visible ? 'visible' : 'hidden';
+}, (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.status.danger.medium), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40));
+exports.TimesIconWrapper = TimesIconWrapper;
+var StyledInput = (0, _styledComponents.default)(_Input.default).withConfig({
+  displayName: "styles__StyledInput",
+  componentId: "rlmiu8-5"
+})(["padding:0;color:", ";"], (0, _toColorString.default)(_color.default.base.charcoal));
+exports.StyledInput = StyledInput;
+var SelectWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "styles__SelectWrapper",
+  componentId: "rlmiu8-6"
+})(["margin-right:-1px;", " &:hover,&:active,&:focus-within{z-index:100;}"], function (_ref7) {
+  var width = _ref7.width;
+  return width && (0, _styledComponents.css)(["max-width:", ";min-width:", ";"], width, width);
+});
+exports.SelectWrapper = SelectWrapper;
+var WarningMessage = (0, _styledComponents.default)(_Message.default).withConfig({
+  displayName: "styles__WarningMessage",
+  componentId: "rlmiu8-7"
+})([""]);
+exports.WarningMessage = WarningMessage;
+var SearchInputContainer = (0, _styledComponents.default)(_Flex.default).attrs({
+  flexDirection: 'column'
+}).withConfig({
+  displayName: "styles__SearchInputContainer",
+  componentId: "rlmiu8-8"
+})(["gap:", ";flex:1;"], (0, _rem.default)(_spacing.default.base * 0.5));
+exports.SearchInputContainer = SearchInputContainer;

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

@@ -0,0 +1,39 @@
+import React, { FormEvent } from 'react';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+import { FlexComponentProps } from '../Flex';
+import { DropdownListItem } from '../DropdownList';
+export interface SearchItem<T> {
+    label: string;
+    value: T;
+}
+export declare type Size = 'medium' | 'small';
+export declare type SearchOn = 'submit' | 'change';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
+    zIndex?: number;
+    tooltipZIndex?: number;
+    searchDisabled?: boolean;
+    searchOn?: SearchOn;
+    searchByDefaultValue?: string;
+    searchByLabel?: string;
+    searchByName?: string;
+    searchByOptions?: DropdownListItem[];
+    searchByValue?: string;
+    searchByWidth?: string;
+    searchInputRef?: React.MutableRefObject<HTMLInputElement | null>;
+    onSearchByChange?: ((event: FormEvent<HTMLButtonElement>) => void) & ((value: string) => void);
+    onSearch?: (value: string) => void;
+    onSelectItem?: (value: any) => void;
+    onBlur?: React.FocusEventHandler;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    size: Size;
+    value: string;
+}
+export interface SearchFieldProps extends Omit<SearchInputProps, 'loader'> {
+    observedElementRef: React.MutableRefObject<any>;
+}
+export interface StyledFlexProps extends FlexComponentProps {
+    width: number | null;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAChE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}

package/lib/components/SearchInput/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Select/Target.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAmBvE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA8GjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAmBvE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAgHjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAGvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/Target.js

@@ -56,7 +56,8 @@ var TargetButton = (0, _styledComponents.default)(_BaseButton.default).withConfi
 })(["background:transparent;border:transparent;cursor:inherit;font-size:", ";font-weight:", ";height:24px;line-height:140%;margin-right:", "px;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;&:active,&:focus{outline:none;}"], (0, _rem.default)(_typography.default.size.alias.default), _typography.default.weight.alias.medium, _spacing.default.base * 0.5);
 var ExpandedIndicatorContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   alignItems: 'center',
-  paddingX: 1
+  paddingLeft: 0.7,
+  paddingRight: 1
 }).withConfig({
   displayName: "Target__ExpandedIndicatorContainer",
   componentId: "sc-1t0verh-2"
@@ -77,6 +78,9 @@ function Target(_ref, ref) {
   return _react.default.createElement(TargetContainer, null, _react.default.createElement(TargetButton, _extends({}, rest, {
     ref: ref
   }), children), hasClearButton && !readOnly && _react.default.createElement(_Button.default, {
+    style: {
+      padding: 0
+    },
     "aria-label": translate(clearButtonLabel, 'select.clearButtonLabel', {
       label: inputFieldLabel
     }),

package/lib/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyPjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AA8PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/index.js

@@ -72,6 +72,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function Select(props, ref) {
   var actions = props.actions,
       clearButtonLabel = props.clearButtonLabel,
+      _props$hideClearButto = props.hideClearButton,
+      hideClearButton = _props$hideClearButto === void 0 ? false : _props$hideClearButto,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -85,7 +87,8 @@ function Select(props, ref) {
       options = props.options,
       renderOptionLabel = props.renderOptionLabel,
       propValue = props.value,
-      zIndex = props.zIndex;
+      zIndex = props.zIndex,
+      containerSelector = props.containerSelector;
   var fallbackSelectRef = (0, _react.useRef)(null);
   var finalSelectRef = ref || fallbackSelectRef;
   var inputId = (0, _useUniqueId.default)(id, 'select-');
@@ -245,7 +248,7 @@ function Select(props, ref) {
       "aria-owns": dropdownListId,
       clearButtonLabel: clearButtonLabel,
       disabled: disabled,
-      hasClearButton: Boolean(selectedValue),
+      hasClearButton: hideClearButton ? false : Boolean(selectedValue),
       id: targetId,
       inputFieldLabel: label,
       isPopoverVisible: isPopoverVisible,
@@ -273,7 +276,8 @@ function Select(props, ref) {
       showArrow: false,
       target: popoverTargetRef,
       visible: isPopoverVisible,
-      zIndex: zIndex
+      zIndex: zIndex,
+      containerSelector: containerSelector
     }));
   }));
 }

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

@@ -187,16 +187,40 @@ describe('Select', function () {
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
+    describe('when "hideClearButton" is false', function () {
+      it('shows the clear button', function () {
+        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: false,
+          clearButtonLabel: "clear selection"
+        }))),
+            getByLabelText = _render7.getByLabelText;
+
+        expect(getByLabelText(/clear selection/i)).toBeInTheDocument();
+      });
+    });
+    describe('when "hideClearButton" is true', function () {
+      it('does not show the clear button', function () {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          defaultValue: cat0Opt0.id,
+          hideClearButton: true,
+          clearButtonLabel: "clear selection"
+        }))),
+            queryByLabelText = _render8.queryByLabelText;
+
+        expect(queryByLabelText(/clear selection/i)).not.toBeInTheDocument();
+      });
+    });
     describe('clicking an option', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render7.baseElement,
-            getByText = _render7.getByText;
+            baseElement = _render9.baseElement,
+            getByText = _render9.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -205,11 +229,11 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('automatically updates the option label inside the input field', function () {
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
+            baseElement = _render10.baseElement,
+            getByText = _render10.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -222,32 +246,32 @@ describe('Select', function () {
   });
   describe('when label hidden', function () {
     it('does not display the label element', function () {
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultvalue: opt1.id,
         hideLabel: true
       }))),
-          getByText = _render9.getByText;
+          getByText = _render11.getByText;
 
       expect(getByText(defaultProps.label, {
         selector: 'span'
       })).not.toBeVisible();
     });
     it('does display the input related to the label', function () {
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: opt1.id,
         hideLabel: true
       }))),
-          getByLabelText = _render10.getByLabelText;
+          getByLabelText = _render12.getByLabelText;
 
       expect(getByLabelText(defaultProps.label)).toBeVisible();
     });
   });
   describe('when component is controlled', function () {
     it('displays the option label matching the value inside the input field', function () {
-      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render11.getByText;
+          getByText = _render13.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -255,12 +279,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render12.baseElement,
-            getByText = _render12.getByText;
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -269,12 +293,12 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('does NOT automatically update the option label inside the input field', function () {
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render13.baseElement,
-            getByText = _render13.getByText,
-            queryByText = _render13.queryByText;
+            baseElement = _render15.baseElement,
+            getByText = _render15.getByText,
+            queryByText = _render15.queryByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA8DnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Select/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAwEnD,eAAe,MAAM,CAAC"}

package/lib/components/Select/schema.js

@@ -23,7 +23,9 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'Select'
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount']), {
+  hideClearButton: _reactDesc.PropTypes.bool.description('Whether or not to hide the clear button after selecting an item').defaultValue('false'),
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
+  containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the Select should be rendered in, or \"parent\" to render the Select in-place.").defaultValue('body'),
   defaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default.'),
   actions: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object), _reactDesc.PropTypes.shape({
     left: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object),

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

@@ -11,6 +11,7 @@ interface BaseSelectProps extends ButtonHTMLAttributes<SelectRef>, Omit<BaseInpu
     onKeyDown?: KeyboardEventHandler;
 }
 export declare type SelectProps = BaseSelectProps & {
+    hideClearButton?: boolean;
     clearButtonLabel?: string;
     defaultValue?: string;
     name: string;
@@ -20,6 +21,7 @@ export declare type SelectProps = BaseSelectProps & {
     options: Items;
     value?: string;
     zIndex?: PopoverProps['zIndex'];
+    containerSelector?: string;
 };
 export interface TargetProps extends ButtonHTMLAttributes<SelectRef>, Pick<InputComponentProps, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'readOnly' | 'ref' | 'value'> {
     clearButtonLabel?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,oBAAY,SAAS,GAAG,iBAAiB,CAAC;AAE1C,UAAU,eACR,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,oBAAoB,GAAG,OAAO,CACvE,EACD,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,mBAAmB,CAAC;IACzD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,oBAAY,WAAW,GAAG,eAAe,GAAG;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,SAAS,CAAC,EACrC,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC"}

package/lib/components/SelectDate/Target.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAmBvE,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAgHjE,QAAA,MAAM,uBAAuB,EAAE,sBAAsB,CACnD,cAAc,EACd,sBAAsB,CACQ,CAAC;AAGjC,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"Target.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/Target.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAO,sBAAsB,EAAc,MAAM,OAAO,CAAC;AAmBvE,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAkHjE,QAAA,MAAM,uBAAuB,EAAE,sBAAsB,CACnD,cAAc,EACd,sBAAsB,CACQ,CAAC;AAGjC,eAAe,uBAAuB,CAAC"}

package/lib/components/SelectDate/Target.js

@@ -56,7 +56,8 @@ var TargetButton = (0, _styledComponents.default)(_BaseButton.default).withConfi
 })(["background:transparent;border:transparent;cursor:inherit;font-size:", ";font-weight:", ";height:24px;line-height:140%;margin-right:", "px;overflow:hidden;padding:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;&:active,&:focus{outline:none;}"], (0, _rem.default)(_typography.default.size.alias.default), _typography.default.weight.alias.medium, _spacing.default.base * 0.5);
 var ExpandedIndicatorContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   alignItems: 'center',
-  paddingX: 1
+  paddingLeft: 0.7,
+  paddingRight: 1
 }).withConfig({
   displayName: "Target__ExpandedIndicatorContainer",
   componentId: "ks9oxf-2"
@@ -78,6 +79,9 @@ function SelectDateTarget(_ref, ref) {
     type: "button",
     ref: ref
   }), children), hasClearButton && !readOnly && _react.default.createElement(_Button.default, {
+    style: {
+      padding: 0
+    },
     "aria-label": translate(clearButtonLabel, 'selectDate.clearButtonLabel', {
       label: inputFieldLabel
     }),

package/lib/components/SelectDate/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/index.tsx"],"names":[],"mappings":"AAMA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAsBf,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAQ,MAAM,SAAS,CAAC;AAIjE,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AAiQxC,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,cAAc,EACd,gBAAgB,CACQ,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/index.tsx"],"names":[],"mappings":"AAMA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAsBf,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAQ,MAAM,SAAS,CAAC;AAIjE,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AAqQxC,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,cAAc,EACd,gBAAgB,CACQ,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}

package/lib/components/SelectDate/index.js

@@ -93,6 +93,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function SelectDate(props, ref) {
   var clearButtonLabel = props.clearButtonLabel,
+      containerSelector = props.containerSelector,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -224,7 +225,9 @@ function SelectDate(props, ref) {
       setIsPopoverVisible(false);
     }
   }, [isPopoverVisible]);
-  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
+  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover, {
+    capture: true
+  });
   var inputContainerRefs = (0, _compact.default)([inputContainerRef, popoverTargetRef]);
   /**
    * Triggers onShow/onHide callbacks representing wether the Popover is open or not.
@@ -280,12 +283,13 @@ function SelectDate(props, ref) {
       showArrow: false,
       target: popoverTargetRef,
       visible: isPopoverVisible,
-      zIndex: zIndex
+      zIndex: zIndex,
+      containerSelector: containerSelector
     }, _react.default.createElement(_Grid.default.Container, {
       ref: popoverContentRef
     }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Calendar.default, {
       focusOnRender: focusCalendarOnRender.current,
-      minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+      width: "".concat((dimensions.width || 0) + 1, "px"),
       onChange: handleChangeValue,
       selected: selectedDate || undefined,
       disabledDateRules: disabledDateRules

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAoCnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAyCnD,eAAe,MAAM,CAAC"}

package/lib/components/SelectDate/schema.js

@@ -24,6 +24,7 @@ var schema = (0, _reactDesc.describe)({
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount']), {
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
+  containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the SelectDate should be rendered in, or \"parent\" to render the SelectDate in-place.").defaultValue('body'),
   defaultValue: _reactDesc.PropTypes.instanceOf(Date).description('The date should be selected by default.'),
   onChange: _reactDesc.PropTypes.func.description('Called with either the selected date or `undefined`'),
   onHide: _reactDesc.PropTypes.func.description('A callback which is triggered when the popover is closed'),

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

@@ -23,6 +23,7 @@ export interface BaseSelectDateProps extends Omit<ButtonHTMLAttributes<TSelectDa
     zIndex?: PopoverProps['zIndex'];
     name: string;
     clearButtonLabel?: string;
+    containerSelector?: string;
 }
 export declare type TSelectDateProps = BaseSelectDateProps & {
     defaultValue?: Date;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,cAAc,GAAG,iBAAiB,CAAC;AAE/C,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,cAAc,CAAC,EAC1C,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,EACD,IAAI,CACF,mBAAmB,EACjB,UAAU,GACV,cAAc,GACd,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,OAAO,CACV;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,oBAAY,gBAAgB,GAAG,mBAAmB,GAAG;IACnD,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDate/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,oBAAY,cAAc,GAAG,iBAAiB,CAAC;AAE/C,MAAM,WAAW,sBACf,SAAQ,oBAAoB,CAAC,cAAc,CAAC,EAC1C,IAAI,CACF,mBAAmB,EACnB,UAAU,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CACxE;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,mBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,cAAc,CAAC,EACpC,cAAc,GAAG,UAAU,GAAG,OAAO,CACtC,EACD,IAAI,CACF,mBAAmB,EACjB,UAAU,GACV,cAAc,GACd,WAAW,GACX,UAAU,GACV,oBAAoB,GACpB,OAAO,CACV;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,oBAAY,gBAAgB,GAAG,mBAAmB,GAAG;IACnD,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC"}

package/lib/components/SelectDateRange/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/index.tsx"],"names":[],"mappings":"AAKA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAyBf,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAQ,MAAM,SAAS,CAAC;AAI3E,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AA0TxC,QAAA,MAAM,sBAAsB,EAAE,sBAAsB,CAClD,mBAAmB,EACnB,qBAAqB,CACQ,CAAC;AAQhC,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/index.tsx"],"names":[],"mappings":"AAKA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAyBf,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAQ,MAAM,SAAS,CAAC;AAI3E,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AA8TxC,QAAA,MAAM,sBAAsB,EAAE,sBAAsB,CAClD,mBAAmB,EACnB,qBAAqB,CACQ,CAAC;AAQhC,eAAe,sBAAsB,CAAC"}

package/lib/components/SelectDateRange/index.js

@@ -106,6 +106,7 @@ var ButtonsRow = (0, _styledComponents.default)(_Grid.default.Row).withConfig({
 
 function SelectDateRange(props, ref) {
   var clearButtonLabel = props.clearButtonLabel,
+      containerSelector = props.containerSelector,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -257,7 +258,9 @@ function SelectDateRange(props, ref) {
     event.stopPropagation();
     closePopover();
   }, [closePopover]);
-  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover);
+  (0, _useClickOutside.default)([popoverContentRef], handleClickOutsidePopover, {
+    capture: true
+  });
   var inputContainerRefs = (0, _compact.default)([inputContainerRef, popoverTargetRef]);
   /**
    * Triggers onShow/onHide callbacks representing wether the Popover is open or not.
@@ -307,6 +310,7 @@ function SelectDateRange(props, ref) {
       readOnly: readOnly,
       ref: targetRef
     }, value), _react.default.createElement(_Popover.default, {
+      containerSelector: containerSelector,
       borderRadius: "0 0 2px 2px",
       manageEvents: false,
       placement: "bottom",
@@ -318,7 +322,7 @@ function SelectDateRange(props, ref) {
       ref: popoverContentRef
     }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Calendar.default, {
       focusOnRender: focusCalendarOnRender.current,
-      minWidth: "".concat((dimensions.width || 0) + 1, "px"),
+      width: "".concat((dimensions.width || 0) + 1, "px"),
       onChange: handleChangeValue,
       selected: selectedRange || undefined,
       disabledDateRules: disabledDateRules,

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA2CnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SelectDateRange/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAgDnD,eAAe,MAAM,CAAC"}

package/lib/components/SelectDateRange/schema.js

@@ -25,6 +25,7 @@ var schema = (0, _reactDesc.describe)({
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'onChange', 'showCharacterCount', 'value']), {
   clearButtonLabel: _reactDesc.PropTypes.string.description("A hidden label value for the clear button. The select component's label is available within the string for clarity.").defaultValue('Clear {label} value'),
   defaultValues: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.instanceOf(Date)).description('An array of two `Date` values indicating the start and the end of the range that should be selected by default.'),
+  containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the SelectDateRange should be rendered in, or \"parent\" to render the SelectDateRange in-place.").defaultValue('body'),
   onChange: _reactDesc.PropTypes.func.description('Called with an array of two `Date` values indicating the start and the end of the selected range when the `apply` button is clicked or with `undefined` when the value is cleared'),
   onHide: _reactDesc.PropTypes.func.description('A callback which is triggered when the popover is closed'),
   onShow: _reactDesc.PropTypes.func.description('A callback which is triggered when the popover is opened'),

package/lib/components/StepTracker/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface StepTrackerProps {
+    activeStep: number;
+    steps: string[];
+}
+declare function StepTracker({ activeStep, steps, }: StepTrackerProps): JSX.Element;
+declare namespace StepTracker {
+    var propTypes: any;
+}
+export default StepTracker;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/StepTracker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/StepTracker/index.tsx"],"names":[],"mappings":";AAiBA,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,iBAAwB,WAAW,CAAC,EAClC,UAAc,EACd,KAAU,GACX,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuChC;kBA1CuB,WAAW;;;eAAX,WAAW"}

package/lib/components/StepTracker/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = StepTracker;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+
+var _Check = _interopRequireDefault(require("@decisiv/iconix/lib/components/Check"));
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function StepTracker(_ref) {
+  var _ref$activeStep = _ref.activeStep,
+      activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
+      _ref$steps = _ref.steps,
+      steps = _ref$steps === void 0 ? [] : _ref$steps;
+  return _react.default.createElement(_styles.StepTrackerContainer, null, steps.map(function (title, index) {
+    var isActive = index + 1 === activeStep;
+    var isCompleted = activeStep > index + 1;
+    var isNextActive = index + 2 === activeStep;
+    var isNextCompleted = activeStep > index + 2;
+    var labelShade = isCompleted || isActive ? 0 : 1;
+    return _react.default.createElement(_styles.StepWrapper, {
+      key: (0, _uniqueId.default)("step-".concat(index))
+    }, _react.default.createElement(_Flex.default, {
+      alignItems: "center"
+    }, _react.default.createElement(_styles.StepSeparator, {
+      active: isActive,
+      completed: isCompleted,
+      hide: index === 0
+    }), _react.default.createElement(_styles.StepNumber, {
+      active: isActive,
+      completed: isCompleted
+    }, isCompleted ? _react.default.createElement(_Check.default, {
+      size: "small"
+    }) : index + 1), _react.default.createElement(_styles.StepSeparator, {
+      active: isNextActive,
+      completed: isNextCompleted,
+      hide: index === steps.length - 1
+    })), _react.default.createElement(_styles.StepTitleContainer, null, _react.default.createElement(_styles.StepTitle, {
+      shade: labelShade
+    }, title)));
+  }));
+}
+
+StepTracker.propTypes = _schema.default.propTypes;