beem-component 1.5.1 → 1.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/components/Accordion/Accordion.js +1 -1
  2. package/dist/components/Avatars/avatars.js +1 -1
  3. package/dist/components/BannerCard/bannerCards.js +1 -1
  4. package/dist/components/Buttons/buttonAlertIcons.js +1 -1
  5. package/dist/components/Buttons/buttonDropdown copy.js +1 -1
  6. package/dist/components/Buttons/buttonIconsOnly.js +1 -1
  7. package/dist/components/Buttons/buttons.js +1 -1
  8. package/dist/components/ChatComponents/ChatBody/chatBody.js +1 -1
  9. package/dist/components/ChatComponents/ChatBody/chatBody.stories.js +5 -1
  10. package/dist/components/ChatComponents/ChatBody/sessionDetails.js +2 -2
  11. package/dist/components/Chats/chat.js +1 -1
  12. package/dist/components/Chats/chatInput.js +1 -1
  13. package/dist/components/Lists/listBox.js +48 -2
  14. package/dist/components/Lists/listBox.stories.js +7 -3
  15. package/dist/components/Lists/listheader.js +1 -1
  16. package/dist/components/Lists/rowLabels.js +1 -1
  17. package/dist/components/Loader/loader.js +1 -1
  18. package/dist/components/Modals/modal.js +6 -7
  19. package/dist/components/NoteBar/noteBar.js +1 -1
  20. package/dist/components/PerformanceIndicator/performanceIndicator.js +1 -1
  21. package/dist/components/Pills/pills.js +1 -1
  22. package/dist/components/Tabs/tabs.js +1 -1
  23. package/dist/components/Tags/tags.js +1 -1
  24. package/dist/components/checkbox.js +1 -1
  25. package/dist/components/dropdown.js +1 -1
  26. package/dist/components/dropdownButton.js +1 -1
  27. package/dist/components/example.js +1 -1
  28. package/dist/components/iconStyles.js +1 -1
  29. package/dist/components/input.js +1 -1
  30. package/dist/components/logo.js +1 -1
  31. package/dist/components/search.js +1 -1
  32. package/dist/components/tabs.js +1 -1
  33. package/dist/components/tags.js +1 -1
  34. package/package.json +3 -3
  35. package/src/App copy.js +51 -0
  36. package/src/App.js +12 -45
  37. package/src/lib/components/ChatComponents/ChatBody/chatBody.stories.js +1 -0
  38. package/src/lib/components/ChatComponents/ChatBody/sessionDetails.js +1 -1
  39. package/src/lib/components/Lists/listBox.js +37 -6
  40. package/src/lib/components/Lists/listBox.stories.js +8 -3
  41. package/src/lib/components/Modals/modal.js +4 -4
  42. package/src/list.scss +4 -0
@@ -54,7 +54,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
54
54
 
55
55
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
56
56
 
57
- 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); }
57
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
58
58
 
59
59
  var _React$createContext = /*#__PURE__*/_react.default.createContext({}),
60
60
  Provider = _React$createContext.Provider,
@@ -25,7 +25,7 @@ var _templateObject;
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
28
- 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); }
28
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
29
29
 
30
30
  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; }
31
31
 
@@ -27,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
27
27
 
28
28
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
29
 
30
- 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); }
30
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
31
31
 
32
32
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
33
33
 
@@ -31,7 +31,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
31
31
 
32
32
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
33
33
 
34
- 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); }
34
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
35
35
 
36
36
  var size = function size(props) {
37
37
  if (props.size === "small") return "1.429rem";
@@ -23,7 +23,7 @@ var _templateObject, _templateObject2, _templateObject3;
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
26
- 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); }
26
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
27
27
 
28
28
  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; }
29
29
 
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -25,7 +25,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
25
 
26
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
27
 
28
- 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); }
28
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
29
29
 
30
30
  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; }
31
31
 
@@ -31,7 +31,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
31
31
 
32
32
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33
33
 
34
- 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); }
34
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
35
35
 
36
36
  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; }
37
37
 
