@pingux/astro 2.8.2-alpha.0 → 2.8.2-alpha.1
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/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +63 -4
- package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +45 -33
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +64 -5
- package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js +45 -33
- package/package.json +1 -1
@@ -19,6 +19,9 @@ var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stabl
|
|
19
19
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
20
20
|
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
21
21
|
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
|
22
|
+
var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
|
23
|
+
var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
|
24
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
22
25
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
23
26
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
24
27
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
@@ -31,17 +34,20 @@ var _ArrowDropUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDr
|
|
31
34
|
var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
|
32
35
|
var _HomeIcon = _interopRequireDefault(require("@pingux/mdi-react/HomeIcon"));
|
33
36
|
var _i18n = require("@react-aria/i18n");
|
37
|
+
var _visuallyHidden = require("@react-aria/visually-hidden");
|
34
38
|
var _list = require("@react-stately/list");
|
35
39
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
40
|
+
var _uuid = require("uuid");
|
41
|
+
var _hooks = require("../../hooks");
|
36
42
|
var _index = require("../../index");
|
37
43
|
var _isIterable = require("../../utils/devUtils/props/isIterable");
|
38
44
|
var _ListBox = _interopRequireDefault(require("../ListBox"));
|
39
45
|
var _react2 = require("@emotion/react");
|
40
|
-
var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "name", "onNamePress", "onOpenChange", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "popoverProps", "searchProps", "selectedItem"];
|
46
|
+
var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "name", "onFilteredOptionsNumber", "onNamePress", "onOpenChange", "optionsCountMessage", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "popoverProps", "searchProps", "selectedItem"];
|
41
47
|
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); }
|
42
48
|
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; }
|
43
49
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
44
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
50
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
45
51
|
var breadCrumbDataIds = {
|
46
52
|
dropdownList: 'breadcrumb--dropdown-list',
|
47
53
|
environmentButton: 'breadcrumb--environment-button',
|
@@ -57,8 +63,10 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
57
63
|
items = props.items,
|
58
64
|
imperativeItemsFilter = props.itemsFilter,
|
59
65
|
name = props.name,
|
66
|
+
onFilteredOptionsNumber = props.onFilteredOptionsNumber,
|
60
67
|
onNamePress = props.onNamePress,
|
61
68
|
onOpenChange = props.onOpenChange,
|
69
|
+
optionsCountMessage = props.optionsCountMessage,
|
62
70
|
imperativeOnPopoverClose = props.onPopoverClose,
|
63
71
|
imperativeOnPopoverOpen = props.onPopoverOpen,
|
64
72
|
onSelectionChange = props.onSelectionChange,
|
@@ -66,6 +74,9 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
66
74
|
searchProps = props.searchProps,
|
67
75
|
selectedItem = props.selectedItem,
|
68
76
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
77
|
+
var optionsNumberMessageId = (0, _react.useMemo)(function () {
|
78
|
+
return (0, _uuid.v4)();
|
79
|
+
}, []);
|
69
80
|
var _useState = (0, _react.useState)(''),
|
70
81
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
71
82
|
searchValue = _useState2[0],
|
@@ -74,6 +85,10 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
74
85
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
75
86
|
selectedKeys = _useState4[0],
|
76
87
|
setSelectedKeys = _useState4[1];
|
88
|
+
var _useState5 = (0, _react.useState)(false),
|
89
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
90
|
+
isTyping = _useState6[0],
|
91
|
+
setIsTyping = _useState6[1];
|
77
92
|
var breadcrumbsRef = (0, _react.useRef)();
|
78
93
|
var overlayRef = _react["default"].useRef();
|
79
94
|
var triggerRef = _react["default"].useRef();
|
@@ -204,6 +219,36 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
204
219
|
}
|
205
220
|
return selectedItem;
|
206
221
|
};
|
222
|
+
var getFilteredOptionsNumber = (0, _react.useCallback)(function () {
|
223
|
+
var nodeArr = (0, _from["default"])(listBoxState.collection.iterable);
|
224
|
+
if (nodeArr.length === 0) return 0;
|
225
|
+
var itemsCount = (0, _reduce["default"])(nodeArr).call(nodeArr, function (acc, node) {
|
226
|
+
if (node.type === 'section') return acc + node.childNodes.length;
|
227
|
+
return acc + 1;
|
228
|
+
}, 0);
|
229
|
+
return itemsCount;
|
230
|
+
}, [listBoxState.collection.iterable]);
|
231
|
+
(0, _react.useEffect)(function () {
|
232
|
+
if (onFilteredOptionsNumber) {
|
233
|
+
onFilteredOptionsNumber(getFilteredOptionsNumber());
|
234
|
+
}
|
235
|
+
}, [onFilteredOptionsNumber, getFilteredOptionsNumber, listBoxState.collection]);
|
236
|
+
(0, _react.useEffect)(function () {
|
237
|
+
setIsTyping(true);
|
238
|
+
var handler = (0, _setTimeout2["default"])(function () {
|
239
|
+
setIsTyping(false);
|
240
|
+
}, [1000]);
|
241
|
+
return function () {
|
242
|
+
clearTimeout(handler);
|
243
|
+
};
|
244
|
+
}, [searchValue]);
|
245
|
+
var optionsMessage = function optionsMessage() {
|
246
|
+
var _context2, _context3;
|
247
|
+
var totalOptionsNumber = items && items.length;
|
248
|
+
var filteredOptionsNumber = getFilteredOptionsNumber();
|
249
|
+
var message = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "".concat(filteredOptionsNumber, " of ")).call(_context3, totalOptionsNumber, " options for \"")).call(_context2, searchValue, "\"");
|
250
|
+
return message;
|
251
|
+
};
|
207
252
|
var ItemsSelect = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({}, triggerProps, {
|
208
253
|
onPress: handlePopoverOpen,
|
209
254
|
ref: triggerRef,
|
@@ -228,11 +273,21 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
228
273
|
autoFocus: true,
|
229
274
|
contain: true
|
230
275
|
}, (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({
|
276
|
+
"aria-describedby": optionsNumberMessageId,
|
277
|
+
autocomplete: "off",
|
231
278
|
placeholder: "Search",
|
232
279
|
"aria-label": "Items Search",
|
233
280
|
"data-testid": "Environment-Breadcrumb-Search",
|
234
281
|
onChange: setSearchValue
|
235
|
-
}, searchProps)), (0, _react2.jsx)(
|
282
|
+
}, searchProps)), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
|
283
|
+
role: "alert",
|
284
|
+
"aria-live": "polite",
|
285
|
+
"aria-busy": isTyping,
|
286
|
+
id: optionsNumberMessageId
|
287
|
+
}, (0, _hooks.useDebounce)({
|
288
|
+
value: optionsCountMessage || optionsMessage(),
|
289
|
+
delay: 1000
|
290
|
+
})), (0, _react2.jsx)(_index.ScrollBox, {
|
236
291
|
ref: scrollBoxRef
|
237
292
|
}, checkIfListEmpty() ? EmptyListState : (0, _react2.jsx)(_ListBox["default"], {
|
238
293
|
"aria-label": "Items List",
|
@@ -311,7 +366,11 @@ EnvironmentBreadcrumb.propTypes = {
|
|
311
366
|
*
|
312
367
|
* `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
|
313
368
|
*/
|
314
|
-
onOpenChange: _propTypes["default"].func
|
369
|
+
onOpenChange: _propTypes["default"].func,
|
370
|
+
/** Callback function that returns number of filtered options. */
|
371
|
+
onFilteredOptionsNumber: _propTypes["default"].func,
|
372
|
+
/** Message to announce number of available options by screen reader. */
|
373
|
+
optionsCountMessage: _propTypes["default"].string
|
315
374
|
};
|
316
375
|
EnvironmentBreadcrumb.defaultProps = {
|
317
376
|
emptySearchText: 'No Search Result'
|
@@ -16,8 +16,9 @@ _Object$defineProperty(exports, "__esModule", {
|
|
16
16
|
});
|
17
17
|
exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.DefaultClosed = exports.Default = exports.ControlledMenu = void 0;
|
18
18
|
var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
|
19
|
-
var
|
19
|
+
var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
|
20
20
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
21
|
+
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
21
22
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
22
23
|
var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
|
23
24
|
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
@@ -32,7 +33,7 @@ var _react2 = require("@emotion/react");
|
|
32
33
|
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); }
|
33
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; }
|
34
35
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
35
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
36
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
36
37
|
var _default = {
|
37
38
|
title: 'Components/EnvironmentBreadcrumb',
|
38
39
|
component: _index.EnvironmentBreadcrumb,
|
@@ -216,40 +217,49 @@ var DefaultClosed = function DefaultClosed(args) {
|
|
216
217
|
};
|
217
218
|
exports.DefaultClosed = DefaultClosed;
|
218
219
|
var WithSections = function WithSections() {
|
220
|
+
var _context;
|
219
221
|
var _useState5 = (0, _react.useState)(environmentsWithSections),
|
220
222
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
221
223
|
environments = _useState6[0],
|
222
224
|
setEnvironments = _useState6[1];
|
223
|
-
var _useState7 = (0, _react.useState)(
|
225
|
+
var _useState7 = (0, _react.useState)(null),
|
226
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
227
|
+
filteredOptionsNumber = _useState8[0],
|
228
|
+
setFilteredOptionsNumber = _useState8[1];
|
229
|
+
var _useState9 = (0, _react.useState)({
|
224
230
|
name: 'Consumer Banking Prod'
|
225
231
|
}),
|
226
|
-
|
227
|
-
selectedEnvironment =
|
228
|
-
setSelectedEnvironment =
|
232
|
+
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
233
|
+
selectedEnvironment = _useState10[0],
|
234
|
+
setSelectedEnvironment = _useState10[1];
|
229
235
|
var recentEnvShown = 3;
|
236
|
+
var totalOptionsNumber = (0, _reduce["default"])(environmentsWithSections).call(environmentsWithSections, function (acc, section) {
|
237
|
+
return acc + section.options.length;
|
238
|
+
}, 0);
|
239
|
+
var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : (0, _concat["default"])(_context = "".concat(filteredOptionsNumber, " of ")).call(_context, totalOptionsNumber, " options");
|
230
240
|
var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
|
231
|
-
var
|
241
|
+
var _context4;
|
232
242
|
var envName = envObj.name;
|
233
243
|
var isDuplicate = (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
|
234
244
|
return prevEnv.name === envName;
|
235
245
|
}).length > 0;
|
236
246
|
if (isDuplicate) {
|
237
|
-
var
|
238
|
-
return (0, _concat["default"])(
|
247
|
+
var _context2;
|
248
|
+
return (0, _concat["default"])(_context2 = [_objectSpread({}, envObj)]).call(_context2, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
|
239
249
|
return prevEnv.name !== envName;
|
240
250
|
}));
|
241
251
|
}
|
242
252
|
if (prevEnvs.length >= recentEnvShown) {
|
243
|
-
var
|
244
|
-
return (0, _concat["default"])(
|
253
|
+
var _context3;
|
254
|
+
return (0, _concat["default"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
|
245
255
|
}
|
246
|
-
return (0, _concat["default"])(
|
256
|
+
return (0, _concat["default"])(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
|
247
257
|
};
|
248
258
|
var findEnvObj = function findEnvObj(envName, envSectionName) {
|
249
|
-
var
|
250
|
-
return (0, _find["default"])(
|
259
|
+
var _context5;
|
260
|
+
return (0, _find["default"])(_context5 = (0, _find["default"])(environments).call(environments, function (section) {
|
251
261
|
return section.name === envSectionName;
|
252
|
-
}).options).call(
|
262
|
+
}).options).call(_context5, function (option) {
|
253
263
|
return option.name === envName;
|
254
264
|
});
|
255
265
|
};
|
@@ -286,6 +296,8 @@ var WithSections = function WithSections() {
|
|
286
296
|
name: "Globochem",
|
287
297
|
selectedItem: envNode,
|
288
298
|
onSelectionChange: handleEnvPress,
|
299
|
+
onFilteredOptionsNumber: setFilteredOptionsNumber,
|
300
|
+
optionsCountMessage: optionsCountMessage,
|
289
301
|
isDefaultOpen: true
|
290
302
|
}, function (_ref5) {
|
291
303
|
var sectionName = _ref5.name,
|
@@ -296,12 +308,12 @@ var WithSections = function WithSections() {
|
|
296
308
|
title: sectionName,
|
297
309
|
items: sectionOptions
|
298
310
|
}, function (_ref6) {
|
299
|
-
var
|
311
|
+
var _context6;
|
300
312
|
var itemName = _ref6.name,
|
301
313
|
itemOptions = _ref6.options,
|
302
314
|
isSandbox = _ref6.isSandbox;
|
303
315
|
return (0, _react2.jsx)(_index.Item, {
|
304
|
-
key: (0, _concat["default"])(
|
316
|
+
key: (0, _concat["default"])(_context6 = "".concat(sectionName, "-")).call(_context6, itemName),
|
305
317
|
childItems: itemOptions,
|
306
318
|
textValue: itemName
|
307
319
|
}, (0, _react2.jsx)(_index.Box, {
|
@@ -322,13 +334,13 @@ var OrgLevel = function OrgLevel() {
|
|
322
334
|
};
|
323
335
|
exports.OrgLevel = OrgLevel;
|
324
336
|
var DefaultOpen = function DefaultOpen() {
|
325
|
-
var
|
337
|
+
var _useState11 = (0, _react.useState)({
|
326
338
|
name: 'Dog',
|
327
339
|
isSandbox: true
|
328
340
|
}),
|
329
|
-
|
330
|
-
selectedEnvironment =
|
331
|
-
setSelectedEnvironment =
|
341
|
+
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
|
342
|
+
selectedEnvironment = _useState12[0],
|
343
|
+
setSelectedEnvironment = _useState12[1];
|
332
344
|
var envNode = (0, _react2.jsx)(_index.Box, {
|
333
345
|
isRow: true,
|
334
346
|
key: selectedEnvironment.name
|
@@ -370,17 +382,17 @@ var DefaultOpen = function DefaultOpen() {
|
|
370
382
|
};
|
371
383
|
exports.DefaultOpen = DefaultOpen;
|
372
384
|
var ControlledMenu = function ControlledMenu() {
|
373
|
-
var
|
374
|
-
|
375
|
-
isOpen =
|
376
|
-
setIsOpen =
|
377
|
-
var
|
385
|
+
var _useState13 = (0, _react.useState)(false),
|
386
|
+
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
|
387
|
+
isOpen = _useState14[0],
|
388
|
+
setIsOpen = _useState14[1];
|
389
|
+
var _useState15 = (0, _react.useState)({
|
378
390
|
name: 'Shark',
|
379
391
|
isSandbox: true
|
380
392
|
}),
|
381
|
-
|
382
|
-
selectedEnvironment =
|
383
|
-
setSelectedEnvironment =
|
393
|
+
_useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
|
394
|
+
selectedEnvironment = _useState16[0],
|
395
|
+
setSelectedEnvironment = _useState16[1];
|
384
396
|
var envNode = (0, _react2.jsx)(_index.Box, {
|
385
397
|
isRow: true,
|
386
398
|
key: selectedEnvironment.name
|
@@ -423,13 +435,13 @@ var ControlledMenu = function ControlledMenu() {
|
|
423
435
|
};
|
424
436
|
exports.ControlledMenu = ControlledMenu;
|
425
437
|
var RightAlignedBadges = function RightAlignedBadges(args) {
|
426
|
-
var
|
438
|
+
var _useState17 = (0, _react.useState)({
|
427
439
|
name: 'Snail',
|
428
440
|
isSandbox: true
|
429
441
|
}),
|
430
|
-
|
431
|
-
selectedEnvironment =
|
432
|
-
setSelectedEnvironment =
|
442
|
+
_useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
|
443
|
+
selectedEnvironment = _useState18[0],
|
444
|
+
setSelectedEnvironment = _useState18[1];
|
433
445
|
var envNode = (0, _react2.jsx)(_index.Box, {
|
434
446
|
isRow: true
|
435
447
|
}, (0, _react2.jsx)(_index.Text, {
|
@@ -8,14 +8,17 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
8
8
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
9
9
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
10
10
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
11
|
-
var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "name", "onNamePress", "onOpenChange", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "popoverProps", "searchProps", "selectedItem"];
|
11
|
+
var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "name", "onFilteredOptionsNumber", "onNamePress", "onOpenChange", "optionsCountMessage", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "popoverProps", "searchProps", "selectedItem"];
|
12
12
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
13
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
13
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
14
14
|
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
15
15
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
16
16
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
17
17
|
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
18
|
-
import
|
18
|
+
import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
|
19
|
+
import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
|
20
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
21
|
+
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
19
22
|
import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger } from 'react-aria';
|
20
23
|
import { useOverlayTriggerState } from 'react-stately';
|
21
24
|
import ArrowDropDownIcon from '@pingux/mdi-react/ArrowDropDownIcon';
|
@@ -23,8 +26,11 @@ import ArrowDropUpIcon from '@pingux/mdi-react/ArrowDropUpIcon';
|
|
23
26
|
import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
|
24
27
|
import HomeIcon from '@pingux/mdi-react/HomeIcon';
|
25
28
|
import { useFilter } from '@react-aria/i18n';
|
29
|
+
import { VisuallyHidden } from '@react-aria/visually-hidden';
|
26
30
|
import { useListState } from '@react-stately/list';
|
27
31
|
import PropTypes from 'prop-types';
|
32
|
+
import { v4 as uuid } from 'uuid';
|
33
|
+
import { useDebounce } from '../../hooks';
|
28
34
|
import { Breadcrumbs, Button, Icon, Item, PopoverContainer, ScrollBox, SearchField, Text } from '../../index';
|
29
35
|
import { isIterableProp } from '../../utils/devUtils/props/isIterable';
|
30
36
|
import ListBox from '../ListBox';
|
@@ -43,8 +49,10 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
43
49
|
items = props.items,
|
44
50
|
imperativeItemsFilter = props.itemsFilter,
|
45
51
|
name = props.name,
|
52
|
+
onFilteredOptionsNumber = props.onFilteredOptionsNumber,
|
46
53
|
onNamePress = props.onNamePress,
|
47
54
|
onOpenChange = props.onOpenChange,
|
55
|
+
optionsCountMessage = props.optionsCountMessage,
|
48
56
|
imperativeOnPopoverClose = props.onPopoverClose,
|
49
57
|
imperativeOnPopoverOpen = props.onPopoverOpen,
|
50
58
|
onSelectionChange = props.onSelectionChange,
|
@@ -52,6 +60,9 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
52
60
|
searchProps = props.searchProps,
|
53
61
|
selectedItem = props.selectedItem,
|
54
62
|
others = _objectWithoutProperties(props, _excluded);
|
63
|
+
var optionsNumberMessageId = useMemo(function () {
|
64
|
+
return uuid();
|
65
|
+
}, []);
|
55
66
|
var _useState = useState(''),
|
56
67
|
_useState2 = _slicedToArray(_useState, 2),
|
57
68
|
searchValue = _useState2[0],
|
@@ -60,6 +71,10 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
60
71
|
_useState4 = _slicedToArray(_useState3, 2),
|
61
72
|
selectedKeys = _useState4[0],
|
62
73
|
setSelectedKeys = _useState4[1];
|
74
|
+
var _useState5 = useState(false),
|
75
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
76
|
+
isTyping = _useState6[0],
|
77
|
+
setIsTyping = _useState6[1];
|
63
78
|
var breadcrumbsRef = useRef();
|
64
79
|
var overlayRef = React.useRef();
|
65
80
|
var triggerRef = React.useRef();
|
@@ -190,6 +205,36 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
190
205
|
}
|
191
206
|
return selectedItem;
|
192
207
|
};
|
208
|
+
var getFilteredOptionsNumber = useCallback(function () {
|
209
|
+
var nodeArr = _Array$from(listBoxState.collection.iterable);
|
210
|
+
if (nodeArr.length === 0) return 0;
|
211
|
+
var itemsCount = _reduceInstanceProperty(nodeArr).call(nodeArr, function (acc, node) {
|
212
|
+
if (node.type === 'section') return acc + node.childNodes.length;
|
213
|
+
return acc + 1;
|
214
|
+
}, 0);
|
215
|
+
return itemsCount;
|
216
|
+
}, [listBoxState.collection.iterable]);
|
217
|
+
useEffect(function () {
|
218
|
+
if (onFilteredOptionsNumber) {
|
219
|
+
onFilteredOptionsNumber(getFilteredOptionsNumber());
|
220
|
+
}
|
221
|
+
}, [onFilteredOptionsNumber, getFilteredOptionsNumber, listBoxState.collection]);
|
222
|
+
useEffect(function () {
|
223
|
+
setIsTyping(true);
|
224
|
+
var handler = _setTimeout(function () {
|
225
|
+
setIsTyping(false);
|
226
|
+
}, [1000]);
|
227
|
+
return function () {
|
228
|
+
clearTimeout(handler);
|
229
|
+
};
|
230
|
+
}, [searchValue]);
|
231
|
+
var optionsMessage = function optionsMessage() {
|
232
|
+
var _context2, _context3;
|
233
|
+
var totalOptionsNumber = items && items.length;
|
234
|
+
var filteredOptionsNumber = getFilteredOptionsNumber();
|
235
|
+
var message = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "".concat(filteredOptionsNumber, " of ")).call(_context3, totalOptionsNumber, " options for \"")).call(_context2, searchValue, "\"");
|
236
|
+
return message;
|
237
|
+
};
|
193
238
|
var ItemsSelect = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, _extends({}, triggerProps, {
|
194
239
|
onPress: handlePopoverOpen,
|
195
240
|
ref: triggerRef,
|
@@ -214,11 +259,21 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
214
259
|
autoFocus: true,
|
215
260
|
contain: true
|
216
261
|
}, ___EmotionJSX(SearchField, _extends({
|
262
|
+
"aria-describedby": optionsNumberMessageId,
|
263
|
+
autocomplete: "off",
|
217
264
|
placeholder: "Search",
|
218
265
|
"aria-label": "Items Search",
|
219
266
|
"data-testid": "Environment-Breadcrumb-Search",
|
220
267
|
onChange: setSearchValue
|
221
|
-
}, searchProps)), ___EmotionJSX(
|
268
|
+
}, searchProps)), ___EmotionJSX(VisuallyHidden, {
|
269
|
+
role: "alert",
|
270
|
+
"aria-live": "polite",
|
271
|
+
"aria-busy": isTyping,
|
272
|
+
id: optionsNumberMessageId
|
273
|
+
}, useDebounce({
|
274
|
+
value: optionsCountMessage || optionsMessage(),
|
275
|
+
delay: 1000
|
276
|
+
})), ___EmotionJSX(ScrollBox, {
|
222
277
|
ref: scrollBoxRef
|
223
278
|
}, checkIfListEmpty() ? EmptyListState : ___EmotionJSX(ListBox, {
|
224
279
|
"aria-label": "Items List",
|
@@ -296,7 +351,11 @@ EnvironmentBreadcrumb.propTypes = {
|
|
296
351
|
*
|
297
352
|
* `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
|
298
353
|
*/
|
299
|
-
onOpenChange: PropTypes.func
|
354
|
+
onOpenChange: PropTypes.func,
|
355
|
+
/** Callback function that returns number of filtered options. */
|
356
|
+
onFilteredOptionsNumber: PropTypes.func,
|
357
|
+
/** Message to announce number of available options by screen reader. */
|
358
|
+
optionsCountMessage: PropTypes.string
|
300
359
|
};
|
301
360
|
EnvironmentBreadcrumb.defaultProps = {
|
302
361
|
emptySearchText: 'No Search Result'
|
@@ -9,10 +9,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
9
9
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
10
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
11
11
|
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
12
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
13
13
|
import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
|
14
|
-
import
|
14
|
+
import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
|
15
15
|
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
16
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
16
17
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
17
18
|
import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
|
18
19
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
@@ -201,40 +202,49 @@ export var DefaultClosed = function DefaultClosed(args) {
|
|
201
202
|
});
|
202
203
|
};
|
203
204
|
export var WithSections = function WithSections() {
|
205
|
+
var _context;
|
204
206
|
var _useState5 = useState(environmentsWithSections),
|
205
207
|
_useState6 = _slicedToArray(_useState5, 2),
|
206
208
|
environments = _useState6[0],
|
207
209
|
setEnvironments = _useState6[1];
|
208
|
-
var _useState7 = useState(
|
210
|
+
var _useState7 = useState(null),
|
211
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
212
|
+
filteredOptionsNumber = _useState8[0],
|
213
|
+
setFilteredOptionsNumber = _useState8[1];
|
214
|
+
var _useState9 = useState({
|
209
215
|
name: 'Consumer Banking Prod'
|
210
216
|
}),
|
211
|
-
|
212
|
-
selectedEnvironment =
|
213
|
-
setSelectedEnvironment =
|
217
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
218
|
+
selectedEnvironment = _useState10[0],
|
219
|
+
setSelectedEnvironment = _useState10[1];
|
214
220
|
var recentEnvShown = 3;
|
221
|
+
var totalOptionsNumber = _reduceInstanceProperty(environmentsWithSections).call(environmentsWithSections, function (acc, section) {
|
222
|
+
return acc + section.options.length;
|
223
|
+
}, 0);
|
224
|
+
var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : _concatInstanceProperty(_context = "".concat(filteredOptionsNumber, " of ")).call(_context, totalOptionsNumber, " options");
|
215
225
|
var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
|
216
|
-
var
|
226
|
+
var _context4;
|
217
227
|
var envName = envObj.name;
|
218
228
|
var isDuplicate = _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
|
219
229
|
return prevEnv.name === envName;
|
220
230
|
}).length > 0;
|
221
231
|
if (isDuplicate) {
|
222
|
-
var
|
223
|
-
return _concatInstanceProperty(
|
232
|
+
var _context2;
|
233
|
+
return _concatInstanceProperty(_context2 = [_objectSpread({}, envObj)]).call(_context2, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
|
224
234
|
return prevEnv.name !== envName;
|
225
235
|
}));
|
226
236
|
}
|
227
237
|
if (prevEnvs.length >= recentEnvShown) {
|
228
|
-
var
|
229
|
-
return _concatInstanceProperty(
|
238
|
+
var _context3;
|
239
|
+
return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
|
230
240
|
}
|
231
|
-
return _concatInstanceProperty(
|
241
|
+
return _concatInstanceProperty(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
|
232
242
|
};
|
233
243
|
var findEnvObj = function findEnvObj(envName, envSectionName) {
|
234
|
-
var
|
235
|
-
return _findInstanceProperty(
|
244
|
+
var _context5;
|
245
|
+
return _findInstanceProperty(_context5 = _findInstanceProperty(environments).call(environments, function (section) {
|
236
246
|
return section.name === envSectionName;
|
237
|
-
}).options).call(
|
247
|
+
}).options).call(_context5, function (option) {
|
238
248
|
return option.name === envName;
|
239
249
|
});
|
240
250
|
};
|
@@ -271,6 +281,8 @@ export var WithSections = function WithSections() {
|
|
271
281
|
name: "Globochem",
|
272
282
|
selectedItem: envNode,
|
273
283
|
onSelectionChange: handleEnvPress,
|
284
|
+
onFilteredOptionsNumber: setFilteredOptionsNumber,
|
285
|
+
optionsCountMessage: optionsCountMessage,
|
274
286
|
isDefaultOpen: true
|
275
287
|
}, function (_ref5) {
|
276
288
|
var sectionName = _ref5.name,
|
@@ -281,12 +293,12 @@ export var WithSections = function WithSections() {
|
|
281
293
|
title: sectionName,
|
282
294
|
items: sectionOptions
|
283
295
|
}, function (_ref6) {
|
284
|
-
var
|
296
|
+
var _context6;
|
285
297
|
var itemName = _ref6.name,
|
286
298
|
itemOptions = _ref6.options,
|
287
299
|
isSandbox = _ref6.isSandbox;
|
288
300
|
return ___EmotionJSX(Item, {
|
289
|
-
key: _concatInstanceProperty(
|
301
|
+
key: _concatInstanceProperty(_context6 = "".concat(sectionName, "-")).call(_context6, itemName),
|
290
302
|
childItems: itemOptions,
|
291
303
|
textValue: itemName
|
292
304
|
}, ___EmotionJSX(Box, {
|
@@ -305,13 +317,13 @@ export var OrgLevel = function OrgLevel() {
|
|
305
317
|
});
|
306
318
|
};
|
307
319
|
export var DefaultOpen = function DefaultOpen() {
|
308
|
-
var
|
320
|
+
var _useState11 = useState({
|
309
321
|
name: 'Dog',
|
310
322
|
isSandbox: true
|
311
323
|
}),
|
312
|
-
|
313
|
-
selectedEnvironment =
|
314
|
-
setSelectedEnvironment =
|
324
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
325
|
+
selectedEnvironment = _useState12[0],
|
326
|
+
setSelectedEnvironment = _useState12[1];
|
315
327
|
var envNode = ___EmotionJSX(Box, {
|
316
328
|
isRow: true,
|
317
329
|
key: selectedEnvironment.name
|
@@ -352,17 +364,17 @@ export var DefaultOpen = function DefaultOpen() {
|
|
352
364
|
});
|
353
365
|
};
|
354
366
|
export var ControlledMenu = function ControlledMenu() {
|
355
|
-
var
|
356
|
-
|
357
|
-
isOpen =
|
358
|
-
setIsOpen =
|
359
|
-
var
|
367
|
+
var _useState13 = useState(false),
|
368
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
369
|
+
isOpen = _useState14[0],
|
370
|
+
setIsOpen = _useState14[1];
|
371
|
+
var _useState15 = useState({
|
360
372
|
name: 'Shark',
|
361
373
|
isSandbox: true
|
362
374
|
}),
|
363
|
-
|
364
|
-
selectedEnvironment =
|
365
|
-
setSelectedEnvironment =
|
375
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
376
|
+
selectedEnvironment = _useState16[0],
|
377
|
+
setSelectedEnvironment = _useState16[1];
|
366
378
|
var envNode = ___EmotionJSX(Box, {
|
367
379
|
isRow: true,
|
368
380
|
key: selectedEnvironment.name
|
@@ -404,13 +416,13 @@ export var ControlledMenu = function ControlledMenu() {
|
|
404
416
|
});
|
405
417
|
};
|
406
418
|
export var RightAlignedBadges = function RightAlignedBadges(args) {
|
407
|
-
var
|
419
|
+
var _useState17 = useState({
|
408
420
|
name: 'Snail',
|
409
421
|
isSandbox: true
|
410
422
|
}),
|
411
|
-
|
412
|
-
selectedEnvironment =
|
413
|
-
setSelectedEnvironment =
|
423
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
424
|
+
selectedEnvironment = _useState18[0],
|
425
|
+
setSelectedEnvironment = _useState18[1];
|
414
426
|
var envNode = ___EmotionJSX(Box, {
|
415
427
|
isRow: true
|
416
428
|
}, ___EmotionJSX(Text, {
|