@decisiv/ui-components 2.0.1-alpha.135 → 2.0.1-alpha.139

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

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Option.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EACL,WAAW,EAMZ,MAAM,SAAS,CAAC;AA+MjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA4G/C;;AAED,wBAAkC"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/Option.tsx"],"names":[],"mappings":"AAOA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,EACL,WAAW,EAMZ,MAAM,SAAS,CAAC;AA8NjB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsH/C;;AAED,wBAAkC"}

package/lib/atoms/OptionsList/Option.js

@@ -60,7 +60,12 @@ var StyledLink = (0, _styledComponents.default)(_Link.default).withConfig({
 var Container = _styledComponents.default.li.withConfig({
   displayName: "Option__Container",
   componentId: "sc-679ny4-1"
-})(["&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";pointer-events:none;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-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(7), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _styleModifiers.when)('compact', (0, _styledComponents.css)(["padding:", ";"], "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)))), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.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)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40)); // This is used below to silence a React warning about
+})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;padding:", ";pointer-events:none;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)(_color.default.interaction.pacificOcean), "".concat((0, _rem.default)(7), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(7), " ").concat((0, _rem.default)(10)), (0, _styleModifiers.when)('compact', (0, _styledComponents.css)(["padding:", ";"], "".concat((0, _rem.default)(5), " ").concat((0, _rem.default)(20), " ").concat((0, _rem.default)(5), " ").concat((0, _rem.default)(10)))), (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.indianOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean15), (0, _toColorString.default)(_color.default.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)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)(_color.default.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _focusRingWithColor.default)(_color.default.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_color.default.base.snowWhite), (0, _toColorString.default)(_color.default.opacity.charcoal40));
+
+var StyleLabelWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Option__StyleLabelWrapper",
+  componentId: "sc-679ny4-2"
+})(["display:flex;flex:1;flex-direction:column;"]); // This is used below to silence a React warning about
 // having a controlled input without a change handler.
 
 
@@ -98,7 +103,7 @@ function DecorationComponent(props) {
 
 var DecorationComponentContainer = _styledComponents.default.div.withConfig({
   displayName: "Option__DecorationComponentContainer",
-  componentId: "sc-679ny4-2"
+  componentId: "sc-679ny4-3"
 })(["", ";"], (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["opacity:0.3;img{opacity:0.3;}"]))); // We always render the checkbox/radio inputs so that regular form
 // submission (i.e. one not handled programmatically) still works.
 
@@ -109,6 +114,7 @@ function Option(props) {
       decoration = props.decoration,
       disabled = props.disabled,
       borderRadius = props.borderRadius,
+      labelDetails = props.labelDetails,
       _props$showCheckbox = props.showCheckbox,
       showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox;
   var decorationType = (0, _get.default)(decoration, 'type');
@@ -183,13 +189,19 @@ function Option(props) {
   }, _react.default.createElement(DecorationComponent, decoration)), renderOptionLabel ? renderOptionLabel({
     id: id,
     label: label,
+    labelDetails: labelDetails,
     value: props.value,
     disabled: disabled,
     meta: props.meta
-  }) : _react.default.createElement(_Typography.P, {
+  }) : _react.default.createElement(StyleLabelWrapper, null, _react.default.createElement(_Typography.P, {
     as: "span",
     color: "inherit"
-  }, label)));
+  }, label), labelDetails && _react.default.createElement(_Typography.P, {
+    as: "span",
+    shade: 1,
+    size: "small",
+    id: "optionLabelDetails"
+  }, labelDetails))));
 }
 
 var _default = _react.default.memo(Option);

package/lib/atoms/OptionsList/index.js

@@ -233,7 +233,7 @@ function OptionsList(props, forwardedRef) {
   }, [containerRef, activeId, inputMethod, previousActiveId]);
 
   var setContainerRefFunc = function setContainerRefFunc(el) {
-    _react.forwardRef && (0, _assignRef.default)(forwardedRef, el);
+    (0, _assignRef.default)(forwardedRef, el);
     setContainerRef(el);
   };
 

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

@@ -86,6 +86,14 @@ var items = [{
     label: 'Option 5',
     value: '5'
   }]