@@ -49,7 +49,11 @@ var ChatBody = function ChatBody() {
49
49
  displayTime: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm"),
50
50
  status: "sent",
51
51
  fileName: /*#__PURE__*/_react.default.createElement("p", null, "chat.png"),
52
- src: _chartImg.default
52
+ src: _chartImg.default,
53
+ sessionDetails: {
54
+ message: /*#__PURE__*/_react.default.createElement("h3", null, "Session Message"),
55
+ time: /*#__PURE__*/_react.default.createElement("p", null, "12:00pm")
56
+ }
53
57
  }), /*#__PURE__*/_react.default.createElement(_chatBody.default.Details, {
54
58
  state: "inbound",
55
59
  session: "live",
@@ -17,7 +17,7 @@ var _templateObject;
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
20
- 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); }
20
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
21
21
 
22
22
  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; }
23
23
 
@@ -25,7 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
25
25
 
26
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
27
 
28
- var SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n text-align: center;\n border-bottom: 0.071rem solid ", ";\n margin: 0.5rem;\n"])), _colors.BmGrey200);
28
+ var SessionDetailsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n text-align: center;\n border-bottom: 0.071rem solid ", ";\n margin: 1rem 0.5rem;\n"])), _colors.BmGrey200);
29
29
 
30
30
  var SessionDetails = function SessionDetails(_ref) {
31
31
  var message = _ref.message,
@@ -23,7 +23,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
26
- 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); }
26
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
27
27
 
28
28
  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; }
29
29
 
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
27
 
@@ -1,20 +1,36 @@
1
1
  "use strict";
2
2
 
3
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.BmListBox = void 0;
7
9
 
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
8
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
13
 
10
14
  var _colors = require("../colors");
11
15
 
12
16
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
17
 
18
+ var _excluded = ["children", "showList", "setShowList"];
19
+
14
20
  var _templateObject;
15
21
 
16
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
23
 
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
+
28
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
29
+
30
+ 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; }
31
+
32
+ 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; }
33
+
18
34
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
35
 
20
36
  var show = function show(isOpen) {
@@ -24,17 +40,47 @@ var show = function show(isOpen) {
24
40
  }
25
41
 
26
42
  if (isOpen === false) {
27
- return "display: none;\n position: absolute;\n margin-top: 0.5rem";
43
+ return "display: none;\n position: absolute; \n margin-top: 0.5rem";
28
44
  }
29
45
  }
30
46
 
31
47
  return "flex";
32
48
  };
33
49
 
34
- var BmListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n flex-direction: column;\n padding: 0.286rem 0rem;\n background: ", ";\n border: 0.071rem solid ", ";\n box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);\n border-radius: 0.25rem;\n z-index: 99999;\n cursor: pointer;\n"])), function (props) {
50
+ var BmListBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n flex-direction: column;\n padding: 0.25rem 0rem;\n background: ", ";\n border: 0.071rem solid ", ";\n box-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);\n border-radius: 0.25rem;\n z-index: 10000;\n cursor: pointer;\n"])), function (props) {
35
51
  return show(props.isOpen);
36
52
  }, _colors.BmPrimaryWhite, _colors.BmGrey400);
37
53
 
54
+ var BmListBox = function BmListBox(_ref) {
55
+ var children = _ref.children,
56
+ showList = _ref.showList,
57
+ setShowList = _ref.setShowList,
58
+ rest = _objectWithoutProperties(_ref, _excluded);
59
+
60
+ var ref = (0, _react.useRef)();
61
+ (0, _react.useEffect)(function () {
62
+ var checkIfClickedOutside = function checkIfClickedOutside(e) {
63
+ if (showList && ref.current && !ref.current.contains(e.target)) {
64
+ setShowList(false);
65
+ }
66
+ };
67
+
68
+ document.addEventListener("mousedown", checkIfClickedOutside);
69
+ return function () {
70
+ document.removeEventListener("mousedown", checkIfClickedOutside);
71
+ };
72
+ }, [setShowList, showList]);
73
+ return /*#__PURE__*/_react.default.createElement(BmListBoxWrapper, _extends({
74
+ ref: ref,
75
+ onClick: function onClick() {
76
+ setShowList(function (oldState) {
77
+ return !oldState;
78
+ });
79
+ },
80
+ isOpen: showList
81
+ }, rest), children);
82
+ };
83
+
38
84
  exports.BmListBox = BmListBox;
