@canonical/react-components 0.40.1 → 0.42.0

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 (127) hide show
  1. package/dist/__mocks__/nanoid.js +0 -2
  2. package/dist/components/Accordion/Accordion.js +13 -37
  3. package/dist/components/Accordion/AccordionSection/AccordionSection.js +8 -14
  4. package/dist/components/Accordion/AccordionSection/index.js +0 -2
  5. package/dist/components/Accordion/index.js +0 -2
  6. package/dist/components/ActionButton/ActionButton.js +36 -68
  7. package/dist/components/ActionButton/index.js +0 -2
  8. package/dist/components/ArticlePagination/ArticlePagination.js +5 -15
  9. package/dist/components/ArticlePagination/index.js +0 -2
  10. package/dist/components/Badge/Badge.js +10 -28
  11. package/dist/components/Badge/index.js +0 -2
  12. package/dist/components/Button/Button.js +12 -25
  13. package/dist/components/Button/index.js +0 -4
  14. package/dist/components/Card/Card.js +6 -17
  15. package/dist/components/Card/index.js +0 -2
  16. package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +6 -20
  17. package/dist/components/CheckboxInput/CheckableInput/index.js +0 -2
  18. package/dist/components/CheckboxInput/CheckboxInput.js +3 -13
  19. package/dist/components/CheckboxInput/index.js +0 -2
  20. package/dist/components/Chip/Chip.js +18 -35
  21. package/dist/components/Chip/index.js +0 -2
  22. package/dist/components/Code/Code.js +5 -23
  23. package/dist/components/Code/index.js +0 -2
  24. package/dist/components/CodeSnippet/CodeSnippet.js +2 -12
  25. package/dist/components/CodeSnippet/CodeSnippetBlock.js +10 -18
  26. package/dist/components/CodeSnippet/CodeSnippetDropdown.js +5 -14
  27. package/dist/components/CodeSnippet/index.js +0 -3
  28. package/dist/components/Col/Col.js +15 -25
  29. package/dist/components/Col/index.js +0 -4
  30. package/dist/components/ContextualMenu/ContextualMenu.js +70 -105
  31. package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +51 -88
  32. package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +0 -2
  33. package/dist/components/ContextualMenu/index.js +0 -2
  34. package/dist/components/Field/Field.js +35 -51
  35. package/dist/components/Field/index.js +0 -2
  36. package/dist/components/Form/Form.js +4 -14
  37. package/dist/components/Form/index.js +0 -2
  38. package/dist/components/Icon/Icon.js +3 -14
  39. package/dist/components/Icon/index.js +0 -4
  40. package/dist/components/Input/Input.js +21 -39
  41. package/dist/components/Input/index.js +0 -2
  42. package/dist/components/Label/Label.js +7 -13
  43. package/dist/components/Label/index.js +0 -2
  44. package/dist/components/Link/Link.js +10 -22
  45. package/dist/components/Link/index.js +0 -2
  46. package/dist/components/List/List.js +18 -31
  47. package/dist/components/List/index.js +0 -2
  48. package/dist/components/Loader/Loader.js +0 -7
  49. package/dist/components/Loader/index.js +0 -2
  50. package/dist/components/MainTable/MainTable.js +60 -112
  51. package/dist/components/MainTable/index.js +0 -2
  52. package/dist/components/Modal/Modal.js +7 -34
  53. package/dist/components/Modal/index.js +0 -2
  54. package/dist/components/ModularTable/ModularTable.d.ts +9 -1
  55. package/dist/components/ModularTable/ModularTable.js +74 -63
  56. package/dist/components/ModularTable/index.js +0 -2
  57. package/dist/components/Navigation/Navigation.js +46 -82
  58. package/dist/components/Navigation/NavigationLink/NavigationLink.js +15 -30
  59. package/dist/components/Navigation/NavigationLink/index.js +0 -2
  60. package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +12 -35
  61. package/dist/components/Navigation/NavigationMenu/index.js +0 -2
  62. package/dist/components/Navigation/index.js +0 -2
  63. package/dist/components/Notification/Notification.d.ts +6 -1
  64. package/dist/components/Notification/Notification.js +31 -46
  65. package/dist/components/Notification/index.js +0 -4
  66. package/dist/components/Pagination/Pagination.js +14 -44
  67. package/dist/components/Pagination/PaginationButton/PaginationButton.js +7 -14
  68. package/dist/components/Pagination/PaginationButton/index.js +0 -2
  69. package/dist/components/Pagination/PaginationItem/PaginationItem.js +3 -8
  70. package/dist/components/Pagination/PaginationItem/index.js +0 -2
  71. package/dist/components/Pagination/index.js +0 -2
  72. package/dist/components/PasswordToggle/PasswordToggle.js +21 -50
  73. package/dist/components/PasswordToggle/index.js +0 -2
  74. package/dist/components/RadioInput/RadioInput.js +1 -11
  75. package/dist/components/RadioInput/index.js +0 -2
  76. package/dist/components/Row/Row.js +2 -12
  77. package/dist/components/Row/index.js +0 -2
  78. package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +27 -49
  79. package/dist/components/SearchAndFilter/FilterPanelSection/index.js +0 -2
  80. package/dist/components/SearchAndFilter/SearchAndFilter.d.ts +9 -1
  81. package/dist/components/SearchAndFilter/SearchAndFilter.js +84 -105
  82. package/dist/components/SearchAndFilter/index.js +0 -2
  83. package/dist/components/SearchAndFilter/utils.js +1 -7
  84. package/dist/components/SearchBox/SearchBox.js +18 -38
  85. package/dist/components/SearchBox/index.js +0 -2
  86. package/dist/components/Select/Select.js +20 -33
  87. package/dist/components/Select/index.js +0 -2
  88. package/dist/components/Slider/Slider.js +16 -32
  89. package/dist/components/Slider/index.js +0 -2
  90. package/dist/components/Spinner/Spinner.js +8 -19
  91. package/dist/components/Spinner/index.js +0 -2
  92. package/dist/components/StatusLabel/StatusLabel.js +4 -15
  93. package/dist/components/StatusLabel/index.js +0 -4
  94. package/dist/components/Strip/Strip.js +25 -36
  95. package/dist/components/Strip/index.js +0 -2
  96. package/dist/components/SummaryButton/SummaryButton.js +4 -10
  97. package/dist/components/SummaryButton/index.js +0 -2
  98. package/dist/components/Switch/Switch.js +3 -12
  99. package/dist/components/Switch/index.js +0 -2
  100. package/dist/components/Table/Table.js +6 -16
  101. package/dist/components/Table/index.js +0 -2
  102. package/dist/components/TableCell/TableCell.js +10 -20
  103. package/dist/components/TableCell/index.js +0 -2
  104. package/dist/components/TableHeader/TableHeader.js +2 -11
  105. package/dist/components/TableHeader/index.js +0 -2
  106. package/dist/components/TableRow/TableRow.js +1 -10
  107. package/dist/components/TableRow/index.js +0 -2
  108. package/dist/components/Tabs/Tabs.js +7 -17
  109. package/dist/components/Tabs/index.js +0 -2
  110. package/dist/components/Textarea/Textarea.js +23 -36
  111. package/dist/components/Textarea/index.js +0 -2
  112. package/dist/components/Tooltip/Tooltip.js +42 -87
  113. package/dist/components/Tooltip/index.js +0 -4
  114. package/dist/enums.js +4 -6
  115. package/dist/hooks/index.js +0 -8
  116. package/dist/hooks/useClickOutside.js +2 -7
  117. package/dist/hooks/useId.js +0 -4
  118. package/dist/hooks/useListener.js +0 -8
  119. package/dist/hooks/useOnEscapePressed.js +0 -3
  120. package/dist/hooks/usePagination.js +13 -25
  121. package/dist/hooks/usePrevious.js +0 -3
  122. package/dist/hooks/useThrottle.js +1 -15
  123. package/dist/hooks/useWindowFitment.d.ts +12 -0
  124. package/dist/hooks/useWindowFitment.js +22 -17
  125. package/dist/index.js +0 -52
  126. package/dist/utils.js +3 -10
  127. package/package.json +36 -35
