@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.
@@ -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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
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)(_index.ScrollBox, {
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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
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
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
227
- selectedEnvironment = _useState8[0],
228
- setSelectedEnvironment = _useState8[1];
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 _context3;
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 _context;
238
- return (0, _concat["default"])(_context = [_objectSpread({}, envObj)]).call(_context, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
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 _context2;
244
- return (0, _concat["default"])(_context2 = [_objectSpread({}, envObj)]).call(_context2, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
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"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
256
+ return (0, _concat["default"])(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
247
257
  };
248
258
  var findEnvObj = function findEnvObj(envName, envSectionName) {
249
- var _context4;
250
- return (0, _find["default"])(_context4 = (0, _find["default"])(environments).call(environments, function (section) {
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(_context4, function (option) {
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 _context5;
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"])(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
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 _useState9 = (0, _react.useState)({
337
+ var _useState11 = (0, _react.useState)({
326
338
  name: 'Dog',
327
339
  isSandbox: true
328
340
  }),
329
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
330
- selectedEnvironment = _useState10[0],
331
- setSelectedEnvironment = _useState10[1];
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 _useState11 = (0, _react.useState)(false),
374
- _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
375
- isOpen = _useState12[0],
376
- setIsOpen = _useState12[1];
377
- var _useState13 = (0, _react.useState)({
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
- _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
382
- selectedEnvironment = _useState14[0],
383
- setSelectedEnvironment = _useState14[1];
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 _useState15 = (0, _react.useState)({
438
+ var _useState17 = (0, _react.useState)({
427
439
  name: 'Snail',
428
440
  isSandbox: true
429
441
  }),
430
- _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
431
- selectedEnvironment = _useState16[0],
432
- setSelectedEnvironment = _useState16[1];
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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
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 React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
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(ScrollBox, {
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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
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
- _useState8 = _slicedToArray(_useState7, 2),
212
- selectedEnvironment = _useState8[0],
213
- setSelectedEnvironment = _useState8[1];
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 _context3;
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 _context;
223
- return _concatInstanceProperty(_context = [_objectSpread({}, envObj)]).call(_context, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
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 _context2;
229
- return _concatInstanceProperty(_context2 = [_objectSpread({}, envObj)]).call(_context2, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
238
+ var _context3;
239
+ return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
230
240
  }
231
- return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, prevEnvs);
241
+ return _concatInstanceProperty(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
232
242
  };
233
243
  var findEnvObj = function findEnvObj(envName, envSectionName) {
234
- var _context4;
235
- return _findInstanceProperty(_context4 = _findInstanceProperty(environments).call(environments, function (section) {
244
+ var _context5;
245
+ return _findInstanceProperty(_context5 = _findInstanceProperty(environments).call(environments, function (section) {
236
246
  return section.name === envSectionName;
237
- }).options).call(_context4, function (option) {
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 _context5;
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(_context5 = "".concat(sectionName, "-")).call(_context5, itemName),
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 _useState9 = useState({
320
+ var _useState11 = useState({
309
321
  name: 'Dog',
310
322
  isSandbox: true
311
323
  }),
312
- _useState10 = _slicedToArray(_useState9, 2),
313
- selectedEnvironment = _useState10[0],
314
- setSelectedEnvironment = _useState10[1];
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 _useState11 = useState(false),
356
- _useState12 = _slicedToArray(_useState11, 2),
357
- isOpen = _useState12[0],
358
- setIsOpen = _useState12[1];
359
- var _useState13 = useState({
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
- _useState14 = _slicedToArray(_useState13, 2),
364
- selectedEnvironment = _useState14[0],
365
- setSelectedEnvironment = _useState14[1];
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 _useState15 = useState({
419
+ var _useState17 = useState({
408
420
  name: 'Snail',
409
421
  isSandbox: true
410
422
  }),
411
- _useState16 = _slicedToArray(_useState15, 2),
412
- selectedEnvironment = _useState16[0],
413
- setSelectedEnvironment = _useState16[1];
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, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.8.2-alpha.0",
3
+ "version": "2.8.2-alpha.1",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",