@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

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

@@ -0,0 +1,217 @@
+"use strict";
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
+
+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 defaultProps = {
+  id: 'text-field-1',
+  label: 'label',
+  name: 'name',
+  onChange: function onChange() {},
+  value: ''
+};
+describe('PasswordField', function () {
+  it('renders the password input', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the label "Password"', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByText('Password')).not.toBeNull();
+  });
+  it('does not show the label "Password" when hideLabel is true', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      hideLabel: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.queryByText('Password')).not.toBeVisible();
+  });
+  it('renders the input as a text-type input', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      initialPasswordVisible: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+    expect(container.queryByTestId('password-input')).not.toBeNull();
+  });
+  it('toggles the input type when the eye icon is clicked', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+
+    _react2.fireEvent.click(container.getByTestId('toggle-password-visible'));
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+
+    _react2.fireEvent.click(container.getByTestId('toggle-password-visible'));
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the eye icon when the password is hidden', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container).toMatchSnapshot();
+  });
+  it('shows the eye slash icon when the password is visible', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd',
+      initialPasswordVisible: true
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container).toMatchSnapshot();
+  });
+  it('toggle the eye button with the enter key', function () {
+    var props = _objectSpread({}, defaultProps, {
+      value: 'samplepasswd'
+    });
+
+    var container = render(_react.default.createElement(_.default, props));
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+
+    _react2.fireEvent.keyPress(container.getByTestId('toggle-password-visible'), {
+      code: 'Enter',
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'text');
+
+    _react2.fireEvent.keyPress(container.getByTestId('toggle-password-visible'), {
+      code: 'Enter',
+      key: 'Enter',
+      charCode: 13
+    });
+
+    expect(container.getByTestId('password-input')).toHaveAttribute('type', 'password');
+  });
+  it('shows the "Show Password" tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var props, container;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            props = _objectSpread({}, defaultProps, {
+              value: 'samplepasswd'
+            });
+            container = render(_react.default.createElement(_.default, props));
+            _context.next = 4;
+            return _react2.fireEvent.focus(container.getByTestId('toggle-password-visible'), {
+              bubbles: true
+            });
+
+          case 4:
+            _context.t0 = expect;
+            _context.next = 7;
+            return container.findByText('Show Password');
+
+          case 7:
+            _context.t1 = _context.sent;
+            (0, _context.t0)(_context.t1).not.toBeNull();
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('shows the "Hide Password" tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var props, container;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            props = _objectSpread({}, defaultProps, {
+              value: 'samplepasswd'
+            });
+            container = render(_react.default.createElement(_.default, _extends({}, props, {
+              initialPasswordVisible: true
+            })));
+            _context2.next = 4;
+            return _react2.fireEvent.focus(container.getByTestId('toggle-password-visible'), {
+              bubbles: true
+            });
+
+          case 4:
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return container.findByText('Hide Password');
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            (0, _context2.t0)(_context2.t1).not.toBeNull();
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/PasswordField/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAA6C,CAAC;AAa1D,eAAe,MAAM,CAAC"}

package/lib/components/PasswordField/schema.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _reactDesc = require("react-desc");
+
+var _InputField = require("../../atoms/InputField");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+var schema = (0, _reactDesc.describe)({
+  displayName: 'PasswordField'
+});
+schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['children', 'maxLength', 'showCharacterCount', 'icon', 'readOnly', 'label']));
+var _default = schema;
+exports.default = _default;

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