@@ -1,108 +1,90 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Label = void 0;
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _FilterPanelSection = _interopRequireDefault(require("./FilterPanelSection"));
15
-
16
11
  var _Chip = _interopRequireDefault(require("../Chip"));
17
-
18
12
  var _utils = require("./utils");
19
-
20
13
  var _hooks = require("../../hooks");
21
-
22
- var _excluded = ["existingSearchData", "filterPanelData", "returnSearchData"];
23
-
14
+ var _excluded = ["existingSearchData", "filterPanelData", "returnSearchData", "onPanelToggle", "onExpandChange"];
24
15
  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
16
  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
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
29
-
30
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); }
31
-
32
19
  function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
33
-
34
20
  function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
35
-
36
21
  function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
37
-
38
22
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
39
-
40
23
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
41
-
42
24
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
43
-
44
25
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
45
-
46
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
47
-
48
- function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
49
-
26
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
27
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
50
28
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
51
-
52
29
  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; }
53
-
54
30
  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; }
55
-
56
- var Label;
57
- exports.Label = Label;
58
-
59
- (function (Label) {
31
+ var Label = /*#__PURE__*/function (Label) {
60
32
  Label["AddFilter"] = "Add filter";
61
33
  Label["Clear"] = "Clear input";
62
34
  Label["SearchAndFilter"] = "Search and filter";
63
- })(Label || (exports.Label = Label = {}));
64
-
35
+ return Label;
36
+ }({});
37
+ exports.Label = Label;
65
38
  var SearchAndFilter = function SearchAndFilter(_ref) {
66
39
  var _ref$existingSearchDa = _ref.existingSearchData,
67
- existingSearchData = _ref$existingSearchDa === void 0 ? [] : _ref$existingSearchDa,
68
- filterPanelData = _ref.filterPanelData,
69
- returnSearchData = _ref.returnSearchData,
70
- props = _objectWithoutProperties(_ref, _excluded);
71
-
40
+ existingSearchData = _ref$existingSearchDa === void 0 ? [] : _ref$existingSearchDa,
41
+ filterPanelData = _ref.filterPanelData,
42
+ returnSearchData = _ref.returnSearchData,
43
+ _ref$onPanelToggle = _ref.onPanelToggle,
44
+ onPanelToggle = _ref$onPanelToggle === void 0 ? function () {} : _ref$onPanelToggle,
45
+ _ref$onExpandChange = _ref.onExpandChange,
46
+ onExpandChange = _ref$onExpandChange === void 0 ? function () {} : _ref$onExpandChange,
47
+ props = _objectWithoutProperties(_ref, _excluded);
72
48
  var _useState = (0, _react.useState)(existingSearchData),
73
- _useState2 = _slicedToArray(_useState, 2),
74
- searchData = _useState2[0],
75
- setSearchData = _useState2[1];
76
-
49
+ _useState2 = _slicedToArray(_useState, 2),
50
+ searchData = _useState2[0],
51
+ setSearchData = _useState2[1];
77
52
  var _useState3 = (0, _react.useState)(""),
78
- _useState4 = _slicedToArray(_useState3, 2),
79
- searchTerm = _useState4[0],
80
- setSearchTerm = _useState4[1];
81
-
53
+ _useState4 = _slicedToArray(_useState3, 2),
54
+ searchTerm = _useState4[0],
55
+ setSearchTerm = _useState4[1];
82
56
  var _useState5 = (0, _react.useState)(true),
83
- _useState6 = _slicedToArray(_useState5, 2),
84
- filterPanelHidden = _useState6[0],
85
- setFilterPanelHidden = _useState6[1];
86
-
57
+ _useState6 = _slicedToArray(_useState5, 2),
58
+ filterPanelHidden = _useState6[0],
59
+ setFilterPanelHidden = _useState6[1];
87
60
  var _useState7 = (0, _react.useState)(false),
88
- _useState8 = _slicedToArray(_useState7, 2),
89
- searchBoxExpanded = _useState8[0],
90
- setSearchBoxExpanded = _useState8[1];
91
-
61
+ _useState8 = _slicedToArray(_useState7, 2),
62
+ searchBoxExpanded = _useState8[0],
63
+ setSearchBoxExpanded = _useState8[1];
92
64
  var _useState9 = (0, _react.useState)(0),
93
- _useState10 = _slicedToArray(_useState9, 2),
94
- overflowSearchTermCounter = _useState10[0],
95
- setOverflowSearchTermCounter = _useState10[1];
96
-
65
+ _useState10 = _slicedToArray(_useState9, 2),
66
+ overflowSearchTermCounter = _useState10[0],
67
+ setOverflowSearchTermCounter = _useState10[1];
97
68
  var _useState11 = (0, _react.useState)(false),
98
- _useState12 = _slicedToArray(_useState11, 2),
99
- searchContainerActive = _useState12[0],
100
- setSearchContainerActive = _useState12[1];
101
-
69
+ _useState12 = _slicedToArray(_useState11, 2),
70
+ searchContainerActive = _useState12[0],
71
+ setSearchContainerActive = _useState12[1];
72
+ var _useState13 = (0, _react.useState)(),
73
+ _useState14 = _slicedToArray(_useState13, 2),
74
+ maxHeight = _useState14[0],
75
+ setMaxHeight = _useState14[1];
102
76
  var searchAndFilterRef = (0, _react.useRef)(null);
103
77
  var searchContainerRef = (0, _react.useRef)(null);
104
- var searchBoxRef = (0, _react.useRef)(null); // Return searchData to parent component
78
+ var searchBoxRef = (0, _react.useRef)(null);
79
+ var panel = (0, _react.useRef)();
80
+
81
+ // Call onPanelToggle when the filterPanelHidden state changes
82
+ (0, _react.useEffect)(onPanelToggle, [onPanelToggle, filterPanelHidden]);
105
83
 
84
+ // Call onExpandChange when the search box is expanded or collapsed
85
+ (0, _react.useEffect)(onExpandChange, [onExpandChange, searchBoxExpanded]);
86
+
87
+ // Return searchData to parent component
106
88
  (0, _react.useEffect)(function () {
107
89
  var mounted = true;
108
90
  returnSearchData && mounted && returnSearchData(searchData);
@@ -110,57 +92,52 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
110
92
  mounted = false;
111
93
  };
112
94
  }, [searchData, returnSearchData]);