39
85
  BmListBox.propTypes = {
40
86
  isOpen: _propTypes.default.bool
@@ -37,8 +37,11 @@ var _default = {
37
37
  component: _listBox.BmListBox,
38
38
  title: "components/Lists/ListBox",
39
39
  argTypes: {
40
- isOpen: {
41
- description: "true/false (optional), Used for handling the display of listbox"
40
+ showList: {
41
+ description: "Used for handling the display of listbox"
42
+ },
43
+ setShowList: {
44
+ description: "Function for handling the display of listbox"
42
45
  }
43
46
  }
44
47
  };
@@ -66,7 +69,8 @@ var FunctionalListBox = function FunctionalListBox() {
66
69
  return showList(!List);
67
70
  }
68
71
  }, "Click Me!"), /*#__PURE__*/_react.default.createElement(_listBox.BmListBox, {
69
- isOpen: List
72
+ showList: List,
73
+ setShowList: showList
70
74
  }, /*#__PURE__*/_react.default.createElement(_rowLabels.BmRowLabel, {
71
75
  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowRight, null),
72
76
  size: "large"
@@ -21,7 +21,7 @@ var _templateObject;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -25,7 +25,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
25
25
 
26
26
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
27
27
 
28
- 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); }
28
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
29
29
 
30
30
  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; }
31
31
 
@@ -30,7 +30,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
30
30
 
31
31
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
32
32
 
33
- 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); }
33
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
34
34
 
35
35
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
36
36
 
@@ -58,11 +58,11 @@ var Overlay = _styledComponents.default.div(_templateObject || (_templateObject
58
58
 
59
59
  exports.Overlay = Overlay;
60
60
 
61
- var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-radius: 0.25rem;\n padding: 1rem;\n margin: auto;\n background: ", ";\n width: auto;\n max-width: 100%;\n\n > *:not(:last-child) {\n margin-bottom: 1rem;\n }\n @media (min-width: 576px) {\n max-width: 500px;\n width: 500px;\n }\n"])), _colors.BmPrimaryWhite);
61
+ var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n border-radius: 0.25rem;\n padding: 1rem;\n margin: 2rem auto;\n background: ", ";\n width: auto;\n max-width: 100%;\n\n > *:not(:last-child) {\n margin-bottom: 1rem;\n }\n @media (min-width: 576px) {\n max-width: 500px;\n width: 500px;\n }\n"])), _colors.BmPrimaryWhite);
62
62
 
63
63
  exports.ModalContent = ModalContent;
64
64
 
65
- var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n display: block;\n width: 100%;\n height: 100%;\n overflow: hidden;\n outline: 0;\n margin: 2rem auto;\n overflow-x: hidden;\n overflow-y: auto;\n"])));
65
+ var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 9999;\n display: block;\n width: 100%;\n height: 100%;\n overflow: hidden;\n outline: 0;\n margin: auto;\n overflow-x: hidden;\n overflow-y: auto;\n"])));
66
66
 
67
67
  exports.ModalWrapper = ModalWrapper;
68
68
 
@@ -133,7 +133,7 @@ BmModal.Header = function (_ref2) {
133
133
  });
134
134
  };
135
135
 
136
- BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n ", "\n ", "\n"])), ''
136
+ BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n > *:not(:last-child) {\n margin-bottom: 0.5rem;\n }\n ", "\n"])), ''
137
137
  /* max-height: ${({ size }) => {
138
138
  if (size) {
139
139
  if (size === "small") return "21.429rem";
@@ -143,9 +143,8 @@ if (size === "xlarge") return "81.429rem";
143
143
  return size;
144
144
  }
145
145
  return "35.714rem";
146
- }}; */
147
- , ''
148
- /* overflow: auto; */
146
+ }};
147
+ overflow: auto; */
149
148
  );
150
149
  BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