@@ -1,9 +1,9 @@
 import { ArrowProps } from './types';
 export declare const arrowColors: {
-    information: import("@decisiv/design-tokens/lib/color").Color;
+    danger: import("@decisiv/design-tokens/lib/color").Color;
     success: import("@decisiv/design-tokens/lib/color").Color;
+    information: import("@decisiv/design-tokens/lib/color").Color;
     warning: import("@decisiv/design-tokens/lib/color").Color;
-    danger: import("@decisiv/design-tokens/lib/color").Color;
     berryCrisp: import("@decisiv/design-tokens/lib/color").Color;
     koolaidCake: import("@decisiv/design-tokens/lib/color").Color;
     cookieMonster: import("@decisiv/design-tokens/lib/color").Color;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;AAGjB,oBAAY,UAAU,GAAG,cAAc,CAAC;AACxC,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,SAAS,GAAG,aAAa,CAAC;AACtC,oBAAY,YAAY,GAAG,SAAS,CAAC;AACrC,oBAAY,MAAM,GAAG,aAAa,CAAC;AACnC,oBAAY,cAAc,GAAG,kBAAkB,CAAC;AAChD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AA6PnC,QAAA,MAAM,cAAc,mFAAsB,CAAC;AAgD3C,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAUN,MAAM,OAAO,CAAC;AAWf,OAAc,EAAE,WAAW,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EACL,UAAU,IAAI,cAAc,EAC5B,WAAW,IAAI,eAAe,EAE9B,SAAS,IAAI,aAAa,EAC1B,YAAY,IAAI,SAAS,EACzB,MAAM,IAAI,aAAa,EACvB,cAAc,IAAI,kBAAkB,EACpC,mBAAmB,IAAI,uBAAuB,EAE/C,MAAM,SAAS,CAAC;AAIjB,oBAAY,UAAU,GAAG,cAAc,CAAC;AACxC,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,WAAW,GAAG,eAAe,CAAC;AAC1C,oBAAY,SAAS,GAAG,aAAa,CAAC;AACtC,oBAAY,YAAY,GAAG,SAAS,CAAC;AACrC,oBAAY,MAAM,GAAG,aAAa,CAAC;AACnC,oBAAY,cAAc,GAAG,kBAAkB,CAAC;AAChD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC;AAkRnC,QAAA,MAAM,cAAc,mFAAsB,CAAC;AAmD3C,eAAe,cAAc,CAAC"}

package/lib/components/Popover/index.js

@@ -47,6 +47,8 @@ var _types = require("./types");
 
 var _utils = require("./utils");
 
+var _useStackingContext2 = _interopRequireDefault(require("../../utils/useStackingContext"));
+
 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; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,7 +73,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
-var modifiers = {
+var defaultModifiers = {
   preventOverflow: {
     boundariesElement: 'viewport'
   }
@@ -85,12 +87,13 @@ var modifiers = {
 var Popover = function Popover(props, instanceRef) {
   var alwaysRender = props.alwaysRender,
       arrowColor = props.arrowColor,
+      borderRadius = props.borderRadius,
       children = props.children,
       containerSelector = props.containerSelector,
       _props$contentRole = props.contentRole,
       contentRole = _props$contentRole === void 0 ? 'dialog' : _props$contentRole,
       defaultVisible = props.defaultVisible,
-      borderRadius = props.borderRadius,
+      enabled = props.enabled,
       _props$hideOnClickOut = props.hideOnClickOutside,
       hideOnClickOutside = _props$hideOnClickOut === void 0 ? true : _props$hideOnClickOut,
       _props$hideOnESC = props.hideOnESC,
@@ -105,8 +108,10 @@ var Popover = function Popover(props, instanceRef) {
       showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
       target = props.target,
       visible = props.visible,
-      zIndex = props.zIndex,
-      rest = _objectWithoutProperties(props, ["alwaysRender", "arrowColor", "children", "containerSelector", "contentRole", "defaultVisible", "borderRadius", "hideOnClickOutside", "hideOnESC", "id", "manageEvents", "onHide", "onRequestHide", "onShow", "placement", "showArrow", "target", "visible", "zIndex"]);
+      popperModifiers = props.popperModifiers,
+      _props$zIndex = props.zIndex,
+      zIndexProp = _props$zIndex === void 0 ? 0 : _props$zIndex,
+      rest = _objectWithoutProperties(props, ["alwaysRender", "arrowColor", "borderRadius", "children", "containerSelector", "contentRole", "defaultVisible", "enabled", "hideOnClickOutside", "hideOnESC", "id", "manageEvents", "onHide", "onRequestHide", "onShow", "placement", "showArrow", "target", "visible", "popperModifiers", "zIndex"]);
 
   var contentRef = (0, _react.useRef)(null);
   var internalNodeRef = (0, _react.useRef)(null);
@@ -119,11 +124,15 @@ var Popover = function Popover(props, instanceRef) {
       setIsVisibleState = _useState2[1];
 
   var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal; // wrapper for setting visibility state; forces a recalculation
+      createPortal = _useConfig.createPortal;
+
+  var _useStackingContext = (0, _useStackingContext2.default)(),
+      currentZIndex = _useStackingContext.currentZIndex;
+
+  var zIndex = currentZIndex + zIndexProp; // wrapper for setting visibility state; forces a recalculation
   // of the popper position (computing new offsets) each time the
   // popover window becomes visible
 
-
   var setIsVisible = (0, _react.useCallback)(function (makeItVisible) {
     setIsVisibleState(makeItVisible);
 
@@ -198,9 +207,10 @@ var Popover = function Popover(props, instanceRef) {
       isVisible: isVisible,
       show: show,
       toggle: toggle,
-      targetNode: targetNode
+      targetNode: targetNode,
+      contentNode: contentRef.current
     });
-  }, [instanceRef, ariaAttributes, hide, isVisible, show, toggle, targetNode]); // React to changes to the `visible` prop if we are a controlled component
+  }, [instanceRef, ariaAttributes, hide, isVisible, show, toggle, targetNode, contentRef && contentRef.current]); // React to changes to the `visible` prop if we are a controlled component
 
   (0, _react.useEffect)(function () {
     return setIsVisible(visible !== undefined ? visible : isVisible);
@@ -231,6 +241,8 @@ var Popover = function Popover(props, instanceRef) {
     return null;
   }
 
+  var modifiers = _objectSpread({}, defaultModifiers, {}, popperModifiers);
+
   var popper = _react.default.createElement(_reactPopper.Popper, {
     modifiers: modifiers,
     placement:
@@ -254,7 +266,7 @@ var Popover = function Popover(props, instanceRef) {
     }), _react.default.createElement(_Arrow.default, _extends({}, arrowProps, {
       "aria-hidden": true,
       color: arrowColor,
-      hidden: !showArrow,
+      hidden: !showArrow || !isVisible,
       placement: p
     })), _react.default.createElement(_Content.ContentInner, _extends({}, rest, {
       borderRadius: borderRadius,
@@ -286,7 +298,7 @@ var Popover = function Popover(props, instanceRef) {
     return target(data);
   }), targetType === _types.TargetType.Element && (0, _react.cloneElement)(target, _objectSpread({
     ref: internalNodeRef
-  }, ariaAttributes)), (alwaysRender || isVisible) && (containerSelector === 'parent' ?
+  }, ariaAttributes)), enabled && (alwaysRender || isVisible) && (containerSelector === 'parent' ?
   /* istanbul ignore next */
   popper : createPortal(popper, containerSelector)));
 };
@@ -295,6 +307,7 @@ var PopoverWithRef = (0, _react.forwardRef)(Popover); // @ts-ignore
 
 PopoverWithRef.propTypes = {
   id: _propTypes.default.string,
+  enabled: _propTypes.default.bool,
   onShow: _propTypes.default.func,
   onHide: _propTypes.default.func,
   target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.element, _propTypes.default.shape({
@@ -315,10 +328,12 @@ PopoverWithRef.propTypes = {
   onRequestHide: _propTypes.default.func,
   defaultVisible: _propTypes.default.bool,
   containerSelector: _propTypes.default.string,
+  popperModifiers: _propTypes.default.shape({}),
   zIndex: _propTypes.default.number
 };
 PopoverWithRef.defaultProps = {
   alwaysRender: false,
+  enabled: true,
   showArrow: true,
   placement: 'bottom'
 };

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA8C,CAAC;AA4F3D,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA8C,CAAC;AAuG3D,eAAe,MAAM,CAAC"}

package/lib/components/Popover/schema.js

@@ -11,26 +11,34 @@ var _reactDesc = require("react-desc");
 var schema = (0, _reactDesc.describe)({
   displayName: 'ConfigProvider'
 });
-schema.propTypes = {
-  id: _reactDesc.PropTypes.string.description('A unique identifier for the popover. Auto generated if none provided.'),
-  ref: _reactDesc.PropTypes.string.description('A React Ref that will be set to the popover instance. See notes below.'),
-  target: _reactDesc.PropTypes.any.description('The element the popover will point to. See usage notes above.').format('Element, Ref or function').isRequired,
-  children: _reactDesc.PropTypes.any.description('What should be rendered inside the popover. See notes below.').format('React node or function').isRequired,
-  placement: _reactDesc.PropTypes.string.description('The preferred side of the target the popover should attach to. See notes below.').defaultValue('bottom'),
-  visible: _reactDesc.PropTypes.bool.description('Whether or not the popover show be visible. Setting this prop makes the popover a "controlled" component.'),
-  defaultVisible: _reactDesc.PropTypes.bool.description('Whether or not the popover show be visible when first rendered.'),
-  alwaysRender: _reactDesc.PropTypes.bool.description('If true, the popover window will be hidden instead of destroyed when closed. Useful if the popover window needs to maintain state.'),
-  showArrow: _reactDesc.PropTypes.bool.description('Whether or not to show an arrow pointing to the target.').defaultValue(true),
-  borderRadius: _reactDesc.PropTypes.string.description('Applies a custom border radius value to the popover content.'),
-  arrowColor: _reactDesc.PropTypes.string.description('The color of the arrow. See notes below.'),
-  manageEvents: _reactDesc.PropTypes.string.description('The type of events that should be automatically attached to the target. Only applied if `visible` is `undefined`.').format('click,hover,false'),
-  containerSelector: _reactDesc.PropTypes.string.description('A CSS selector to the element where the popovers should be rendered in, or "parent" to render the popover in-place.').defaultValue('body'),
-  hideOnESC: _reactDesc.PropTypes.bool.description('Whether or not to close the popover when the user presses the "Escape" key. No effect when `visible` is not `undefined`.').defaultValue('true'),
-  hideOnClickOutside: _reactDesc.PropTypes.bool.description('Whether or not to close the popover when the user click outside the popover. No effect when `visible` is not `undefined`.').defaultValue('true'),
-  zIndex: _reactDesc.PropTypes.bool.description('The css `z-index` value to apply to the popover content wrapper. Is set to `auto` when not provided.'),
-  onShow: _reactDesc.PropTypes.func.description('A function called when the popover becomes visible. Only called if `visible` is `undefined`.'),
-  onHide: _reactDesc.PropTypes.func.description('A function called when the popover becomes hidden. Only called if `visible` is `undefined`.'),
-  onRequestHide: _reactDesc.PropTypes.func.description('A function called if `visible` is not `undefined` and when the user clicks outside the popover or presses the "Escape" key.')
+
+schema.makePropTypes = function () {
+  var component = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'popover';
+  return {
+    id: _reactDesc.PropTypes.string.description("A unique identifier for the ".concat(component, ". Auto generated if none provided.")),
+    ref: _reactDesc.PropTypes.string.description("A React Ref that will be set to the ".concat(component, " instance. See notes below.")),
+    target: _reactDesc.PropTypes.any.description("The element the ".concat(component, " will point to. See usage notes above.")).format('Element, Ref or function').isRequired,
+    children: _reactDesc.PropTypes.any.description("What should be rendered inside the ".concat(component, ". See notes below.")).format('React node or function').isRequired,
+    enabled: _reactDesc.PropTypes.bool.description("If `false` the ".concat(component, " will never be shown; only its target will be rendered.")),
+    placement: _reactDesc.PropTypes.string.description("The preferred side of the target the ".concat(component, " should attach to. See notes below.")).defaultValue('bottom'),
+    visible: _reactDesc.PropTypes.bool.description("Whether or not the ".concat(component, " should be visible. Setting this prop makes the ").concat(component, " a \"controlled\" component.")),
+    defaultVisible: _reactDesc.PropTypes.bool.description("Whether or not the ".concat(component, " should be visible when first rendered.")),
+    alwaysRender: _reactDesc.PropTypes.bool.description("If true, the ".concat(component, " window will be hidden instead of destroyed when closed. Useful if the ").concat(component, " window needs to maintain state.")),
+    showArrow: _reactDesc.PropTypes.bool.description('Whether or not to show an arrow pointing to the target.').defaultValue(true),
+    borderRadius: _reactDesc.PropTypes.string.description("Applies a custom border radius value to the ".concat(component, " content.")),
+    arrowColor: _reactDesc.PropTypes.string.description('The color of the arrow. See notes below.'),
+    manageEvents: _reactDesc.PropTypes.string.description('The type of events that should be automatically attached to the target. Only applied if `visible` is `undefined`.').format('click,hover,false'),
+    containerSelector: _reactDesc.PropTypes.string.description("A CSS selector to the element where the ".concat(component, "s should be rendered in, or \"parent\" to render the ").concat(component, " in-place.")).defaultValue('body'),
+    hideOnESC: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user presses the \"Escape\" key. No effect when `visible` is not `undefined`.")).defaultValue('true'),
+    hideOnClickOutside: _reactDesc.PropTypes.bool.description("Whether or not to close the ".concat(component, " when the user clicks outside the ").concat(component, ". No effect when `visible` is not `undefined`.")).defaultValue('true'),
+    zIndex: _reactDesc.PropTypes.number.description("The css `z-index` value to apply to the ".concat(component, " content wrapper. Is set to `auto` when not provided.")),
+    onShow: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes visible. Only called if `visible` is `undefined`.")),
+    onHide: _reactDesc.PropTypes.func.description("A function called when the ".concat(component, " becomes hidden. Only called if `visible` is `undefined`.")),
+    onRequestHide: _reactDesc.PropTypes.func.description("A function called if `visible` is not `undefined` and when the user clicks outside the ".concat(component, " or presses the \"Escape\" key.")),
+    popperModifiers: _reactDesc.PropTypes.shape({}).description('An object of Popper.js (v1) modifiers to apply to the popper instance.')
+  };
 };
+
+schema.propTypes = schema.makePropTypes();
 var _default = schema;
 exports.default = _default;

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

@@ -1,5 +1,6 @@
 import { BorderRadiusProperty } from 'csstype';
-import { AriaAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { Modifiers } from 'popper.js';
+import { AriaAttributes, HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { RefHandler } from 'react-popper';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { placements } from './constants';
@@ -18,6 +19,7 @@ export interface InstanceRef {
     toggle: VisibilityAction;
     isVisible: boolean;
     targetNode?: HTMLElement | null;
+    contentNode?: HTMLDivElement | null;
 }
 export interface TargetRendererProps {
     ref: RefHandler;
@@ -41,7 +43,7 @@ interface ChildrenRendererProps {
 export declare type ChildrenRenderer = (props: ChildrenRendererProps) => ReactNode;
 export declare type Children = ReactNode | ChildrenRenderer;
 export declare type ArrowColor = 'charcoal' | CommonUIColorKeys;
-export interface PopoverProps {
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     alwaysRender?: boolean;
     arrowColor?: ArrowColor;
     borderRadius?: BorderRadiusProperty<string>;
@@ -49,6 +51,7 @@ export interface PopoverProps {
     containerSelector?: string;
     contentRole?: string;
     defaultVisible?: boolean;
+    enabled?: boolean;
     hideOnClickOutside?: boolean;
     hideOnESC?: boolean;
     id?: string;
@@ -61,6 +64,7 @@ export interface PopoverProps {
     target: Target;
     visible?: boolean;
     zIndex?: number;
+    popperModifiers?: Modifiers;
 }
 export interface ArrowProps {
     color?: ArrowColor;

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

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

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, searchByOptions, searchByLabel, searchByValue, searchByName, searchByDefaultValue, searchByWidth, searchInputRef, onSearchByChange, warningMessage, helpMessage, zIndex, tooltipZIndex, ...props }: SearchInputProps): JSX.Element;
+declare namespace SearchInput {
+    var defaultProps: {
+        size: string;
+    };
+}
+export default SearchInput;
+export { SearchInputProps, SearchItem, StyledFlexProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiBxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,eAAoB,EACpB,aAAkB,EAClB,aAAa,EACb,YAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,MAAM,EACN,aAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyIhC;kBA9JuB,WAAW;;;;;eAAX,WAAW;AAoKnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}