tenjin-ui-kit 0.3.64 → 0.3.66

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 (4) hide show
  1. package/components/filter/ValueSelector.js +53 -9
  2. package/components/filter/index.js +34 -26
  3. package/components/layout/topBar/UserAvatar.js +2 -5
  4. package/package.json +1 -1
package/components/filter/ValueSelector.js CHANGED
@@ -7,9 +7,7 @@ exports.default = void 0;
7
7
  var _material = require("@mui/material");
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _react = _interopRequireWildcard(require("react"));
10
- var _fi = require("react-icons/fi");
11
10
  var colors = _interopRequireWildcard(require("@mui/material/colors"));
12
- var _system = require("@mui/system");
13
11
  var _button = _interopRequireDefault(require("../button"));
14
12
  var _text = _interopRequireDefault(require("../text"));
15
13
  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); }
@@ -43,7 +41,7 @@ var determineSelectedOptions = function determineSelectedOptions(options, select
43
41
  });
44
42
  });
45
43
  };
46
- var ValueSelector = function ValueSelector(_ref) {
44
+ var ValueSelector = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
47
45
  var options = _ref.options,
48
46
  valueKey = _ref.valueKey,
49
47
  displayKey = _ref.displayKey,
@@ -73,6 +71,43 @@ var ValueSelector = function ValueSelector(_ref) {
73
71
  _useState8 = _slicedToArray(_useState7, 2),
74
72
  filteredLocalOptions = _useState8[0],
75
73
  setFilteredLocalOptions = _useState8[1];
74
+ var _useState9 = (0, _react.useState)(-1),
75
+ _useState10 = _slicedToArray(_useState9, 2),
76
+ activeIndex = _useState10[0],
77
+ setActiveIndex = _useState10[1];
78
+ var itemRefs = (0, _react.useRef)([]);
79
+ (0, _react.useImperativeHandle)(ref, function () {
80
+ return {
81
+ handleKeyDown: function handleKeyDown(e) {
82
+ if (!["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) return;
83
+ if (e.key === "ArrowDown") {
84
+ e.preventDefault();
85
+ setActiveIndex(function (prev) {
86
+ if (filteredLocalOptions.length === 0) return -1;
87
+ return prev < filteredLocalOptions.length - 1 ? prev + 1 : 0;
88
+ });
89
+ } else if (e.key === "ArrowUp") {
90
+ e.preventDefault();
91
+ setActiveIndex(function (prev) {
92
+ if (filteredLocalOptions.length === 0) return -1;
93
+ return prev > 0 ? prev - 1 : filteredLocalOptions.length - 1;
94
+ });
95
+ } else if (e.key === "Enter") {
96
+ if (activeIndex >= 0 && activeIndex < filteredLocalOptions.length) {
97
+ e.preventDefault();
98
+ handleSelection(filteredLocalOptions[activeIndex]);
99
+ }
100
+ }
101
+ }
102
+ };
103
+ });
104
+ (0, _react.useEffect)(function () {
105
+ if (activeIndex >= 0 && itemRefs.current[activeIndex]) {
106
+ itemRefs.current[activeIndex].scrollIntoView({
107
+ block: "nearest"
108
+ });
109
+ }
110
+ }, [activeIndex]);
76
111
  (0, _react.useEffect)(function () {
77
112
  resolveOptions();
78
113
  }, []);
@@ -208,21 +243,30 @@ var ValueSelector = function ValueSelector(_ref) {
208
243
  }
209
244
  }, (filteredLocalOptions === null || filteredLocalOptions === void 0 ? void 0 : filteredLocalOptions.length) === 0 ? /*#__PURE__*/_react.default.createElement(_text.default, {
210
245
  color: "secondary"
211
- }, "No Data") : filteredLocalOptions.map(function (o) {
246
+ }, "No Data") : filteredLocalOptions.map(function (o, index) {
212
247
  var altVal = o[avatarKey] === "/" ? " " : o[displayKey];
213
248
  var bgcAvatar = colors[o[colorKey]] ? colors[o[colorKey]][500] : "red";
214
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
249
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
250
+ key: o[valueKey]
251
+ }, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
215
252
  dense: true,
216
253
  disablePadding: true,
217
- key: o[valueKey],
218
- sx: o.selected && {
254
+ ref: function ref(el) {
255
+ return itemRefs.current[index] = el;
256
+ },
257
+ sx: _objectSpread(_objectSpread({}, o.selected && {
219
258
  backgroundColor: "#F5FAFF"
220
- }
259
+ }), activeIndex === index && {
260
+ backgroundColor: theme.palette.action.hover
261
+ })
221
262
  }, /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
222
263
  disableRipple: true,
223
264
  dense: true,
224
265
  onClick: function onClick() {
225
266
  return handleSelection(o);
267
+ },
268
+ onMouseEnter: function onMouseEnter() {
269
+ return setActiveIndex(index);
226
270
  }
227
271
  }, multiple && /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, {
228
272
  sx: {
@@ -290,7 +334,7 @@ var ValueSelector = function ValueSelector(_ref) {
290
334
  semibold: true,
291
335
  variant: "caption"
292
336
  }, "Clear Selection"))))));