113
-
114
95
  var searchOnChange = function searchOnChange(searchTerm) {
115
96
  setSearchTerm(searchTerm);
116
- }; // Hide manual input form field when search container is inactive
117
-
97
+ };
118
98
 
99
+ // Hide manual input form field when search container is inactive
119
100
  (0, _react.useEffect)(function () {
120
101
  var searchContainerClickCheck = function searchContainerClickCheck(e) {
121
102
  var _e$target;
122
-
123
103
  var clickInContainer = ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest(".p-search-and-filter")) !== null;
124
104
  setSearchContainerActive(clickInContainer);
125
105
  };
126
-
127
106
  document.addEventListener("click", searchContainerClickCheck);
128
107
  return function () {
129
108
  document.removeEventListener("click", searchContainerClickCheck);
130
109
  };
131
110
  }, [searchContainerActive]);
132
-
133
111
  var closePanel = function closePanel() {
134
112
  setFilterPanelHidden(true);
135
113
  };
136
-
137
114
  (0, _hooks.useOnEscapePressed)(function () {
138
115
  return closePanel();
139
- }); // This useEffect sets up listeners so the panel will close if user clicks
140
- // anywhere else on the page or hits the escape key
116
+ });
141
117
 
118
+ // This useEffect sets up listeners so the panel will close if user clicks
119
+ // anywhere else on the page or hits the escape key
142
120
  (0, _react.useEffect)(function () {
143
121
  var mouseDown = function mouseDown(e) {
144
122
  var _searchAndFilterRef$c;
145
-
146
123
  // Check if click is outside of filter panel
147
124
  if (!(searchAndFilterRef !== null && searchAndFilterRef !== void 0 && (_searchAndFilterRef$c = searchAndFilterRef.current) !== null && _searchAndFilterRef$c !== void 0 && _searchAndFilterRef$c.contains(e.target))) {
148
125
  // If so, close the panel
149
126
  closePanel();
150
127
  }
151
- }; // Add listener on document to capture click events
152
-
153
-
154
- document.addEventListener("mousedown", mouseDown); // return function to be called when unmounted
128
+ };
155
129
 
130
+ // Add listener on document to capture click events
131
+ document.addEventListener("mousedown", mouseDown);
132
+ // return function to be called when unmounted
156
133
  return function () {
157
134
  document.removeEventListener("mousedown", mouseDown);
158
135
  };
159
- }, []); // Add passed chip to the searchData array
136
+ }, []);
160
137
 
