@decisiv/ui-components 2.0.1-alpha.17 → 2.0.1-alpha.173

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

@@ -0,0 +1,417 @@
+"use strict";
+
+require("jest-styled-components");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+beforeAll(function () {
+  var root = document.createElement('div');
+  root.setAttribute('id', 'popovers-root');
+  document.body.appendChild(root);
+});
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(ui, _objectSpread({}, options, {
+    wrapper: wrapper
+  }));
+};
+
+var onChangeMock = jest.fn();
+var onSearchMock = jest.fn();
+describe('Search input', function () {
+  afterEach(jest.clearAllMocks);
+  it('renders the search input with the TIMES icon HIDDEN when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock
+            }));
+            _context.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).not.toBeVisible();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the search input with the TIMES icon VISIBLE when its blank', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context2.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context2.sent;
+            expect((0, _react2.within)(searchContainer).getByLabelText('Clear search')).toBeVisible();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders SEARCH icon for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context3.t0 = expect;
+            _context3.next = 4;
+            return container.findByTestId('search-icon');
+
+          case 4:
+            _context3.t1 = _context3.sent;
+            (0, _context3.t0)(_context3.t1).toBeInTheDocument();
+
+          case 6:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('renders search button with the text SEARCH for MEDIUM sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "medium"
+            }));
+            _context4.t0 = expect;
+            _context4.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context4.t1 = _context4.sent;
+            (0, _context4.t0)(_context4.t1).toHaveTextContent('Search');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  it('does not render the SEARCH icon for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            expect(container.queryByTestId('search-icon')).not.toBeInTheDocument();
+
+          case 2:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  it('renders search button with the icon SEARCH for SMALL sized search input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+    var container, button;
+    return regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              size: "small"
+            }));
+            button = container.getByRole('button');
+            expect(button.querySelector('svg')).toBeInTheDocument();
+
+          case 3:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  it('renders the search input with the TIMES icon HIDDEN when its disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "some value",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context7.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context7.sent;
+            expect((0, _react2.within)(searchContainer).queryByLabelText('Clear search')).not.toBeInTheDocument();
+
+          case 5:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+  it('calls onChange when a change is triggered', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "",
+              onChange: onChangeMock,
+              disabled: true
+            }));
+            _context8.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context8.next = 5;
+            return _context8.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context8.sent;
+            _context8.next = 8;
+            return _react2.fireEvent.change(searchInput, {
+              target: {
+                value: 'some value'
+              }
+            });
+
+          case 8:
+            expect(onChangeMock).toHaveBeenCalled();
+
+          case 9:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  it('calls onChange with a blank value when clear button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+    var container, searchContainer;
+    return regeneratorRuntime.wrap(function _callee9$(_context9) {
+      while (1) {
+        switch (_context9.prev = _context9.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Some value",
+              onChange: onChangeMock
+            }));
+            _context9.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            searchContainer = _context9.sent;
+            _context9.next = 6;
+            return _react2.fireEvent.click((0, _react2.within)(searchContainer).getByLabelText('Clear search'));
+
+          case 6:
+            expect(onChangeMock).toHaveBeenCalledWith({
+              target: {
+                value: ''
+              }
+            });
+
+          case 7:
+          case "end":
+            return _context9.stop();
+        }
+      }
+    }, _callee9);
+  })));
+  it('calls onSearch when search button is clicked', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+    var container;
+    return regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context10.t0 = _react2.fireEvent;
+            _context10.next = 4;
+            return container.findByRole('button');
+
+          case 4:
+            _context10.t1 = _context10.sent;
+
+            _context10.t0.click.call(_context10.t0, _context10.t1);
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 7:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  it('calls onSearch when enter is pressed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+    var container, searchInput;
+    return regeneratorRuntime.wrap(function _callee11$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            container = render(_react.default.createElement(_.default, {
+              value: "Searched value",
+              onChange: onChangeMock,
+              onSearch: onSearchMock,
+              size: "medium"
+            }));
+            _context11.next = 3;
+            return container.findByTestId('search-container');
+
+          case 3:
+            _context11.next = 5;
+            return _context11.sent.querySelector('input');
+
+          case 5:
+            searchInput = _context11.sent;
+
+            _react2.fireEvent.keyPress(searchInput, {
+              code: 'Enter',
+              key: 'Enter',
+              charCode: 13
+            });
+
+            expect(onSearchMock).toHaveBeenCalledWith('Searched value');
+
+          case 8:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee11);
+  })));
+  describe('when using the searchOn `change`', function () {
+    var searchOn = 'change';
+    it('renders the search icon when size is "small"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "small"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('renders the search icon when size is "medium"', function () {
+      var container = render(_react.default.createElement(_.default, {
+        searchOn: "change",
+        value: "",
+        onChange: onChangeMock,
+        size: "medium"
+      }));
+      expect(container.getByTestId('search-icon')).toBeInTheDocument();
+    });
+    it('does not render the submit search button', function () {
+      var _render = render(_react.default.createElement(_.default, {
+        value: "search value",
+        searchOn: searchOn,
+        onChange: onChangeMock,
+        onSearch: onSearchMock
+      })),
+          queryByRole = _render.queryByRole;
+
+      expect(queryByRole('button')).not.toBeInTheDocument();
+    });
+    it('triggers the onSearch function when changing the value of the component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+      var container, searchInput;
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              container = render(_react.default.createElement(_.default, {
+                searchOn: searchOn,
+                value: "Searched value",
+                onChange: onChangeMock,
+                onSearch: onSearchMock
+              }));
+              _context12.next = 3;
+              return container.findByTestId('search-container');
+
+            case 3:
+              _context12.next = 5;
+              return _context12.sent.querySelector('input');
+
+            case 5:
+              searchInput = _context12.sent;
+
+              _react2.fireEvent.change(searchInput, {
+                target: {
+                  value: 'some value'
+                }
+              });
+
+              expect(onChangeMock).toHaveBeenCalled();
+
+            case 8:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    })));
+  });
+});

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

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAkCxD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+// @ts-ignore no module typings
+var schema = (0, _reactDesc.describe)({
+  displayName: 'SearchInput'
+});
+schema.propTypes = {
+  searchOn: _reactDesc.PropTypes.oneOf(['change', 'submit']).description('Set the behavior when the onSearch function is called').defaultValue('submit'),
+  debounceTimeout: _reactDesc.PropTypes.number.description('The amount of ms to wait until onSearch is called after the user has typed in the  search input').defaultValue('500'),
+  size: _reactDesc.PropTypes.oneOf(['medium', 'small']).description('Controls the size of the search input.').defaultValue('medium'),
+  disabled: _reactDesc.PropTypes.bool.description('Boolean indicating whether the search input is disabled.'),
+  value: _reactDesc.PropTypes.string.description('A text value to be displayed on the input field'),
+  onSearch: _reactDesc.PropTypes.func.description('A callback that is invoked with the input value when the the search action is performed'),
+  onChange: _reactDesc.PropTypes.func.description('A callback that is invoked when the value of the search field changes')
+};
+var _default = schema;
+exports.default = _default;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+import { FlexComponentProps } from '../Flex';
+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;
+    searchOn?: SearchOn;
+    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,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,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,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,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;AAkBf,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAuOjD,QAAA,MAAM,aAAa,EAAE,sBAAsB,CACzC,SAAS,EACT,WAAW,CACS,CAAC;AAUvB,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,8 +27,12 @@ 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");
+
 var _Target = _interopRequireDefault(require("./Target"));
 
 var _propTypes2 = require("./propTypes");