293
- };
337
+ });
294
338
  ValueSelector.propTypes = {
295
339
  label: _propTypes.default.string.isRequired,
296
340
  options: _propTypes.default.array,
package/components/filter/index.js CHANGED
@@ -1,20 +1,16 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
7
  var _material = require("@mui/material");
9
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _ValueSelector = _interopRequireDefault(require("./ValueSelector"));
9
+ var _react = require("react");
12
10
  var _bs = require("react-icons/bs");
13
- var _system = require("@mui/system");
14
- var _text = _interopRequireDefault(require("../text"));
15
11
  var _button = _interopRequireDefault(require("../button"));
16
- 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); }
17
- 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; }
12
+ var _text = _interopRequireDefault(require("../text"));
13
+ var _ValueSelector = _interopRequireDefault(require("./ValueSelector"));
18
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
15
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
20
16
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -75,20 +71,29 @@ var Filter = function Filter(_ref) {
75
71
  _useState8 = _slicedToArray(_useState7, 2),
76
72
  filter = _useState8[0],
77
73
  setFilter = _useState8[1];
74
+ var valueSelectorRef = (0, _react.useRef)(null);
75
+ var handleKeyDown = function handleKeyDown(e) {
76
+ if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
77
+ e.stopPropagation();
78
+ }
79
+ if (valueSelectorRef.current) {
80
+ valueSelectorRef.current.handleKeyDown(e);
81
+ }
82
+ };
78
83
  var handleFilterChange = function handleFilterChange(e) {
79
84
  var value = e.target.value;
80
85
  setFilter(value);
81
86
  };
