@pingux/astro 2.68.0-alpha.3 → 2.69.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/cjs/recipes/CountryPicker.stories.js +52 -44
  2. package/lib/recipes/CountryPicker.stories.js +52 -44
  3. package/package.json +1 -1
package/lib/cjs/recipes/CountryPicker.stories.js CHANGED
@@ -9,10 +9,12 @@ _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
11
  exports["default"] = exports.Default = void 0;
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
12
13
  var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
14
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
13
15
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
15
16
  var _react = _interopRequireWildcard(require("react"));
17
+ var _i18n = require("@react-aria/i18n");
16
18
  var _countriesList = require("countries-list");
17
19
  var _storybookAddonDesigns = require("storybook-addon-designs");
18
20
  var _index = require("../index");
@@ -51,49 +53,53 @@ var sx = {
51
53
  }
52
54
  };
53
55
  var Default = function Default() {
56
+ var countries = (0, _entries["default"])(_countriesList.countries);
54
57
  var _useState = (0, _react.useState)(false),
55
58
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
56
59
  isOpen = _useState2[0],
57
60
  setIsOpen = _useState2[1];
58
61
  var _useState3 = (0, _react.useState)(''),
59
62
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
60
- searchValue = _useState4[0],
61
- setSearchValue = _useState4[1];
62
- var _useState5 = (0, _react.useState)(''),
63
+ phoneNumber = _useState4[0],
64
+ setPhoneNumber = _useState4[1];
65
+ var _useState5 = (0, _react.useState)({
66
+ inputValue: '',
67
+ selectedKey: '',
68
+ searchValue: '',
69
+ items: countries
70
+ }),
63
71
  _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
64
- phoneCodeValue = _useState6[0],
65
- setPhoneCodeValue = _useState6[1];
66
- var _useState7 = (0, _react.useState)(null),
67
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
68
- selectedKey = _useState8[0],
69
- setSelectedKey = _useState8[1];
70
- var _useState9 = (0, _react.useState)(''),
71
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
72
- phoneNumber = _useState10[0],
73
- setPhoneNumber = _useState10[1];
74
- var getInputValue = function getInputValue() {
75
- if (isOpen) return searchValue;
76
- return phoneCodeValue || searchValue;
77
- };
78
- var inputHandler = function inputHandler(value) {
79
- setSearchValue(value);
80
- if (!value) {
81
- setSelectedKey(null);
82
- setPhoneCodeValue('');
83
- }
84
- };
72
+ fieldState = _useState6[0],
73
+ setFieldState = _useState6[1];
74
+ var _useFilter = (0, _i18n.useFilter)({
75
+ sensitivity: 'base'
76
+ }),
77
+ contains = _useFilter.contains;
78
+ var inputHandler = (0, _react.useCallback)(function (value) {
79
+ setFieldState({
80
+ inputValue: !value ? '' : value,
81
+ selectedKey: null,
82
+ searchValue: value,
83
+ items: (0, _filter["default"])(countries).call(countries, function (item) {
84
+ var _context, _context2;
85
+ return contains((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone[0]), value);
86
+ })
87
+ });
88
+ }, [countries, setFieldState, contains]);
85
89
  var selectionHandler = function selectionHandler(key) {
86
- setSelectedKey(key);
87
- if (key) {
88
- setPhoneCodeValue("+".concat(_countriesList.countries[key].phone.split(',')[0]));
89
- } else {
90
- setSearchValue('');
91
- setPhoneCodeValue('');
92
- }
93
- setIsOpen(false);
94
- };
95
- var keyHandler = function keyHandler(e) {
96
- if (e.keyCode !== 13) setIsOpen(true);
90
+ var selectedItem = (0, _entries["default"])((0, _filter["default"])(countries).call(countries, function (item) {
91
+ return item[0] === key;
92
+ }));
93
+ setFieldState({
94
+ inputValue: key ? "+".concat(_countriesList.countries[key].phone.split(',')[0]) : '',
95
+ selectedKey: key,
96
+ searchValue: !key ? '' : "+".concat(_countriesList.countries[key].phone.split(',')[0]),
97
+ items: (0, _filter["default"])(countries).call(countries, function (item) {
98
+ var _selectedItem$1$name, _selectedItem$;
99
+ return contains(item[1].name, (_selectedItem$1$name = (_selectedItem$ = selectedItem[1]) === null || _selectedItem$ === void 0 ? void 0 : _selectedItem$.name) !== null && _selectedItem$1$name !== void 0 ? _selectedItem$1$name : '');
100
+ })
101
+ });
102
+ if (isOpen) setIsOpen(false);
97
103
  };
98
104
  var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
99
105
  var value = e.target.value;
@@ -118,18 +124,20 @@ var Default = function Default() {
118
124
  scrollBoxProps: {
119
125
  maxHeight: '215px'
120
126
  },
121
- defaultItems: (0, _entries["default"])(_countriesList.countries),
122
- inputValue: getInputValue(),
127
+ items: fieldState.items,
128
+ inputValue: isOpen ? fieldState.searchValue : fieldState.inputValue,
129
+ selectedKey: fieldState.selectedKey,
123
130
  onInputChange: inputHandler,
124
- selectedKey: selectedKey,
125
131
  onSelectionChange: selectionHandler,
126
- onKeyUp: keyHandler,
127
- menuTrigger: "focus"
132
+ menuTrigger: "focus",
133
+ "aria-labelledby": "group-label",
134
+ label: " "
128
135
  }, function (item) {
129
- var _context, _context2;
136
+ var _context3, _context4;
130
137
  return (0, _react2.jsx)(_index.Item, {
131
- key: item[0]
132
- }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
138
+ key: item[0],
139
+ textValue: "+".concat(item[1].phone.split(',')[0])
140
+ }, (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = "".concat(item[1].name)).call(_context4, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context3, item[1].phone.split(',')[0]));
133
141
  }), (0, _react2.jsx)(_index.Box, {
134
142
  sx: sx.inputWrapper
135
143
  }, (0, _react2.jsx)(_index.Input, {
package/lib/recipes/CountryPicker.stories.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
3
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
3
4
  import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
4
- import React, { useState } from 'react';
5
+ import React, { useCallback, useState } from 'react';
6
+ import { useFilter } from '@react-aria/i18n';
5
7
  import { countries as countriesObj } from 'countries-list';
6
8
  import { withDesign } from 'storybook-addon-designs';
7
9
  import { Box, ComboBoxField, Input, Item } from '../index';
@@ -37,49 +39,53 @@ var sx = {
37
39
  }
38
40
  };
39
41
  export var Default = function Default() {
42
+ var countries = _Object$entries(countriesObj);
40
43
  var _useState = useState(false),
41
44
  _useState2 = _slicedToArray(_useState, 2),
42
45
  isOpen = _useState2[0],
43
46
  setIsOpen = _useState2[1];
44
47
  var _useState3 = useState(''),
45
48
  _useState4 = _slicedToArray(_useState3, 2),
46
- searchValue = _useState4[0],
47
- setSearchValue = _useState4[1];
48
- var _useState5 = useState(''),
49
+ phoneNumber = _useState4[0],
50
+ setPhoneNumber = _useState4[1];
51
+ var _useState5 = useState({
52
+ inputValue: '',
53
+ selectedKey: '',
54
+ searchValue: '',
55
+ items: countries
56
+ }),
49
57
  _useState6 = _slicedToArray(_useState5, 2),
50
- phoneCodeValue = _useState6[0],
51
- setPhoneCodeValue = _useState6[1];
52
- var _useState7 = useState(null),
53
- _useState8 = _slicedToArray(_useState7, 2),
54
- selectedKey = _useState8[0],
55
- setSelectedKey = _useState8[1];
56
- var _useState9 = useState(''),
57
- _useState10 = _slicedToArray(_useState9, 2),
58
- phoneNumber = _useState10[0],
59
- setPhoneNumber = _useState10[1];
60
- var getInputValue = function getInputValue() {
61
- if (isOpen) return searchValue;
62
- return phoneCodeValue || searchValue;
63
- };
64
- var inputHandler = function inputHandler(value) {
65
- setSearchValue(value);
66
- if (!value) {
67
- setSelectedKey(null);
68
- setPhoneCodeValue('');
69
- }
70
- };
58
+ fieldState = _useState6[0],
59
+ setFieldState = _useState6[1];
60
+ var _useFilter = useFilter({
61
+ sensitivity: 'base'
62
+ }),
63
+ contains = _useFilter.contains;
64
+ var inputHandler = useCallback(function (value) {
65
+ setFieldState({
66
+ inputValue: !value ? '' : value,
67
+ selectedKey: null,
68
+ searchValue: value,
69
+ items: _filterInstanceProperty(countries).call(countries, function (item) {
70
+ var _context, _context2;
71
+ return contains(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone[0]), value);
72
+ })
73
+ });
74
+ }, [countries, setFieldState, contains]);
71
75
  var selectionHandler = function selectionHandler(key) {
72
- setSelectedKey(key);
73
- if (key) {
74
- setPhoneCodeValue("+".concat(countriesObj[key].phone.split(',')[0]));
75
- } else {
76
- setSearchValue('');
77
- setPhoneCodeValue('');
78
- }
79
- setIsOpen(false);
80
- };
81
- var keyHandler = function keyHandler(e) {
82
- if (e.keyCode !== 13) setIsOpen(true);
76
+ var selectedItem = _Object$entries(_filterInstanceProperty(countries).call(countries, function (item) {
77
+ return item[0] === key;
78
+ }));
79
+ setFieldState({
80
+ inputValue: key ? "+".concat(countriesObj[key].phone.split(',')[0]) : '',
81
+ selectedKey: key,
82
+ searchValue: !key ? '' : "+".concat(countriesObj[key].phone.split(',')[0]),
83
+ items: _filterInstanceProperty(countries).call(countries, function (item) {
84
+ var _selectedItem$1$name, _selectedItem$;
85
+ return contains(item[1].name, (_selectedItem$1$name = (_selectedItem$ = selectedItem[1]) === null || _selectedItem$ === void 0 ? void 0 : _selectedItem$.name) !== null && _selectedItem$1$name !== void 0 ? _selectedItem$1$name : '');
86
+ })
87
+ });
88
+ if (isOpen) setIsOpen(false);
83
89
  };
84
90
  var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
85
91
  var value = e.target.value;
@@ -104,18 +110,20 @@ export var Default = function Default() {
104
110
  scrollBoxProps: {
105
111
  maxHeight: '215px'
106
112
  },
107
- defaultItems: _Object$entries(countriesObj),
108
- inputValue: getInputValue(),
113
+ items: fieldState.items,
114
+ inputValue: isOpen ? fieldState.searchValue : fieldState.inputValue,
115
+ selectedKey: fieldState.selectedKey,
109
116
  onInputChange: inputHandler,
110
- selectedKey: selectedKey,
111
117
  onSelectionChange: selectionHandler,
112
- onKeyUp: keyHandler,
113
- menuTrigger: "focus"
118
+ menuTrigger: "focus",
119
+ "aria-labelledby": "group-label",
120
+ label: " "
114
121
  }, function (item) {
115
- var _context, _context2;
122
+ var _context3, _context4;
116
123
  return ___EmotionJSX(Item, {
117
- key: item[0]
118
- }, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
124
+ key: item[0],
125
+ textValue: "+".concat(item[1].phone.split(',')[0])
126
+ }, _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "".concat(item[1].name)).call(_context4, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context3, item[1].phone.split(',')[0]));
119
127
  }), ___EmotionJSX(Box, {
120
128
  sx: sx.inputWrapper
121
129
  }, ___EmotionJSX(Input, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.68.0-alpha.3",
3
+ "version": "2.69.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",