138
+ // Add passed chip to the searchData array
161
139
  var toggleSelected = function toggleSelected(chip) {
162
140
  var currentSelected = _toConsumableArray(searchData);
163
-
164
141
  if (!(0, _utils.isChipInArray)(chip, currentSelected)) {
165
142
  currentSelected.push(chip);
166
143
  setSearchData(currentSelected);
@@ -171,9 +148,9 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
171
148
  });
172
149
  setSearchData(updatedCurrentSelected);
173
150
  }
174
- }; // Remove passed chip from the searchData array
175
-
151
+ };
176
152
 
153
+ // Remove passed chip from the searchData array
177
154
  var removeFromSelected = function removeFromSelected(chip) {
178
155
  if (searchData.includes(chip)) {
179
156
  var updatedSelected = searchData.filter(function (searchDataChip) {
@@ -181,17 +158,16 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
181
158
  });
182
159
  setSearchData(updatedSelected);
183
160
  }
184
- }; // When overflow chips are shown, clicking anywhere outside search area
185
- // or clicking on a chip should hide them again
186
-
161
+ };
187
162
 
163
+ // When overflow chips are shown, clicking anywhere outside search area
164
+ // or clicking on a chip should hide them again
188
165
  (0, _react.useEffect)(function () {
189
166
  var hideOverflowChips = function hideOverflowChips(e) {
190
167
  if (!e.target.closest(".p-search-and-filter") && e.target.className !== "p-icon--close") {
191
168
  setSearchBoxExpanded(false);
192
169
  }
193
170
  };
194
-
195
171
  document.addEventListener("click", function (e) {
196
172
  hideOverflowChips(e);
197
173
  });
@@ -201,7 +177,6 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
201
177
  });