151
150
  BmModal.propTypes = {
@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
29
 
30
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
31
 
32
- 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); }
32
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
33
33
 
34
34
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
35
35
 
@@ -23,7 +23,7 @@ var _templateObject;
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
26
- 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); }
26
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
27
27
 
28
28
  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; }
29
29
 
@@ -33,7 +33,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
33
33
 
34
34
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
35
 
36
- 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); }
36
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
37
37
 
38
38
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
39
39
 
@@ -21,7 +21,7 @@ var _templateObject;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
29
 
30
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
31
 
32
- 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); }
32
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
33
33
 
34
34
  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; }
35
35
 
@@ -17,7 +17,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
17
17
 
18
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
19
 
20
- 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); }
20
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
21
21
 
22
22
  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; }
23
23
 
@@ -35,7 +35,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
35
35
 
36
36
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
37
37
 
38
- 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); }
38
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
39
39
 
40
40
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
41
41
 
@@ -23,7 +23,7 @@ var _templateObject, _templateObject2, _templateObject3;
23
23
 
24
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
25
 
26
- 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); }
26
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
27
27
 
28
28
  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; }
29
29
 
@@ -4,7 +4,7 @@ var _excluded = ["variant"];
4
4
 
5
5
  var _variantStyles;
6
6
 
7
- 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); }
7
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
8
8
 
9
9
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
10
10
 
@@ -15,7 +15,7 @@ var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
18
- 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); }
18
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
19
19
 
20
20
  var size = function size(props) {
21
21
  if (props.size === "xsmall") return "1.143rem !important";
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -15,7 +15,7 @@ var _templateObject;
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
18
- 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); }
18
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
19
19
 
20
20
  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; }
21
21
 
@@ -21,7 +21,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
21
21
 
22
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
23
 
24
- 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); }
24
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
25
25
 
26
26
  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; }
27
27
 
@@ -19,7 +19,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
- 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); }
22
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
23
23
 
24
24
  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; }
25
25
 
@@ -19,7 +19,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
21
 
22
- 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); }
22
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
23
23
 
24
24
  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; }
25
25
 
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "1.5.1",
3
+ "version": "1.5.5",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
7
- "start": "react-scripts start",
7
+ "start": "PORT=3002 react-scripts start",
8
8
  "build": "react-scripts build",
9
9
  "test": "react-scripts test",
10
10
  "eject": "react-scripts eject",
@@ -32,7 +32,7 @@
32
32
  "react": "^17.0.2",
33
33
  "react-dom": "^17.0.2",
34
34
  "react-router-dom": "^5.3.0",
35
- "react-scripts": "^5.0.1",
35
+ "react-scripts": "4.0.3",
36
36
  "save": "^2.4.0",
37
37
  "styled-components": "^5.3.0",
38
38
  "web-vitals": "^1.1.2"
@@ -0,0 +1,51 @@
1
+ import React, { useState } from "react";
2
+ import map from "lodash/map";
3
+ import { GlobalStyle, BmModal, BmButton } from "./lib/components";
4
+ import Select from "react-select";
5
+
6
+ const App = () => {
7
+ const [showModal, setShowModal] = useState(false);
8
+
9
+ const VENDOR_ACCOUNT_STATUSES = {
10
+ 0: "Inactive",
11
+ 1: "Active",
12
+ };
13
+
14
+ const VENDOR_ACCOUNT_STATUS_OPTIONS = map(
15
+ VENDOR_ACCOUNT_STATUSES,
16
+ (type, key) => ({
17
+ value: key,
18
+ label: type,
19
+ }),
20
+ );
21
+ return (
22
+ <>
23
+ <GlobalStyle />
24
+ <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
25
+ <BmModal
26
+ size="small"
27
+ show={showModal}
28
+ onHide={() => setShowModal(false)}
29
+ centered
30
+ >
31
+ <BmModal.Header closeButton>
32
+ <h2>Header</h2>
33
+ </BmModal.Header>
34
+ <BmModal.Body>
35
+ <Select
36
+ options={VENDOR_ACCOUNT_STATUS_OPTIONS}
37
+ placeholder="Select"
38
+ />
39
+ </BmModal.Body>
40
+ <BmModal.Footer>
41
+ <BmButton size="small">Send</BmButton>
42
+ <BmButton size="small" variant="secondary">
43
+ View
44
+ </BmButton>
45
+ </BmModal.Footer>
46
+ </BmModal>
47
+ </>
48
+ );
49
+ };
50
+
51
+ export default App;
package/src/App.js CHANGED
@@ -1,54 +1,21 @@
1
1
  import React, { useState } from "react";