+}, {
+  label: 'WithDetailLabel',
+  items: [{
+    id: '6',
+    label: 'custom label here',
+    labelDetails: 'test detail label',
+    value: '6'
+  }]
 }];
 var defaultProps = {
   items: items,
@@ -133,10 +141,16 @@ describe('OptionsList', function () {
       }
     });
   });
-  it('navigates through the options with arrow keys', function () {
+  it('checks that labelDetails when provided ', function () {
     var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-        getByText = _render3.getByText,
-        container = _render3.container;
+        getByText = _render3.getByText;
+
+    expect(getByText('test detail label')).toBeInTheDocument();
+  });
+  it('navigates through the options with arrow keys', function () {
+    var _render4 = render(_react.default.createElement(_.default, defaultProps)),
+        getByText = _render4.getByText,
+        container = _render4.container;
 
     var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
@@ -165,11 +179,11 @@ describe('OptionsList', function () {
   it('selects an item with Enter or Space key', function () {
     var onChange = jest.fn();
 
-    var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+    var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
       onChange: onChange
     }))),
-        getByLabelText = _render4.getByLabelText,
-        container = _render4.container;
+        getByLabelText = _render5.getByLabelText,
+        container = _render5.container;
 
     var selectedItem = defaultProps.items[1];
     var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
@@ -206,12 +220,12 @@ describe('OptionsList', function () {
         disabled: true
       }];
 
-      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         items: onlyDisabledItems,
         onChange: onChange
       }))),
-          getByLabelText = _render5.getByLabelText,
-          container = _render5.container;
+          getByLabelText = _render6.getByLabelText,
+          container = _render6.container;
 
       var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
@@ -238,11 +252,11 @@ describe('OptionsList', function () {
     it('calls onChange with id when item is clicked', function () {
       var onChange = jest.fn();
 
-      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange
       }))),
-          getByText = _render6.getByText,
-          getByLabelText = _render6.getByLabelText;
+          getByText = _render7.getByText,
+          getByLabelText = _render7.getByLabelText;
 
       var item = items[0];
 
@@ -261,11 +275,11 @@ describe('OptionsList', function () {
       it('does not calls onChange when item is clicked', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange
         }))),
-            getByText = _render7.getByText,
-            getByLabelText = _render7.getByLabelText;
+            getByText = _render8.getByText,
+            getByLabelText = _render8.getByLabelText;
 
         _react2.fireEvent.click(getByText(disabledItemLabel));
 
@@ -279,11 +293,11 @@ describe('OptionsList', function () {
       it('prefers value over internal', function () {
         var selected = items[1];
 
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           selected: selected.id
         }))),
-            getByText = _render8.getByText,
-            getByLabelText = _render8.getByLabelText;
+            getByText = _render9.getByText,
+            getByLabelText = _render9.getByLabelText;
 
         var item = items[0];
 
@@ -298,12 +312,12 @@ describe('OptionsList', function () {
     it('calls onChange with array of selected ids when item is clicked', function () {
       var onChange = jest.fn();
 
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         multiple: true
       }))),
-          getByText = _render9.getByText,
-          getByLabelText = _render9.getByLabelText;
+          getByText = _render10.getByText,
+          getByLabelText = _render10.getByLabelText;
 
       var item = items[0];
 
@@ -342,12 +356,12 @@ describe('OptionsList', function () {
         onClick: onClick
       }];
 
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         actions: actions,
         multiple: true
       }))),
-          baseElement = _render10.baseElement,
-          getByText = _render10.getByText;
+          baseElement = _render11.baseElement,
+          getByText = _render11.getByText;
 
       actions.forEach(function (_ref5) {
         var label = _ref5.text;

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;AAoExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAuExD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -26,6 +26,7 @@ schema.makePropTypes = function () {
       disabled: _reactDesc.PropTypes.bool,
       id: _reactDesc.PropTypes.string,
       label: _reactDesc.PropTypes.string.description('The label text for an option in the dropdown list.'),
+      labelDetails: _reactDesc.PropTypes.string.description('The secondary sub-text for an option in the dropdown list.'),
       value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.number, _reactDesc.PropTypes.string]).description('The value for an option in the dropdown list.')
     })).description('The array of item data that will be rendered').isRequired,
     minWidth: _reactDesc.PropTypes.string.description('A CSS min-width value to apply'),

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