82
- return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_button.default, {
83
- startIcon: /*#__PURE__*/_react.default.createElement(_bs.BsFilter, null),
87
+ return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_button.default, {
88
+ startIcon: /*#__PURE__*/React.createElement(_bs.BsFilter, null),
84
89
  variant: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0 ? "contained" : buttonVariant,
85
90
  onClick: handleMenuOpen
86
- }, showSelectedValue ? /*#__PURE__*/_react.default.createElement(_text.default, {
91
+ }, showSelectedValue ? /*#__PURE__*/React.createElement(_text.default, {
87
92
  variant: "body2"
88
- }, "".concat(label).concat(atleastOneItemSelected ? ": ".concat(selectedValues[0][displayKey]).concat(selectedValues.length > 1 ? " +".concat(selectedValues.length - 1) : "") : "")) : /*#__PURE__*/_react.default.createElement(_text.default, {
93
+ }, "".concat(label).concat(atleastOneItemSelected ? ": ".concat(selectedValues[0][displayKey]).concat(selectedValues.length > 1 ? " +".concat(selectedValues.length - 1) : "") : "")) : /*#__PURE__*/React.createElement(_text.default, {
89
94
  semibold: true,
90
95
  variant: "body2"
91
- }, label)), /*#__PURE__*/_react.default.createElement(_material.Menu, {
96
+ }, label)), /*#__PURE__*/React.createElement(_material.Menu, {
92
97
  sx: {
93
98
  padding: 0,
94
99
  paddingTop: theme.spacing(0.5),
@@ -107,6 +112,7 @@ var Filter = function Filter(_ref) {
107
112
  anchorEl: menuAnchor,
108
113
  open: Boolean(menuAnchor),
109
114
  onClose: handleMenuClose,
115
+ onKeyDownCapture: handleKeyDown,
110
116
  PaperProps: {
111
117
  style: {
112
118
  width: "25ch",
@@ -115,76 +121,78 @@ var Filter = function Filter(_ref) {
115
121
  overflow: "auto"
116
122
  }
117
123
  }
118
- }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
124
+ }, /*#__PURE__*/React.createElement(_material.MenuItem, {
119
125
  disabled: true
120
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
126
+ }, /*#__PURE__*/React.createElement(_material.Box, {
121
127
  pb: 0.5,
122
128
  pl: 1,
123
129
  display: "flex",
124
130
  flexDirection: "row",
125
131
  alignItems: "center"
126
- }, /*#__PURE__*/_react.default.createElement(_bs.BsFilter, null), /*#__PURE__*/_react.default.createElement(_text.default, {
132
+ }, /*#__PURE__*/React.createElement(_bs.BsFilter, null), /*#__PURE__*/React.createElement(_text.default, {
127
133
  bold: true,
128
134
  variant: "body2",
129
135
  sx: {
130
136
  marginLeft: "0.75rem"
131
137
  }
132
- }, (label === null || label === void 0 ? void 0 : label.toUpperCase()) || "FILTER"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), isSearch && /*#__PURE__*/_react.default.createElement(_material.Box, {
138
+ }, (label === null || label === void 0 ? void 0 : label.toUpperCase()) || "FILTER"))), /*#__PURE__*/React.createElement(_material.Divider, null), isSearch && /*#__PURE__*/React.createElement(_material.Box, {
133
139
  paddingLeft: 2,
134
140
  paddingRight: 2,
135
141
  paddingTop: 1.5,
136
142
  paddingBottom: 1.5
137
- }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
143
+ }, /*#__PURE__*/React.createElement(_material.TextField, {
138
144
  fullWidth: true,
145
+ autoFocus: true,
139
146
  value: filter,
140
147
  onChange: handleFilterChange,
141
148
  placeholder: "Type to search...",
142
149
  variant: "standard"
143
- })), /*#__PURE__*/_react.default.createElement(_material.Box, {
150
+ })), /*#__PURE__*/React.createElement(_material.Box, {
144
151
  height: "100%"
145
- }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
152
+ }, /*#__PURE__*/React.createElement(_material.Grid, {
146
153
  container: true,
147
154
  sx: {
148
155
  padding: "0 0.25rem",
149
156
  maxWidth: optionsContainerWidth,
150
157
  width: optionsContainerWidth
151
158
  }
152
- }, /*#__PURE__*/_react.default.createElement(_material.Grid, {
159
+ }, /*#__PURE__*/React.createElement(_material.Grid, {
153
160
  item: true,
154
161
  xs: 12
155
- }, loading ? /*#__PURE__*/_react.default.createElement(_material.Box, {
162
+ }, loading ? /*#__PURE__*/React.createElement(_material.Box, {
156
163
  style: {
157
164
  padding: "0 0.5rem"
158
165
  }
159
- }, /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
166
+ }, /*#__PURE__*/React.createElement(_material.Skeleton, {
160
167
  style: {
161
168
  marginBottom: 5
162
169
  },
163
170
  variant: "rectangular",
164
171
  width: "100%",
165
172
  height: 10
166
- }), /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
173
+ }), /*#__PURE__*/React.createElement(_material.Skeleton, {
167
174
  style: {
168
175
  marginBottom: 5
169
176
  },
170
177
  variant: "rectangular",
171
178
  width: "100%",
172
179
  height: 10
173
- }), /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
180
+ }), /*#__PURE__*/React.createElement(_material.Skeleton, {
174
181
  style: {
175
182
  marginBottom: 5
176
183
  },
177
184
  variant: "rectangular",
178
185
  width: "100%",
179
186
  height: 10
180
- }), /*#__PURE__*/_react.default.createElement(_material.Skeleton, {
187
+ }), /*#__PURE__*/React.createElement(_material.Skeleton, {
181
188
  style: {
182
189
  marginBottom: 5
183
190
  },
184
191
  variant: "rectangular",
185
192
  width: "100%",
186
193
  height: 10
187
- })) : /*#__PURE__*/_react.default.createElement(_ValueSelector.default, {
194
+ })) : /*#__PURE__*/React.createElement(_ValueSelector.default, {
195
+ ref: valueSelectorRef,
188
196
  key: JSON.stringify(filter),
189
197
  options: filter ? options.filter(function (data) {
190
198
  return "".concat(data.id).concat(data.name).trim().toLowerCase().includes(filter.trim().toLowerCase());
package/components/layout/topBar/UserAvatar.js CHANGED
@@ -23,7 +23,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
23
23
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
24
24
  var StyledMenu = (0, _styles.withStyles)({
25
25
  paper: {
26
- width: "100%",
26
+ width: "fit-content !important",
27
27
  marginLeft: "10px",
28
28
  zIndex: 1
29
29
  }
@@ -62,10 +62,7 @@ var UserAvatar = function UserAvatar(_ref) {
62
62
  id: "simple-menu",
63
63
  anchorEl: menu,
64
64
  open: Boolean(menu),
65
- onClose: handleCloseMenu,
66
- style: {
67
- width: "14rem"
68
- }
65
+ onClose: handleCloseMenu
69
66
  }, (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.name) && (loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.email) && /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
70
67
  onClick: function onClick() {
71
68
  handleCloseMenu();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tenjin-ui-kit",
3
- "version": "0.3.64",
3
+ "version": "0.3.66",
4
4
  "repository": {
5
5
  "url": "git+https://gitlab.com/yethi/react/tenjin-ui-kit.git"
6
6
  },