202
178
  };
203
179
  }, []);
204
-
205
180
  var handleSubmit = function handleSubmit() {
206
181
  if (searchTerm.trim() !== "") {
207
182
  toggleSelected({
@@ -210,24 +185,22 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
210
185
  });
211
186
  setSearchTerm("");
212
187
  }
213
- }; // If the offsetTop is more than double height of a single chip, consider it
214
- // overflowing
215
-
188
+ };
216
189
 
190
+ // If the offsetTop is more than double height of a single chip, consider it
191
+ // overflowing
217
192
  var updateFlowCount = function updateFlowCount() {
218
193
  var _searchContainerRef$c;
219
-
220
194
  var chips = searchContainerRef === null || searchContainerRef === void 0 ? void 0 : (_searchContainerRef$c = searchContainerRef.current) === null || _searchContainerRef$c === void 0 ? void 0 : _searchContainerRef$c.querySelectorAll(".p-chip");
221
195
  var overflowCount = (0, _utils.overflowingChipsCount)(chips, 1);
222
196
  setOverflowSearchTermCounter(overflowCount);
223
- }; // Watch for container resize and recalculate overflow count accordingly
224
-
197
+ };
225
198
 
199
+ // Watch for container resize and recalculate overflow count accordingly
226
200
  (0, _react.useEffect)(function () {
227
201
  var resizeObserverSupported = typeof ResizeObserver !== "undefined";
228
202
  var wrapper = searchContainerRef.current;
229
203
  var wrapperWidthObserver;
230
-
231
204
  if (resizeObserverSupported && wrapper) {
232
205
  wrapperWidthObserver = new ResizeObserver(function () {
233
206
  updateFlowCount();
@@ -236,34 +209,33 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
236
209
  } else {
237
210
  updateFlowCount();
238
211
  }
239
-
240
212
  return function () {
241
213
  var _wrapperWidthObserver;
242
-
243
214
  resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
244
215
  };
245
- }, [searchData]); // Add search prompt value to search on Enter key
216
+ }, [searchData]);
217
+ (0, _hooks.useWindowFitment)(panel.current, searchAndFilterRef.current, function (fitsWindow) {
218
+ return setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
219
+ }, 0, !filterPanelHidden);
246
220
 