2
- import map from "lodash/map";
3
- import { GlobalStyle, BmModal, BmButton } from "./lib/components";
4
- import Select from 'react-select';
2
+ import { GlobalStyle, BmRowLabel, BmListBox, BmButton } from "./lib/components";
3
+ import "./list.scss";
5
4
 
6
5
  const App = () => {
7
- const [showModal, setShowModal] = useState(false);
8
-
9
- const VENDOR_ACCOUNT_STATUSES = {
10
- 0: "Inactive",
11
- 1: "Active",
12
- };
13
-
14
- const VENDOR_ACCOUNT_STATUS_OPTIONS = map(
15
- VENDOR_ACCOUNT_STATUSES,
16
- (type, key) => ({
17
- value: key,
18
- label: type,
19
- }),
20
- );
6
+ const [showList, setShowList] = useState(false);
21
7
  return (
22
8
  <>
23
9
  <GlobalStyle />
24
- <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
25
- <BmModal
26
- size="small"
27
- show={showModal}
28
- onHide={() => setShowModal(false)}
29
- centered
30
- >
31
- <BmModal.Header closeButton>
32
- <h2>Header</h2>
33
- </BmModal.Header>
34
- <BmModal.Body>
35
- <Select
36
- // value={{
37
- // label: VENDOR_ACCOUNT_STATUSES[values.active],
38
- // value: values.active,
39
- // }}
40
- options={VENDOR_ACCOUNT_STATUS_OPTIONS}
41
- placeholder="Select"
42
- // onChange={(option) => setFieldValue("active", option.value)}
43
- />{" "}
44
- </BmModal.Body>
45
- <BmModal.Footer>
46
- <BmButton size="small">Send</BmButton>
47
- <BmButton size="small" variant="secondary">
48
- View
49
- </BmButton>
50
- </BmModal.Footer>
51
- </BmModal>
10
+ <BmListBox className="listbox" setShowList={setShowList}>
11
+ <BmRowLabel size="large">
12
+ <h4>Row Label</h4>
13
+ </BmRowLabel>
14
+ <BmRowLabel size="large">
15
+ <h4>Row Label</h4>
16
+ </BmRowLabel>
17
+ </BmListBox>
18
+ <BmButton onClick={() => setShowList(!showList)}>Click Me!</BmButton>
52
19
  </>
53
20
  );
54
21
  };
@@ -34,6 +34,7 @@ export const ChatBody = () => {
34
34
  status='sent'
35
35
  fileName={<p>chat.png</p>}
36
36
  src={image}
37
+ sessionDetails={{ message: <h3>Session Message</h3>, time: <p>12:00pm</p> }}
37
38
  />
38
39
  <BmChat.Details
39
40
  state='inbound'
@@ -9,7 +9,7 @@ const SessionDetailsWrapper = styled.div`
9
9
  align-items: center;
10
10
  text-align: center;
11
11
  border-bottom: 0.071rem solid ${BmGrey200};
12
- margin: 0.5rem;
12
+ margin: 1rem 0.5rem;
13
13
  `;
14
14
 
15
15
  export const SessionDetails = ({ message, time, ...rest }) => {
@@ -1,3 +1,4 @@
1
+ import React, { useEffect, useRef } from "react";
1
2
  import styled from "styled-components";
2
3
  import { BmGrey400, BmPrimaryWhite } from "../colors";
3
4
  import PropTypes from "prop-types";
@@ -11,24 +12,54 @@ const show = (isOpen) => {
11
12
  }
12
13
  if (isOpen === false) {
13
14
  return `display: none;
14
- position: absolute;
15
+ position: absolute;
15
16
  margin-top: 0.5rem`;
16
17
  }
17
18
  }
18
19
  return "flex";
19
20
  };
