@decisiv/ui-components 2.0.1-alpha.12 → 2.0.1-alpha.132

package/lib/components/Notifications/Notifier.test.js

@@ -4,7 +4,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
+var _providers = require("../../providers");
 
 var _NotificationsPanel = _interopRequireDefault(require("./NotificationsPanel"));
 
@@ -12,6 +12,10 @@ var _Notifier = _interopRequireDefault(require("./Notifier"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 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); }); }; }
@@ -22,12 +26,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_providers.ConfigProvider, null, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NotificationsPanel.default, null), children));
+};
+
 var render = function render(ui, options) {
   return (0, _react2.render)(ui, _objectSpread({}, options, {
-    wrapper: function wrapper(_ref) {
-      var children = _ref.children;
-      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NotificationsPanel.default, null), children));
-    }
+    wrapper: wrapper
   }));
 };
 
@@ -70,7 +76,7 @@ describe('Notifier', function () {
 
               expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(1);
 
-              _react2.fireEvent.click((0, _react2.queryByLabelText)(baseElement, /close/gi));
+              _react2.fireEvent.click((0, _react2.getByLabelText)(baseElement, /close/gi));
 
               _context.next = 7;
               return (0, _react2.wait)(function () {
@@ -96,18 +102,19 @@ describe('Notifier', function () {
   });
   describe('dispatching more than one notification', function () {
     it('renders a dismiss all button in the notifications panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var buttonText, _render2, baseElement, getByText;
+      var buttonText, onClose, testProps, _render2, baseElement, getByText;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               buttonText = 'notify';
+              onClose = defaultProps.onClose, testProps = _objectWithoutProperties(defaultProps, ["onClose"]);
               _render2 = render(_react.default.createElement(_Notifier.default, null, function (_ref5) {
                 var notify = _ref5.notify;
                 return _react.default.createElement("button", {
                   onClick: function onClick() {
-                    notify(defaultProps);
+                    notify(testProps);
                   },
                   type: "button"
                 }, buttonText);
@@ -125,7 +132,7 @@ describe('Notifier', function () {
 
               _react2.fireEvent.click((0, _react2.getByText)(baseElement, /dismiss all/gi));
 
-              _context2.next = 11;
+              _context2.next = 12;
               return (0, _react2.wait)(function () {
                 return expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(0);
               },
@@ -139,12 +146,74 @@ describe('Notifier', function () {
                 timeout: 2750
               });
 
-            case 11:
+            case 12:
             case "end":
               return _context2.stop();
           }
         }
       }, _callee2);
     })));
+    it('fires onClose for each notification when clicking dismiss all', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var buttonText, onClose, _render3, baseElement, getByText, notifications;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              buttonText = 'notify';
+              onClose = jest.fn();
+              jest.useFakeTimers();
+              _render3 = render(_react.default.createElement(_Notifier.default, null, function (_ref7) {
+                var notify = _ref7.notify;
+                return _react.default.createElement("button", {
+                  onClick: function onClick() {
+                    notify(_objectSpread({}, defaultProps, {
+                      onClose: onClose
+                    }));
+                  },
+                  type: "button"
+                }, buttonText);
+              })), baseElement = _render3.baseElement, getByText = _render3.getByText;
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click(getByText(buttonText));
+
+                _react2.fireEvent.click(getByText(buttonText));
+
+                _react2.fireEvent.click(getByText(buttonText));
+
+                jest.runAllTimers();
+              });
+              notifications = (0, _react2.queryAllByText)(baseElement, defaultProps.title);
+              expect(notifications).toHaveLength(3);
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click((0, _react2.getByText)(baseElement, /dismiss all/gi));
+              });
+              _context3.next = 10;
+              return (0, _react2.wait)(function () {
+                (0, _react2.act)(function () {
+                  return jest.runAllTimers();
+                });
+                expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(0);
+              },
+              /**
+               * this timeout is important in checking that the notifications were dismissed via
+               * `dismissAll` instead of just timing out. If just timing out, the notifications would
+               * dismiss after 5.2 seconds. Selecting a timeout shorter than that verifies `dismissAll`
+               * was fired.
+               */
+              {
+                timeout: 2750
+              });
+
+            case 10:
+              expect(onClose).toHaveBeenCalledTimes(3);
+
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
   });
 });