@@ -47,6 +47,7 @@ interface BaseOption {
     disabled?: boolean;
     id: string;
     label: string;
+    labelDetails?: string;
     showCheckbox?: boolean;
     meta?: object;
 }

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/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAqiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAuiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -122,7 +122,8 @@ function Combobox(props, ref) {
       propValue = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'sync' : _props$variant,
-      zIndex = props.zIndex;
+      zIndex = props.zIndex,
+      containerSelector = props.containerSelector;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -537,6 +538,7 @@ function Combobox(props, ref) {
       autoComplete: autoComplete,
       type: type
     }), _react.default.createElement(_DropdownList.default, {
+      containerSelector: containerSelector,
       PanelComponent: getPanelComponent(),
       activeId: activeId,
       "aria-labelledby": ariaLabelledBy,

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

@@ -143,7 +143,7 @@ describe('Combobox', function () {
       // returns the <span>, but we need the `<li>`
 
 
-      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement; // These two CSS values make an option look "active".
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement; // These two CSS values make an option look "active".
 
       expect(li).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n        color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n      "));
     });
@@ -593,7 +593,7 @@ describe('Combobox', function () {
 
         expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        ")); // The focus should always remain on the input. The "active" item is kind of a fake.
 
         expect(queryByLabelText('test')).toHaveFocus();
 
@@ -602,8 +602,8 @@ describe('Combobox', function () {
           keyCode: 40
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
         expect(queryByLabelText('test')).toHaveFocus();
 
         _react2.fireEvent.keyDown(queryByLabelText('test'), {
@@ -611,8 +611,8 @@ describe('Combobox', function () {
           keyCode: 38
         });
 
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
+        expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        "));
         expect(queryByLabelText('test')).toHaveFocus();
         expect(onChangeInputValue).not.toHaveBeenCalled();
         expect(onChangeValue).not.toHaveBeenCalled();
@@ -660,7 +660,7 @@ describe('Combobox', function () {
 
           expect((0, _react2.queryByText)(baseElement, enabledElements[0])).toBeInTheDocument(); // The first element should be "active" by default if it's not disabled.
 
-          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The focus should always remain on the input. The "active" item is kind of a fake.
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The focus should always remain on the input. The "active" item is kind of a fake.
 
           expect(queryByLabelText('test')).toHaveFocus();
 
@@ -672,7 +672,7 @@ describe('Combobox', function () {
           expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the next element in the list
           // that is not marked as disabled
 
-          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
           expect(queryByLabelText('test')).toHaveFocus();
 
           _react2.fireEvent.keyDown(queryByLabelText('test'), {
@@ -683,7 +683,7 @@ describe('Combobox', function () {
           expect((0, _react2.queryByText)(baseElement, enabledElements[1]).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          ")); // The next active element should be the previous element in the list
           // that is not marked as disabled
 
-          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
+          expect((0, _react2.queryByText)(baseElement, enabledElements[0]).parentElement.parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean15), ";\n          color: ").concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          "));
           expect(queryByLabelText('test')).toHaveFocus();
           expect(onChangeInputValue).not.toHaveBeenCalled();
           expect(onChangeValue).not.toHaveBeenCalled();
@@ -854,7 +854,7 @@ 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).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).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
     });
     describe('when typing', function () {
       it('does NOT update the selection automatically', function () {
@@ -887,7 +887,7 @@ describe('Combobox', function () {
         });
 
         expect(onChangeValue).toHaveBeenCalledTimes(1);
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).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).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       });
     });
     describe('when clicking the clear button', function () {
@@ -940,7 +940,7 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).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).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
       rerender(_react.default.createElement(_.default, {
         label: "test",
         options: defaultOptions,
@@ -950,15 +950,15 @@ describe('Combobox', function () {
         onChangeValue: onChangeValue
       }));
       expect(queryByLabelText('test')).toHaveValue('value');
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement).not.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).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[0].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        "));
+      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        "));
       expect(onChangeInputValue).not.toHaveBeenCalled();
       expect(onChangeValue).not.toHaveBeenCalled();
     });
   });
   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, container, getByRole, getAllByRole;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -977,14 +977,14 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender;
+              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender, container = _render32.container, getByRole = _render32.getByRole, getAllByRole = _render32.getAllByRole;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
               expect(queryByLabelText('test')).toHaveValue('value');
               expect(queryByLabelText('test')).toHaveAttribute('autoComplete', 'auto-complete-test');
               expect(queryByLabelText('test')).toHaveAttribute('type', 'search');
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).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).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
               rerender(_react.default.createElement(_.default, {
                 label: "test",
                 options: defaultOptions,
@@ -994,8 +994,8 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue
               }));
               expect(queryByLabelText('test')).toHaveValue('second value');
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).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).not.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[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        "));
               expect(onChangeInputValue).not.toHaveBeenCalled();
               expect(onChangeValue).not.toHaveBeenCalled();
 
@@ -1019,8 +1019,8 @@ describe('Combobox', function () {
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).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).not.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[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        "));
 
             case 23:
             case "end":

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAuFrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AA4FrD,eAAe,MAAM,CAAC"}

package/lib/components/Combobox/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 Combobox should be rendered in, or \"parent\" to render the Combobox in-place.").defaultValue('body'),
   defaultInputValue: _reactDesc.PropTypes.string.description('The default text value for the input field.'),
   defaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default.'),
   loading: _reactDesc.PropTypes.bool.description('Useful if variant="async". When true, a loading message will render in the dropdown instead of options.'),

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

@@ -8,7 +8,7 @@ declare type Variant = 'async' | 'sync';
 interface TOnChangeMeta {
     removed: boolean;
 }
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel'> {
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxInputRef>, 'onChange' | 'value'>, Omit<BaseInputFieldProps, 'children' | 'onChange' | 'value'>, Pick<DropdownListProps, 'onShow' | 'onHide' | 'renderOptionLabel' | 'containerSelector'> {
     clearButtonLabel?: string;
     defaultInputValue?: string;
     defaultValue?: string;

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

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

package/lib/components/Popover/schema.js

@@ -31,7 +31,7 @@ schema.makePropTypes = function () {
     containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the ".concat(component, "s should be rendered in, or \"parent\" to render the ").concat(component, " in-place.")).defaultValue('body'),
     hideOnESC: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user presses the \"Escape\" key. No effect when `visible` is not `undefined`.")).defaultValue('true'),
     hideOnClickOutside: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user clicks outside the ").concat(component, ". No effect when `visible` is not `undefined`.")).defaultValue('true'),
-    zIndex: _reactDesc.PropTypes.bool.description("The css `z-index` value to apply to the ".concat(component, " content wrapper. Is set to `auto` when not provided.")),
+    zIndex: _reactDesc.PropTypes.number.description("The css `z-index` value to apply to the ".concat(component, " content wrapper. Is set to `auto` when not provided.")),
     onShow: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes visible. Only called if `visible` is `undefined`.")),
     onHide: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes hidden. Only called if `visible` is `undefined`.")),
     onRequestHide: _reactDesc.PropTypes.func.description("A function called if `visible` is not `undefined` and when the user clicks outside the ".concat(component, " or presses the \"Escape\" key."))

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;AA2PjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAgCvB,eAAe,aAAa,CAAC"}

package/lib/components/Select/index.js

@@ -85,7 +85,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-');
@@ -273,7 +274,8 @@ function Select(props, ref) {
       showArrow: false,
       target: popoverTargetRef,
       visible: isPopoverVisible,
-      zIndex: zIndex
+      zIndex: zIndex,
+      containerSelector: containerSelector
     }));
   }));
 }

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;AAmEnD,eAAe,MAAM,CAAC"}

package/lib/components/Select/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 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

@@ -20,6 +20,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,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/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;AAmQxC,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,
@@ -280,7 +281,8 @@ 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, {

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;AA4TxC,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,
@@ -307,6 +308,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",

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.135+3dc223a",
+  "version": "2.0.1-alpha.139+ac10f0c",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "3dc223ac9ff20224bfb207b121b9e948382a923a"
+  "gitHead": "ac10f0cea9f32e6b223eb733c92a9ff4b81efa7e"
 }