20
- export const BmListBox = styled.div`
21
+
22
+ const BmListBoxWrapper = styled.div`
21
23
  ${(props) => show(props.isOpen)};
22
24
  flex-direction: column;
23
- padding: 0.286rem 0rem;
25
+ padding: 0.25rem 0rem;
24
26
  background: ${BmPrimaryWhite};
25
27
  border: 0.071rem solid ${BmGrey400};
26
- box-shadow: 0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25);
28
+ box-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
27
29
  border-radius: 0.25rem;
28
- z-index: 99999;
30
+ z-index: 10000;
29
31
  cursor: pointer;
30
32
  `;
31
33
 
34
+ export const BmListBox = ({ children, showList, setShowList, ...rest }) => {
35
+ const ref = useRef();
36
+
37
+ useEffect(() => {
38
+ const checkIfClickedOutside = (e) => {
39
+ if (showList && ref.current && !ref.current.contains(e.target)) {
40
+ setShowList(false);
41
+ }
42
+ };
43
+ document.addEventListener("mousedown", checkIfClickedOutside);
44
+ return () => {
45
+ document.removeEventListener("mousedown", checkIfClickedOutside);
46
+ };
47
+ }, [setShowList, showList]);
48
+
49
+ return (
50
+ <BmListBoxWrapper
51
+ ref={ref}
52
+ onClick={() => {
53
+ setShowList((oldState) => !oldState);
54
+ }}
55
+ isOpen={showList}
56
+ {...rest}
57
+ >
58
+ {children}
59
+ </BmListBoxWrapper>
60
+ );
61
+ };
62
+
32
63
  BmListBox.propTypes = {
33
64
  isOpen: PropTypes.bool,
34
- }
65
+ };
@@ -9,10 +9,15 @@ export default {
9
9
  component: BmListBox,
10
10
  title: "components/Lists/ListBox",
11
11
  argTypes: {
12
- isOpen: {
12
+ showList: {
13
13
  description:
14
- "true/false (optional), Used for handling the display of listbox",
14
+ "Used for handling the display of listbox",
15
15
  },
16
+ setShowList: {
17
+ description:
18
+ "Function for handling the display of listbox",
19
+ },
20
+
16
21
  },
17
22
  };
18
23
 
@@ -34,7 +39,7 @@ export const FunctionalListBox = () => {
34
39
  return (
35
40
  <>
36
41
  <BmButton onClick={() => showList(!List)}>Click Me!</BmButton>
37
- <BmListBox isOpen={List}>
42
+ <BmListBox showList={List} setShowList={showList}>
38
43
  <BmRowLabel trailingIcon={<KeyboardArrowRight />} size="large">
39
44
  <h4>Row Label</h4>
40
45
  </BmRowLabel>
@@ -22,7 +22,7 @@ export const ModalContent = styled.div`
22
22
  flex-direction: column;
23
23
  border-radius: 0.25rem;
24
24
  padding: 1rem;
25
- margin: auto;
25
+ margin: 2rem auto;
26
26
  background: ${BmPrimaryWhite};
27
27
  width: auto;
28
28
  max-width: 100%;
@@ -46,7 +46,7 @@ export const ModalWrapper = styled.div`
46
46
  height: 100%;
47
47
  overflow: hidden;
48
48
  outline: 0;
49
- margin: 2rem auto;
49
+ margin: auto;
50
50
  overflow-x: hidden;
51
51
  overflow-y: auto;
52
52
  `;
@@ -143,8 +143,8 @@ BmModal.Body = styled.div`
143
143
  return size;
144
144
  }
145
145
  return "35.714rem";
146
- }}; */}
147
- ${'' /* overflow: auto; */}
146
+ }};
147
+ overflow: auto; */}
148
148
  `;
149
149
 
150
150
  BmModal.Footer = styled.div`
package/src/list.scss ADDED
@@ -0,0 +1,4 @@
1
+ .listbox {
2
+ position: relative;
3
+ top: 1rem;
4
+ }