package/lib/components/Notifications/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const NOTIFICATION_CARD_WIDTH: string;
+//# sourceMappingURL=constants.d.ts.map

package/lib/components/Notifications/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,QAAyB,CAAC"}

package/lib/components/Notifications/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NOTIFICATION_CARD_WIDTH = void 0;
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var NOTIFICATION_CARD_WIDTH = (0, _rem.default)(_spacing.default.base * 34);
+exports.NOTIFICATION_CARD_WIDTH = NOTIFICATION_CARD_WIDTH;

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AAsDzD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AA0DzD,eAAe,MAAM,CAAC"}

package/lib/components/Notifications/schema.js

@@ -18,13 +18,14 @@ schema.propTypes = {
     onClick: _reactDesc.PropTypes.func.isRequired,
     text: _reactDesc.PropTypes.string.isRequired
   })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.').isRequired,
+  duration: _reactDesc.PropTypes.number.description('An integer representing the amount of milliseconds to wait until dismissing the notification if no user interaction is captured. If omitted, notification will remain until manually closed.'),
   children: _reactDesc.PropTypes.func.description('The body of the notification containing additional UI elements').format('React Component'),
   closeHint: _reactDesc.PropTypes.string.description('The text to present in the tooltip when hovering over the close button.'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The icon/ border color. Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('The `iconix` icon to display. Will override the default icon associated with any specified `intent`.').format('Iconix Icon'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the notification.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger']).description('Shortcuts to the most common combinations of icon and color.'),
-  onClose: _reactDesc.PropTypes.func.description('The event handler called to close the notification. WILL NOT be called if notification times out or is closed because an action button is clicked.'),
+  onClose: _reactDesc.PropTypes.func.description('The event handler called when the notification is manually closed. Will also be called with a blank event if "DISMISS ALL" is clicked. WILL NOT be called if notification times out or is closed because an action button is clicked. In IE, will be called with an empty object.'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the notification').isRequired
 };
 var _default = schema;

package/lib/components/Notifications/useNotifications.d.ts

@@ -1,6 +1,7 @@
 import { TNotificationsContext } from '../../providers/NotificationsProvider';
 export interface TUseNotifications {
     dismissAll: TNotificationsContext['dismissAll'];
+    isDismissingAll: TNotificationsContext['isDismissingAll'];
     notifications: TNotificationsContext['notifications'];
     notify: TNotificationsContext['notify'];
 }

package/lib/components/Notifications/useNotifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,eAAe,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}

package/lib/components/Notifications/useNotifications.test.js

@@ -19,11 +19,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 jest.useFakeTimers();
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
+};
+
 var defaultRenderHookOptions = {
-  wrapper: function wrapper(_ref) {
-    var children = _ref.children;
-    return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
-  }
+  wrapper: wrapper
 };
 var defaultNotificationOptions = {
   id: 'test-0',

package/lib/components/Pagination/Pagination.d.ts

@@ -12,7 +12,7 @@ interface DefaultPaginationProps {
 export interface PaginationProps extends DefaultPaginationProps {
     totalPages: number;
 }
-declare function Pagination(props: PaginationProps): JSX.Element;
+declare function Pagination(props: PaginationProps): JSX.Element | null;
 declare namespace Pagination {
     var propTypes: {
         variant: PropTypes.Requireable<string>;

package/lib/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA6EtE;kBA7EuB,UAAU;;;;;;;;;;;;eAAV,UAAU"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAUnC,OAAO,EAAuB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjE,UAAU,sBAAsB;IAC9B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,sBAAsB;IAC7D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,iBAAwB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+E7E;kBA/EuB,UAAU;;;;;;;;;;;;eAAV,UAAU"}

package/lib/components/Pagination/Pagination.js

@@ -49,6 +49,7 @@ function Pagination(props) {
       currentPage = _useState2[0],
       setCurrentPage = _useState2[1];
 
+  if (totalPages <= 1) return null;
   var activePageIsControlled = typeof activePage !== 'undefined';
 
   if (activePageIsControlled && activePage !== currentPage) {

package/lib/components/Pagination/Pagination.test.js

@@ -245,4 +245,13 @@ describe('Pagination', function () {
       expect(onPageChange).toHaveBeenCalledWith(props.activePage + 1, props.activePage);
     });
   });
+  it("doesn't display when there is only 1 page", function () {
+    var _renderPagination17 = renderPagination(_objectSpread({}, defaultProps, {
+      totalPages: 1,
+      defaultActivePage: 1
+    })),
+        container = _renderPagination17.container;
+
+    expect(container).toBeEmpty();
+  });
 });

package/lib/components/Pagination/types.js

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

package/lib/components/Popover/utils.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PopoverProps, Side, TargetType, VisibilityActions } from './types';
-export declare const getPlacementParts: (placement?: "left" | "right" | "auto" | "bottom" | "top" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "auto-start" | "auto-end") => [Side, ("end" | "start" | undefined)?];
+export declare const getPlacementParts: (placement?: "auto" | "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "auto-start" | "auto-end") => [Side, ("end" | "start" | undefined)?];
 interface UseTargetProps extends PopoverProps {
     actions: VisibilityActions;
     internalNodeRef: RefObject<HTMLElement>;

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",

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;AAyPjD,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,8 @@ 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,
       defaultValue = props.defaultValue,
       id = props.id,
       inputContainerRef = props.inputContainerRef,
@@ -74,8 +79,11 @@ 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;
   var fallbackSelectRef = (0, _react.useRef)(null);
@@ -199,6 +207,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",
@@ -235,6 +256,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,6 +268,7 @@ function Select(props, ref) {
       onChange: handleChangeValue,
       onHide: toggleIsPopoverVisible,
       onShow: toggleIsPopoverVisible,
+      renderOptionLabel: renderOptionLabel,
       selectedIds: selectedValue,
       showArrow: false,
       target: popoverTargetRef,
@@ -258,9 +281,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;

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,10 +180,10 @@ 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();
     });
@@ -154,12 +191,12 @@ describe('Select', 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 _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           defaultValue: opt1.id
         }))),
