@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

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,38 @@
+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;
+    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,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

@@ -48,7 +48,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TargetContainer = _styledComponents.default.div.withConfig({
   displayName: "Target__TargetContainer",
   componentId: "sc-1t0verh-0"
-})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-4px;width:100%;"]);
+})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-2px;width:100%;"]);
 
 var TargetButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "Target__TargetButton",
@@ -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;AAmBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAyOjD,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

@@ -27,6 +27,8 @@ var _useClickOutside = _interopRequireDefault(require("../../utils/useClickOutsi
 
 var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
 
+var _useUpdateEffect = _interopRequireDefault(require("../../utils/useUpdateEffect"));
+
 var _DropdownList = _interopRequireDefault(require("../DropdownList"));
 
 var _Button = require("../Button");
@@ -70,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,
@@ -77,10 +81,14 @@ function Select(props, ref) {
       name = props.name,
       onChange = props.onChange,
       onClick = props.onClick,
+      onHide = props.onHide,
       onKeyDown = props.onKeyDown,
+      onShow = props.onShow,
       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-');
@@ -202,6 +210,19 @@ function Select(props, ref) {
   }, [isPopoverVisible]);
   (0, _useClickOutside.default)([listRef], handleClickOutsideList);
   var inputContainerRefs = (0, _compact.default)([inputContainerRef, popoverTargetRef]);
+  /**
+   * Triggers onShow/onHide callbacks representing wether the Popover is open or not.
+   */
+
+  (0, _useUpdateEffect.default)(function () {
+    if (isPopoverVisible) {
+      onShow && onShow();
+    }
+
+    if (!isPopoverVisible) {
+      onHide && onHide();
+    }
+  }, [isPopoverVisible, onHide, onShow]);
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_InputField.default, _extends({}, props, {
     "aria-live": "assertive",
     cursor: "default",
@@ -227,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,
@@ -250,11 +271,13 @@ function Select(props, ref) {
       onChange: handleChangeValue,
       onHide: toggleIsPopoverVisible,
       onShow: toggleIsPopoverVisible,
+      renderOptionLabel: renderOptionLabel,
       selectedIds: selectedValue,
       showArrow: false,
       target: popoverTargetRef,
       visible: isPopoverVisible,
-      zIndex: zIndex
+      zIndex: zIndex,
+      containerSelector: containerSelector
     }));
   }));
 }

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

@@ -111,16 +111,53 @@ describe('Select', function () {
       expect(getByText(defaultProps.label)).toBeTruthy();
       expect((0, _react2.queryByText)(baseElement, opt0.label)).toBeTruthy();
     });
+    it('triggers onShow callback', function () {
+      var onShow = jest.fn();
+
+      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onShow: onShow
+      }))),
+          queryByText = _render2.queryByText;
+
+      expect(onShow).not.toHaveBeenCalled();
+      var label = queryByText(defaultProps.label);
+
+      _react2.fireEvent.click(label);
+
+      expect(onShow).toHaveBeenCalled();
+    });
+    it('triggers onHide callback', function () {
+      var onHide = jest.fn();
+
+      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onHide: onHide
+      }))),
+          queryByText = _render3.queryByText;
+
+      expect(onHide).not.toHaveBeenCalled();
+      var label = queryByText(defaultProps.label);
+
+      _react2.fireEvent.click(label);
+
+      _react2.fireEvent.keyDown(label, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27
+      });
+
+      expect(onHide).toHaveBeenCalled();
+    });
   });
   describe('clicking an option', function () {
     it('calls the onchange handler with the new value', function () {
       var onChange = jest.fn();
 
-      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange
       }))),
-          baseElement = _render2.baseElement,
-          getByText = _render2.getByText;
+          baseElement = _render4.baseElement,
+          getByText = _render4.getByText;
 
       _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -129,9 +166,9 @@ describe('Select', function () {
       expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
     });
     it('automatically updates the option label inside the input field', function () {
-      var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-          baseElement = _render3.baseElement,
-          getByText = _render3.getByText;
+      var _render5 = render(_react.default.createElement(_.default, defaultProps)),
+          baseElement = _render5.baseElement,
+          getByText = _render5.getByText;
 
       _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -143,23 +180,47 @@ describe('Select', function () {
   });
   describe('with a default value', function () {
     it('displays the option label matching the defaultValue inside the input field', function () {
-      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         defaultValue: cat0Opt0.id
       }))),
-          getByText = _render4.getByText;
+          getByText = _render6.getByText;
 
       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 _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render5.baseElement,
-            getByText = _render5.getByText;
+            baseElement = _render9.baseElement,
+            getByText = _render9.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -168,11 +229,11 @@ describe('Select', function () {
         expect(onChange).toHaveBeenCalledWith(cat0Opt0.id);
       });
       it('automatically updates the option label inside the input field', function () {
-        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render6.baseElement,
-            getByText = _render6.getByText;
+            baseElement = _render10.baseElement,
+            getByText = _render10.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -183,12 +244,34 @@ describe('Select', function () {
       });
     });
   });