221
+ // Add search prompt value to search on Enter key
247
222
  var searchPromptKeyDown = function searchPromptKeyDown(e) {
248
223
  if (e.key === "Enter") {
249
224
  handleSubmit();
250
225
  }
251
226
  };
252
-
253
227
  var searchBox = searchBoxRef.current;
254
228
  var searchContainer = searchContainerRef.current;
255
-
256
229
  if (!searchBoxExpanded && searchBox && searchContainer && overflowSearchTermCounter === 0) {
257
230
  if (searchBox.offsetTop > searchContainer.offsetHeight) {
258
231
  setSearchBoxExpanded(true);
259
232
  }
260
- } // If chips or input field contains values, clear 'em out
261
-
233
+ }
262
234
 
235
+ // If chips or input field contains values, clear 'em out
263
236
  var clearAllSearchTerms = function clearAllSearchTerms() {
264
237
  setSearchTerm("");
265
238
  };
266
-
267
239
  var placeholder = searchData.length ? Label.AddFilter : Label.SearchAndFilter;
268
240
  return /*#__PURE__*/_react.default.createElement("div", _extends({
269
241
  className: "p-search-and-filter",
@@ -333,7 +305,13 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
333
305
  tabIndex: 0
334
306
  }, "+", overflowSearchTermCounter)), (filterPanelData.length > 0 || searchTerm.length > 0) && /*#__PURE__*/_react.default.createElement("div", {
335
307
  className: "p-search-and-filter__panel",
336
- "aria-hidden": filterPanelHidden
308
+ "aria-hidden": filterPanelHidden,
309
+ ref: panel,
310
+ style: {
311
+ maxHeight: maxHeight,
312
+ minHeight: "5rem",
313
+ overflowX: "auto"
314
+ }
337
315
  }, /*#__PURE__*/_react.default.createElement("div", null, searchTerm.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
338
316
  className: "p-search-and-filter__search-prompt",
339
317
  onClick: function onClick() {
@@ -356,11 +334,12 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
356
334
  });
357
335
  }))));
358
336
  };
359
-
360
337
  SearchAndFilter.propTypes = {
361
338
  existingSearchData: _propTypes.default.array,
362
339
  filterPanelData: _propTypes.default.array.isRequired,
363
- returnSearchData: _propTypes.default.func.isRequired
340
+ returnSearchData: _propTypes.default.func.isRequired,
341
+ onPanelToggle: _propTypes.default.func,
342
+ onExpandChange: _propTypes.default.func
364
343
  };
365
344
  var _default = SearchAndFilter;
366
345
  exports.default = _default;
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
9
9
  return _SearchAndFilter.default;
10
10
  }
11
11
  });