-            baseElement = _render5.baseElement,
-            getByText = _render5.getByText;
+            baseElement = _render7.baseElement,
+            getByText = _render7.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -168,11 +205,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 _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           defaultValue: opt1.id
         }))),
-            baseElement = _render6.baseElement,
-            getByText = _render6.getByText;
+            baseElement = _render8.baseElement,
+            getByText = _render8.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -183,12 +220,34 @@ describe('Select', function () {
       });
     });
   });
+  describe('when label hidden', function () {
+    it('does not display the label element', function () {
+      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        defaultvalue: opt1.id,
+        hideLabel: true
+      }))),
+          getByText = _render9.getByText;
+
+      expect(getByText(defaultProps.label, {
+        selector: 'span'
+      })).not.toBeVisible();
+    });
+    it('does display the input related to the label', function () {
+      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        defaultValue: opt1.id,
+        hideLabel: true
+      }))),
+          getByLabelText = _render10.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 _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         value: cat0Opt0.id
       }))),
-          getByText = _render7.getByText;
+          getByText = _render11.getByText;
 
       expect(getByText(cat0Opt0.label)).toBeTruthy();
     });
@@ -196,12 +255,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 _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           value: opt1.id
         }))),
-            baseElement = _render8.baseElement,
-            getByText = _render8.getByText;
+            baseElement = _render12.baseElement,
+            getByText = _render12.getByText;
 
         _react2.fireEvent.click(getByText(defaultProps.label));
 
@@ -210,12 +269,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 _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           value: opt1.id
         }))),
-            baseElement = _render9.baseElement,
-            getByText = _render9.getByText,
-            queryByText = _render9.queryByText;
+            baseElement = _render13.baseElement,
+            getByText = _render13.getByText,
+            queryByText = _render13.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;AA4CnD,eAAe,MAAM,CAAC"}
+{"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"}

package/lib/components/Select/schema.js

@@ -25,7 +25,13 @@ 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'),
   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'])
@@ -35,6 +41,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,9 +1,10 @@
 import { ButtonHTMLAttributes, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { BaseInputFieldProps, InputComponentProps } from '../../atoms/InputField';
+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;
@@ -14,6 +15,8 @@ export declare type SelectProps = BaseSelectProps & {
     defaultValue?: string;
     name: string;
     onChange?: (value: string) => void;
+    onHide?: () => void;
+    onShow?: () => void;
     options: Items;
     value?: string;
     zIndex?: PopoverProps['zIndex'];

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,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,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,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"}