@@ -66,7 +70,10 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function Select(props, ref) {
-  var clearButtonLabel = props.clearButtonLabel,
+  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,
@@ -74,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-');
@@ -199,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",
@@ -224,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,
@@ -235,6 +259,7 @@ function Select(props, ref) {
       ref: targetRef,
       type: "button"
     }, value), _react.default.createElement(_DropdownList.default, {
+      actions: actions,
       "aria-labelledby": ariaLabelledBy,
       borderRadius: "0",
       id: dropdownListId,
@@ -246,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
     }));
   }));
 }
@@ -258,9 +285,22 @@ function Select(props, ref) {
 var SelectWithRef = (0, _react.forwardRef)(Select);
 SelectWithRef.displayName = 'Select';
 SelectWithRef.propTypes = _objectSpread({}, _schema.default.propTypes, {
+  actions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+    id: _propTypes.default.string.isRequired
+  }))), _propTypes.default.shape({
+    left: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+      id: _propTypes.default.string.isRequired
+    }))),
+    right: _propTypes.default.arrayOf(_propTypes.default.shape((0, _Button.makeButtonSchemaPropTypes)({
+      id: _propTypes.default.string.isRequired
+    })))
+  })]),
   defaultValue: _propTypes2.valueValidator,
   icon: _propTypes.default.elementType,
   value: _propTypes2.valueValidator
 });
+SelectWithRef.defaultProps = {
+  actions: undefined
+};
 var _default = SelectWithRef;
 exports.default = _default;