@canonical/react-components 0.47.1 → 0.47.2
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.
- package/dist/__mocks__/nanoid.js +3 -3
- package/dist/components/Accordion/Accordion.js +28 -41
- package/dist/components/Accordion/AccordionSection/AccordionSection.js +18 -18
- package/dist/components/Accordion/AccordionSection/index.js +1 -1
- package/dist/components/Accordion/index.js +1 -1
- package/dist/components/ActionButton/ActionButton.js +34 -66
- package/dist/components/ActionButton/index.js +1 -1
- package/dist/components/ArticlePagination/ArticlePagination.js +10 -12
- package/dist/components/ArticlePagination/index.js +1 -1
- package/dist/components/Badge/Badge.js +24 -29
- package/dist/components/Badge/index.js +1 -1
- package/dist/components/Button/Button.js +21 -26
- package/dist/components/Button/index.js +4 -5
- package/dist/components/Card/Card.js +12 -14
- package/dist/components/Card/index.js +1 -1
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.js +15 -19
- package/dist/components/CheckboxInput/CheckableInput/index.js +1 -1
- package/dist/components/CheckboxInput/CheckboxInput.js +7 -10
- package/dist/components/CheckboxInput/index.js +1 -1
- package/dist/components/Chip/Chip.js +23 -33
- package/dist/components/Chip/index.js +1 -1
- package/dist/components/Code/Code.js +14 -17
- package/dist/components/Code/index.js +1 -1
- package/dist/components/CodeSnippet/CodeSnippet.js +9 -14
- package/dist/components/CodeSnippet/CodeSnippetBlock.js +24 -29
- package/dist/components/CodeSnippet/CodeSnippetDropdown.js +11 -11
- package/dist/components/CodeSnippet/index.js +2 -2
- package/dist/components/Col/Col.js +24 -26
- package/dist/components/Col/index.js +4 -5
- package/dist/components/ConfirmationButton/ConfirmationButton.js +18 -21
- package/dist/components/ConfirmationButton/index.js +1 -1
- package/dist/components/ConfirmationModal/ConfirmationModal.js +11 -15
- package/dist/components/ConfirmationModal/index.js +1 -1
- package/dist/components/ContextualMenu/ContextualMenu.js +89 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts +4 -4
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js +97 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/index.js +1 -1
- package/dist/components/ContextualMenu/index.js +1 -1
- package/dist/components/EmptyState/EmptyState.js +9 -11
- package/dist/components/EmptyState/index.js +1 -1
- package/dist/components/Field/Field.js +66 -65
- package/dist/components/Field/index.js +1 -1
- package/dist/components/Form/Form.js +9 -11
- package/dist/components/Form/index.js +1 -1
- package/dist/components/Icon/Icon.js +9 -12
- package/dist/components/Icon/index.js +4 -5
- package/dist/components/Input/Input.js +38 -45
- package/dist/components/Input/index.js +1 -1
- package/dist/components/Label/Label.js +9 -11
- package/dist/components/Label/index.js +1 -1
- package/dist/components/Link/Link.js +12 -18
- package/dist/components/Link/index.js +1 -1
- package/dist/components/List/List.js +50 -54
- package/dist/components/List/index.js +1 -1
- package/dist/components/Loader/Loader.js +2 -3
- package/dist/components/Loader/index.js +1 -1
- package/dist/components/MainTable/MainTable.js +87 -104
- package/dist/components/MainTable/index.js +1 -1
- package/dist/components/Modal/Modal.js +37 -38
- package/dist/components/Modal/index.js +1 -1
- package/dist/components/ModularTable/ModularTable.js +63 -77
- package/dist/components/ModularTable/index.js +1 -1
- package/dist/components/Navigation/Navigation.js +63 -97
- package/dist/components/Navigation/NavigationLink/NavigationLink.js +32 -35
- package/dist/components/Navigation/NavigationLink/index.js +1 -1
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.js +26 -45
- package/dist/components/Navigation/NavigationMenu/index.js +1 -1
- package/dist/components/Navigation/index.js +1 -1
- package/dist/components/Notification/Notification.js +49 -59
- package/dist/components/Notification/index.js +4 -5
- package/dist/components/NotificationProvider/NotificationProvider.js +47 -68
- package/dist/components/NotificationProvider/index.js +7 -7
- package/dist/components/NotificationProvider/messageBuilder.js +9 -9
- package/dist/components/NotificationProvider/types.d.ts +1 -0
- package/dist/components/Pagination/Pagination.js +50 -69
- package/dist/components/Pagination/PaginationButton/PaginationButton.js +11 -12
- package/dist/components/Pagination/PaginationButton/index.js +1 -1
- package/dist/components/Pagination/PaginationItem/PaginationItem.js +7 -7
- package/dist/components/Pagination/PaginationItem/index.js +1 -1
- package/dist/components/Pagination/index.js +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.d.ts +1 -1
- package/dist/components/PasswordToggle/PasswordToggle.js +25 -40
- package/dist/components/PasswordToggle/index.js +1 -1
- package/dist/components/RadioInput/RadioInput.js +6 -8
- package/dist/components/RadioInput/index.js +1 -1
- package/dist/components/Row/Row.js +7 -9
- package/dist/components/Row/index.js +1 -1
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js +38 -51
- package/dist/components/SearchAndFilter/FilterPanelSection/index.js +1 -1
- package/dist/components/SearchAndFilter/SearchAndFilter.js +75 -135
- package/dist/components/SearchAndFilter/index.js +1 -1
- package/dist/components/SearchAndFilter/utils.js +4 -8
- package/dist/components/SearchBox/SearchBox.js +25 -33
- package/dist/components/SearchBox/index.js +1 -1
- package/dist/components/Select/Select.js +38 -44
- package/dist/components/Select/index.js +1 -1
- package/dist/components/Slider/Slider.js +27 -35
- package/dist/components/Slider/index.js +1 -1
- package/dist/components/Spinner/Spinner.js +10 -15
- package/dist/components/Spinner/index.js +1 -1
- package/dist/components/StatusLabel/StatusLabel.js +11 -13
- package/dist/components/StatusLabel/index.js +4 -5
- package/dist/components/Strip/Strip.js +27 -34
- package/dist/components/Strip/index.js +1 -1
- package/dist/components/SummaryButton/SummaryButton.js +9 -8
- package/dist/components/SummaryButton/index.js +1 -1
- package/dist/components/Switch/Switch.js +7 -10
- package/dist/components/Switch/index.js +1 -1
- package/dist/components/Table/Table.js +9 -13
- package/dist/components/Table/index.js +1 -1
- package/dist/components/TableCell/TableCell.js +11 -17
- package/dist/components/TableCell/index.js +1 -1
- package/dist/components/TableHeader/TableHeader.js +7 -9
- package/dist/components/TableHeader/index.js +1 -1
- package/dist/components/TablePagination/TablePagination.d.ts +37 -0
- package/dist/components/TablePagination/TablePagination.js +125 -0
- package/dist/components/TablePagination/TablePagination.scss +40 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts +16 -0
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js +66 -0
- package/dist/components/TablePagination/TablePaginationControls/index.d.ts +2 -0
- package/dist/components/TablePagination/TablePaginationControls/index.js +13 -0
- package/dist/components/TablePagination/index.d.ts +2 -0
- package/dist/components/TablePagination/index.js +13 -0
- package/dist/components/TableRow/TableRow.js +6 -8
- package/dist/components/TableRow/index.js +1 -1
- package/dist/components/Tabs/Tabs.js +17 -17
- package/dist/components/Tabs/index.js +1 -1
- package/dist/components/Textarea/Textarea.js +51 -45
- package/dist/components/Textarea/index.js +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +5 -1
- package/dist/components/Tooltip/Tooltip.js +76 -79
- package/dist/components/Tooltip/index.js +4 -5
- package/dist/enums.js +2 -3
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +16 -10
- package/dist/hooks/useId.js +1 -3
- package/dist/hooks/useListener.d.ts +2 -1
- package/dist/hooks/useListener.js +25 -24
- package/dist/hooks/useOnClickOutside.d.ts +12 -0
- package/dist/hooks/useOnClickOutside.js +45 -0
- package/dist/hooks/useOnEscapePressed.d.ts +3 -1
- package/dist/hooks/useOnEscapePressed.js +13 -6
- package/dist/hooks/usePagination.js +17 -29
- package/dist/hooks/usePrevious.js +4 -4
- package/dist/hooks/useThrottle.js +16 -25
- package/dist/hooks/useWindowFitment.js +30 -28
- package/dist/index.d.ts +3 -1
- package/dist/index.js +86 -74
- package/dist/utils.js +6 -13
- package/package.json +42 -35
- package/dist/hooks/useClickOutside.d.ts +0 -6
- package/dist/hooks/useClickOutside.js +0 -32
|
@@ -7,20 +7,20 @@ exports.default = exports.Label = void 0;
|
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
10
|
+
let Label = exports.Label = /*#__PURE__*/function (Label) {
|
|
11
11
|
Label["Next"] = "Next page";
|
|
12
12
|
Label["Previous"] = "Previous page";
|
|
13
13
|
return Label;
|
|
14
14
|
}({});
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
onClick
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
15
|
+
const PaginationButton = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
direction,
|
|
18
|
+
onClick,
|
|
19
|
+
disabled = false,
|
|
20
|
+
showLabel,
|
|
21
|
+
label
|
|
22
|
+
} = _ref;
|
|
23
|
+
const buttonLabel = label || (direction === "back" ? Label.Previous : Label.Next);
|
|
24
24
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
25
25
|
className: "p-pagination__item"
|
|
26
26
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -35,5 +35,4 @@ var PaginationButton = function PaginationButton(_ref) {
|
|
|
35
35
|
className: "p-icon--chevron-down"
|
|
36
36
|
}, buttonLabel), direction === "back" && showLabel && /*#__PURE__*/_react.default.createElement("span", null, buttonLabel)));
|
|
37
37
|
};
|
|
38
|
-
var _default = PaginationButton;
|
|
39
|
-
exports.default = _default;
|
|
38
|
+
var _default = exports.default = PaginationButton;
|
|
@@ -7,11 +7,12 @@ exports.default = void 0;
|
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
isActive =
|
|
10
|
+
const PaginationItem = _ref => {
|
|
11
|
+
let {
|
|
12
|
+
number,
|
|
13
|
+
onClick,
|
|
14
|
+
isActive = false
|
|
15
|
+
} = _ref;
|
|
15
16
|
return /*#__PURE__*/_react.default.createElement("li", {
|
|
16
17
|
className: "p-pagination__item"
|
|
17
18
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
@@ -23,5 +24,4 @@ var PaginationItem = function PaginationItem(_ref) {
|
|
|
23
24
|
type: "button"
|
|
24
25
|
}, number));
|
|
25
26
|
};
|
|
26
|
-
var _default = PaginationItem;
|
|
27
|
-
exports.default = _default;
|
|
27
|
+
var _default = exports.default = PaginationItem;
|
|
@@ -99,5 +99,5 @@ declare const PasswordToggle: React.ForwardRefExoticComponent<{
|
|
|
99
99
|
* Optional class(es) to pass to the wrapping Field component
|
|
100
100
|
*/
|
|
101
101
|
wrapperClassName?: string;
|
|
102
|
-
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "
|
|
102
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "error" | "label" | "id" | "type" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
|
|
103
103
|
export default PasswordToggle;
|
|
@@ -1,6 +1,5 @@
|
|
|
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
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -11,20 +10,11 @@ var _Button = _interopRequireDefault(require("../Button"));
|
|
|
11
10
|
var _Field = _interopRequireDefault(require("../Field"));
|
|
12
11
|
var _Label = _interopRequireDefault(require("../Label"));
|
|
13
12
|
var _hooks = require("../../hooks");
|
|
14
|
-
|
|
15
|
-
function
|
|
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; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
16
|
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
|
-
|
|
20
|
-
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."); }
|
|
21
|
-
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); }
|
|
22
|
-
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; }
|
|
23
|
-
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; } }
|
|
24
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
-
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; }
|
|
26
|
-
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; }
|
|
27
|
-
var Label = /*#__PURE__*/function (Label) {
|
|
17
|
+
let Label = exports.Label = /*#__PURE__*/function (Label) {
|
|
28
18
|
Label["Hide"] = "Hide";
|
|
29
19
|
Label["Show"] = "Show";
|
|
30
20
|
return Label;
|
|
@@ -32,28 +22,26 @@ var Label = /*#__PURE__*/function (Label) {
|
|
|
32
22
|
/**
|
|
33
23
|
* The props for the Password Toggle component.
|
|
34
24
|
*/
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
className
|
|
39
|
-
error
|
|
40
|
-
help
|
|
41
|
-
id
|
|
42
|
-
label
|
|
43
|
-
readOnly
|
|
44
|
-
required
|
|
45
|
-
success
|
|
46
|
-
type
|
|
47
|
-
wrapperClassName
|
|
48
|
-
inputProps
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
var hasError = !!error;
|
|
56
|
-
var togglePassword = function togglePassword() {
|
|
25
|
+
const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
26
|
+
let {
|
|
27
|
+
caution,
|
|
28
|
+
className,
|
|
29
|
+
error,
|
|
30
|
+
help,
|
|
31
|
+
id,
|
|
32
|
+
label,
|
|
33
|
+
readOnly,
|
|
34
|
+
required,
|
|
35
|
+
success,
|
|
36
|
+
type,
|
|
37
|
+
wrapperClassName,
|
|
38
|
+
...inputProps
|
|
39
|
+
} = _ref;
|
|
40
|
+
const [isPassword, setIsPassword] = (0, _react.useState)(true);
|
|
41
|
+
const validationId = (0, _hooks.useId)();
|
|
42
|
+
const helpId = (0, _hooks.useId)();
|
|
43
|
+
const hasError = !!error;
|
|
44
|
+
const togglePassword = () => {
|
|
57
45
|
if (isPassword) {
|
|
58
46
|
setIsPassword(false);
|
|
59
47
|
} else {
|
|
@@ -81,9 +69,7 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
81
69
|
hasIcon: true,
|
|
82
70
|
"aria-controls": id,
|
|
83
71
|
"aria-live": "polite",
|
|
84
|
-
onClick:
|
|
85
|
-
return togglePassword();
|
|
86
|
-
}
|
|
72
|
+
onClick: () => togglePassword()
|
|
87
73
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
88
74
|
className: "p-form-password-toggle__label"
|
|
89
75
|
}, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/_react.default.createElement("i", {
|
|
@@ -99,5 +85,4 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
99
85
|
type: isPassword ? "password" : "text"
|
|
100
86
|
}, inputProps)));
|
|
101
87
|
});
|
|
102
|
-
var _default = PasswordToggle;
|
|
103
|
-
exports.default = _default;
|
|
88
|
+
var _default = exports.default = PasswordToggle;
|
|
@@ -6,18 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _CheckableInput = _interopRequireDefault(require("../CheckboxInput/CheckableInput"));
|
|
9
|
-
var _excluded = ["label"];
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
10
|
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); }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
const RadioInput = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
label,
|
|
14
|
+
...radioProps
|
|
15
|
+
} = _ref;
|
|
17
16
|
return /*#__PURE__*/_react.default.createElement(_CheckableInput.default, _extends({
|
|
18
17
|
inputType: "radio",
|
|
19
18
|
label: label
|
|
20
19
|
}, radioProps));
|
|
21
20
|
};
|
|
22
|
-
var _default = RadioInput;
|
|
23
|
-
exports.default = _default;
|
|
21
|
+
var _default = exports.default = RadioInput;
|
|
@@ -6,18 +6,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _excluded = ["children", "className"];
|
|
10
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
10
|
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); }
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
11
|
+
const Row = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
...props
|
|
16
|
+
} = _ref;
|
|
18
17
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
19
18
|
className: (0, _classnames.default)(className, "row")
|
|
20
19
|
}, props), children);
|
|
21
20
|
};
|
|
22
|
-
var _default = Row;
|
|
23
|
-
exports.default = _default;
|
|
21
|
+
var _default = exports.default = Row;
|
|
@@ -1,6 +1,5 @@
|
|
|
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
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
@@ -10,80 +9,71 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
9
|
var _Chip = _interopRequireDefault(require("../../Chip"));
|
|
11
10
|
var _utils = require("../utils");
|
|
12
11
|
var _utils2 = require("../../../utils");
|
|
13
|
-
function _getRequireWildcardCache(
|
|
14
|
-
function _interopRequireWildcard(
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
-
overflowCounter = _useState2[0],
|
|
34
|
-
setOverflowCounter = _useState2[1];
|
|
35
|
-
var _useState3 = (0, _react.useState)(false),
|
|
36
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
37
|
-
expanded = _useState4[0],
|
|
38
|
-
setExpanded = _useState4[1];
|
|
39
|
-
var chipWrapper = (0, _react.useRef)(null);
|
|
40
|
-
var handleChipClick = function handleChipClick(chip) {
|
|
15
|
+
const FilterPanelSection = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
data,
|
|
18
|
+
searchData,
|
|
19
|
+
searchTerm = "",
|
|
20
|
+
sectionHidden,
|
|
21
|
+
toggleSelected
|
|
22
|
+
} = _ref;
|
|
23
|
+
const {
|
|
24
|
+
chips,
|
|
25
|
+
heading
|
|
26
|
+
} = data;
|
|
27
|
+
const [overflowCounter, setOverflowCounter] = (0, _react.useState)(0);
|
|
28
|
+
const [expanded, setExpanded] = (0, _react.useState)(false);
|
|
29
|
+
const chipWrapper = (0, _react.useRef)(null);
|
|
30
|
+
const handleChipClick = chip => {
|
|
41
31
|
toggleSelected(chip);
|
|
42
32
|
};
|
|
43
33
|
|
|
44
34
|
// If the offsetTop is more than double height of a single chip, consider it
|
|
45
35
|
// overflowing
|
|
46
|
-
|
|
36
|
+
const updateFlowCount = function () {
|
|
47
37
|
var _chipWrapper$current;
|
|
48
|
-
|
|
49
|
-
|
|
38
|
+
const chips = chipWrapper === null || chipWrapper === void 0 || (_chipWrapper$current = chipWrapper.current) === null || _chipWrapper$current === void 0 ? void 0 : _chipWrapper$current.querySelectorAll(".p-chip");
|
|
39
|
+
const overflowCount = (0, _utils.overflowingChipsCount)(chips, 2);
|
|
50
40
|
setOverflowCounter(overflowCount);
|
|
51
41
|
};
|
|
52
42
|
|
|
53
43
|
// Check if search term characters matches any characters in panel heading
|
|
54
|
-
|
|
44
|
+
const searchTermInHeading = (0, _utils2.highlightSubString)(heading, searchTerm).match;
|
|
55
45
|
|
|
56
46
|
// Serialise chip values into string so it can be interrogated with subString
|
|
57
|
-
|
|
58
|
-
Object.entries(chips).forEach(
|
|
47
|
+
const chipValues = [];
|
|
48
|
+
Object.entries(chips).forEach(chipValue => {
|
|
59
49
|
chipValues.push(chipValue[1].value);
|
|
60
50
|
});
|
|
61
51
|
|
|
62
52
|
// Search chips for character match with search term
|
|
63
|
-
|
|
64
|
-
|
|
53
|
+
const searchTermInChips = (0, _utils2.highlightSubString)(chipValues.toString(), searchTerm).match;
|
|
54
|
+
const panelSectionVisible = searchTermInHeading || searchTermInChips || searchTerm === "";
|
|
65
55
|
|
|
66
56
|
// Update overflow count when component is resized
|
|
67
|
-
(0, _react.useEffect)(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
58
|
+
const resizeObserverSupported = typeof ResizeObserver !== "undefined";
|
|
59
|
+
const wrapper = chipWrapper === null || chipWrapper === void 0 ? void 0 : chipWrapper.current;
|
|
60
|
+
let wrapperWidthObserver;
|
|
71
61
|
if (resizeObserverSupported && panelSectionVisible) {
|
|
72
|
-
wrapperWidthObserver = new ResizeObserver(
|
|
62
|
+
wrapperWidthObserver = new ResizeObserver(() => {
|
|
73
63
|
updateFlowCount();
|
|
74
64
|
});
|
|
75
65
|
wrapperWidthObserver.observe(wrapper);
|
|
76
66
|
} else {
|
|
77
67
|
updateFlowCount();
|
|
78
68
|
}
|
|
79
|
-
return
|
|
69
|
+
return () => {
|
|
80
70
|
var _wrapperWidthObserver;
|
|
81
71
|
resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
|
|
82
72
|
};
|
|
83
73
|
}, [panelSectionVisible]);
|
|
84
74
|
|
|
85
75
|
// When overflow counter is clicked, all chips are shown
|
|
86
|
-
|
|
76
|
+
const showAllChips = () => {
|
|
87
77
|
setExpanded(true);
|
|
88
78
|
};
|
|
89
79
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, panelSectionVisible && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -97,20 +87,18 @@ var FilterPanelSection = function FilterPanelSection(_ref) {
|
|
|
97
87
|
className: "p-filter-panel-section__chips",
|
|
98
88
|
"aria-expanded": expanded,
|
|
99
89
|
ref: chipWrapper
|
|
100
|
-
}, chips === null || chips === void 0 ? void 0 : chips.map(
|
|
90
|
+
}, chips === null || chips === void 0 ? void 0 : chips.map(chip => {
|
|
101
91
|
// If search term has been added to input, only matching chips
|
|
102
92
|
// should display
|
|
103
|
-
|
|
104
|
-
|
|
93
|
+
const searchTermInChip = (0, _utils2.highlightSubString)(chip.value, searchTerm).match;
|
|
94
|
+
const chipVisible = searchTermInChip || searchTerm === "" || (0, _utils2.highlightSubString)(heading, searchTerm).match;
|
|
105
95
|
return chipVisible && !sectionHidden && /*#__PURE__*/_react.default.createElement(_Chip.default, {
|
|
106
96
|
key: "".concat(chip.lead, "+").concat(chip.value),
|
|
107
97
|
lead: chip.lead,
|
|
108
98
|
value: chip.value,
|
|
109
99
|
selected: (0, _utils.isChipInArray)(chip, searchData),
|
|
110
100
|
subString: searchTerm,
|
|
111
|
-
onClick:
|
|
112
|
-
return handleChipClick(chip);
|
|
113
|
-
}
|
|
101
|
+
onClick: () => handleChipClick(chip)
|
|
114
102
|
});
|
|
115
103
|
}), overflowCounter > 0 && !expanded && /*#__PURE__*/_react.default.createElement("span", {
|
|
116
104
|
className: "p-filter-panel-section__counter",
|
|
@@ -125,5 +113,4 @@ FilterPanelSection.propTypes = {
|
|
|
125
113
|
sectionHidden: _propTypes.default.bool,
|
|
126
114
|
toggleSelected: _propTypes.default.func.isRequired
|
|
127
115
|
};
|
|
128
|
-
var _default = FilterPanelSection;
|
|
129
|
-
exports.default = _default;
|
|
116
|
+
var _default = exports.default = FilterPanelSection;
|