12
-
13
12
  var _SearchAndFilter = _interopRequireDefault(require("./SearchAndFilter"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.overflowingChipsCount = exports.isChipInArray = void 0;
7
-
8
7
  /**
9
8
  * Return number of overflowing chips given a row threshold
10
9
  * @param {array} chips - An array of chips
@@ -13,28 +12,23 @@ exports.overflowingChipsCount = exports.isChipInArray = void 0;
13
12
  */
14
13
  var overflowingChipsCount = function overflowingChipsCount(chips, overflowRowLimit) {
15
14
  var overflowChips = 0;
16
-
17
15
  if (chips) {
18
16
  chips.forEach(function (chip) {
19
17
  if (chip.offsetTop > chip.offsetHeight * overflowRowLimit) overflowChips++;
20
18
  });
21
19
  }
22
-
23
20
  return overflowChips;
24
21
  };
22
+
25
23
  /**
26
24
  * Check if supplied chip object already exists in searchData prop
27
25
  * @param {Object} chip - A chip object {lead: 'foo', value: 'bar'}
28
26
  * @param {Array} existingArr - An array of chip objects
29
27
  */
30
-
31
-
32
28
  exports.overflowingChipsCount = overflowingChipsCount;
33
-
34
29
  var isChipInArray = function isChipInArray(chip, existingArr) {
35
30
  return existingArr === null || existingArr === void 0 ? void 0 : existingArr.some(function (searchDataItem) {
36
31
  return searchDataItem.lead === chip.lead && searchDataItem.value === chip.value;
37
32
  });
38
33
  };
39
-
40
34
  exports.isChipInArray = isChipInArray;
@@ -1,71 +1,52 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Label = void 0;
9
-
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _Icon = _interopRequireDefault(require("../Icon"));
15
-
16
11
  var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldRefocusAfterReset", "value"];
17
-
18
12
  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); }
19
-
20
13
  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; }
21
-
22
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
-
24
15
  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
-
26
16
  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
-
28
17
  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; }
29
-
30
- var Label;
31
- exports.Label = Label;
32
-
33
- (function (Label) {
18
+ var Label = /*#__PURE__*/function (Label) {
34
19
  Label["Clear"] = "Clear search field";
35
20
  Label["Search"] = "Search";
36
- })(Label || (exports.Label = Label = {}));
37
-
21
+ return Label;
22
+ }({});
23
+ exports.Label = Label;
38
24
  var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
39
25
  var _ref$autocomplete = _ref.autocomplete,
40
- autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
41
- className = _ref.className,
42
- disabled = _ref.disabled,
43
- externallyControlled = _ref.externallyControlled,
44
- _onChange = _ref.onChange,
45
- onSearch = _ref.onSearch,
46
- onClear = _ref.onClear,
47
- _ref$placeholder = _ref.placeholder,
48
- placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
49
- shouldRefocusAfterReset = _ref.shouldRefocusAfterReset,
50
- value = _ref.value,
51
- props = _objectWithoutProperties(_ref, _excluded);
52
-
26
+ autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
27
+ className = _ref.className,
28
+ disabled = _ref.disabled,
29
+ externallyControlled = _ref.externallyControlled,
30
+ _onChange = _ref.onChange,
31
+ onSearch = _ref.onSearch,
32
+ onClear = _ref.onClear,
33
+ _ref$placeholder = _ref.placeholder,
34
+ placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
35
+ shouldRefocusAfterReset = _ref.shouldRefocusAfterReset,
36
+ value = _ref.value,
37
+ props = _objectWithoutProperties(_ref, _excluded);
53
38
  var internalRef = (0, _react.useRef)();
54
-
55
39
  var resetInput = function resetInput() {
56
40
  _onChange === null || _onChange === void 0 ? void 0 : _onChange("");
57
41
  onClear === null || onClear === void 0 ? void 0 : onClear();
58
-
59
42
  if (internalRef.current) {
60
43
  internalRef.current.value = "";
61
44
  if (shouldRefocusAfterReset) internalRef.current.focus();
62
45
  }
63
46
  };
64
-
65
47
  var triggerSearch = function triggerSearch() {
66
48
  onSearch && onSearch();
67
49
  };