+  describe('when label hidden', function () {
+    it('does not display the label element', function () {
+      var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        defaultvalue: opt1.id,
+        hideLabel: true
+      }))),
+          getByText = _render11.getByText;
+
+      expect(getByText(defaultProps.label, {
+        selector: 'span'
+      })).not.toBeVisible();
+    });
+    it('does display the input related to the label', function () {
+      var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        defaultValue: opt1.id,
+        hideLabel: true
+      }))),
+          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 _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render7.getByText;
+          getByText = _render13.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -196,12 +279,12 @@ describe('Select', function () {
       it('calls the onchange handler with the new value', function () {
         var onChange = jest.fn();
 
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -210,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 _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render9.baseElement,
-            getByText = _render9.getByText,
-            queryByText = _render9.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;AAqDnD,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,13 +23,17 @@ 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),
     right: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.object)
   })]).description('A collection of objects, each containing a subset of props valid for a Button component. Check the notes on the OptionsList.'),
   onChange: _reactDesc.PropTypes.func.description(''),
+  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'),
   options: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     decoration: _reactDesc.PropTypes.shape({
       type: _reactDesc.PropTypes.oneOf(['Avatar', 'Badge'])
@@ -39,6 +43,7 @@ schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makeP
     label: _reactDesc.PropTypes.string.description('The label text for an option in the dropdown list.'),
     value: _reactDesc.PropTypes.string.description('The value for an option in the dropdown list.')
   })).description('The array of data for the options that will be rendered').isRequired,
+  renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value'),
   value: _reactDesc.PropTypes.string.description('The ID of the option that is selected. If provided, controlling the Select must be handled externally. Overrides `defaultValue`.'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the options list')
 });

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

@@ -1,24 +1,27 @@
 import { ButtonHTMLAttributes, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { BaseInputFieldProps, InputComponentProps } from '../../atoms/InputField';
-import { FooterActions } from '../../atoms/OptionsList/types';
+import { OptionsListProps } from '../../atoms/OptionsList/types';
 import { Items } from '../DropdownList';
 import { PopoverProps } from '../Popover/types';
 export declare type SelectRef = HTMLButtonElement;
-interface BaseSelectProps extends ButtonHTMLAttributes<SelectRef>, Omit<BaseInputFieldProps, 'children' | 'maxLength' | 'onChange' | 'showCharacterCount' | 'value'> {
+interface BaseSelectProps extends ButtonHTMLAttributes<SelectRef>, Omit<BaseInputFieldProps, 'children' | 'maxLength' | 'onChange' | 'showCharacterCount' | 'value'>, Pick<OptionsListProps, 'actions' | 'renderOptionLabel'> {
     onBlur?: FocusEventHandler;
     onClick?: MouseEventHandler;
     onFocus?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
 }
 export declare type SelectProps = BaseSelectProps & {
-    actions?: FooterActions;
+    hideClearButton?: boolean;
     clearButtonLabel?: string;
     defaultValue?: string;
     name: string;
     onChange?: (value: string) => void;
+    onHide?: () => void;
+    onShow?: () => void;
     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,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,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;IACH,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,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,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,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/Select/types.js

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

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

@@ -48,7 +48,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var TargetContainer = _styledComponents.default.div.withConfig({
   displayName: "Target__TargetContainer",
   componentId: "ks9oxf-0"
-})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-4px;width:100%;"]);
+})(["align-items:center;display:flex;justify-content:space-between;position:relative;top:-2px;width:100%;"]);
 
 var TargetButton = (0, _styledComponents.default)(_BaseButton.default).withConfig({
   displayName: "Target__TargetButton",
@@ -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":"AAIA,OAAc,EAEZ,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAqBf,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAQ,MAAM,SAAS,CAAC;AAIjE,OAAO,EACL,SAAS,EACT,oBAAoB,GACrB,MAAM,gCAAgC,CAAC;AAmPxC,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,cAAc,EACd,gBAAgB,CACQ,CAAC;AAK3B,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"}