68
-
69
50
  return /*#__PURE__*/_react.default.createElement("div", {
70
51
  className: (0, _classnames.default)("p-search-box", className)
71
52
  }, /*#__PURE__*/_react.default.createElement("label", {
@@ -82,8 +63,8 @@ var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwarded
82
63
  },
83
64
  placeholder: placeholder,
84
65
  ref: function ref(input) {
85
- internalRef.current = input; // Handle both function and object refs.
86
-
66
+ internalRef.current = input;
67
+ // Handle both function and object refs.
87
68
  if (typeof forwardedRef === "function") {
88
69
  forwardedRef(input);
89
70
  } else if (forwardedRef) {
@@ -108,7 +89,6 @@ var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwarded
108
89
  name: "search"
109
90
  }, Label.Search)));
110
91
  });
111
-
112
92
  SearchBox.displayName = "SearchBox";
113
93
  var _default = SearchBox;
114
94
  exports.default = _default;
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
9
9
  return _SearchBox.default;
10
10
  }
11
11
  });
12
-
13
12
  var _SearchBox = _interopRequireDefault(require("./SearchBox"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,65 +1,53 @@
1
1
  "use strict";
2
2
 
3
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
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
-
12
9
  var _react = _interopRequireWildcard(require("react"));
13
-
14
10
  var _Field = _interopRequireDefault(require("../Field"));
15
-
16
11
  var _hooks = require("../../hooks");
17
-
18
12
  var _excluded = ["label", "value"],
19
- _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
20
-
13
+ _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
21
14
  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); }
22
-
23
15
  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; }
24
-
25
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
-
27
17
  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); }
28
-
29
18
  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; }
30
-
31
19
  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; }
20
+ /**
21
+ * The props for the Select component.
22
+ */
32
23
 
33
24
  var generateOptions = function generateOptions(options) {
34
25
  return options === null || options === void 0 ? void 0 : options.map(function (_ref) {
35
26
  var label = _ref.label,
36
- value = _ref.value,
37
- props = _objectWithoutProperties(_ref, _excluded);
38
-
27
+ value = _ref.value,
28
+ props = _objectWithoutProperties(_ref, _excluded);
39
29
  return /*#__PURE__*/_react.default.createElement("option", _extends({
40
30
  value: value,
41
31
  key: "".concat(value) || label
42
32
  }, props), label);
43
33
  });
44
34
  };
45
-
46
35
  var Select = function Select(_ref2) {
47
36
  var caution = _ref2.caution,
48
- className = _ref2.className,
49
- error = _ref2.error,
50
- help = _ref2.help,
51
- id = _ref2.id,
52
- label = _ref2.label,
53
- labelClassName = _ref2.labelClassName,
54
- _onChange = _ref2.onChange,
55
- options = _ref2.options,
56
- required = _ref2.required,
57
- stacked = _ref2.stacked,
58
- success = _ref2.success,
59
- takeFocus = _ref2.takeFocus,
60
- wrapperClassName = _ref2.wrapperClassName,
61
- selectProps = _objectWithoutProperties(_ref2, _excluded2);
62
-
37
+ className = _ref2.className,
38
+ error = _ref2.error,
39
+ help = _ref2.help,
40
+ id = _ref2.id,
41
+ label = _ref2.label,
42
+ labelClassName = _ref2.labelClassName,
43
+ _onChange = _ref2.onChange,
44
+ options = _ref2.options,
45
+ required = _ref2.required,
46
+ stacked = _ref2.stacked,
47
+ success = _ref2.success,
48
+ takeFocus = _ref2.takeFocus,
49
+ wrapperClassName = _ref2.wrapperClassName,
50
+ selectProps = _objectWithoutProperties(_ref2, _excluded2);
63
51
  var selectRef = (0, _react.useRef)(null);
64
52
  var validationId = (0, _hooks.useId)();
65
53
  var helpId = (0, _hooks.useId)();
@@ -95,6 +83,5 @@ var Select = function Select(_ref2) {
95
83
  ref: selectRef
96
84
  }, selectProps), generateOptions(options)));
97
85
  };
98
-
99
86
  var _default = Select;
100
87
  exports.default = _default;
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "default", {
9
9
  return _Select.default;
10
10
  }
11
11
  });
12
-
13
12
  var _Select = _interopRequireDefault(require("./Select"));
14
-
15
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }