tenjin-ui-kit 0.3.65 → 0.3.67

package/components/filter/ValueSelector.js

@@ -7,9 +7,7 @@ exports.default = void 0;
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _fi = require("react-icons/fi");
 var colors = _interopRequireWildcard(require("@mui/material/colors"));
-var _system = require("@mui/system");
 var _button = _interopRequireDefault(require("../button"));
 var _text = _interopRequireDefault(require("../text"));
 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
     });
   });
 };
-var ValueSelector = function ValueSelector(_ref) {
+var ValueSelector = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var options = _ref.options,
     valueKey = _ref.valueKey,
     displayKey = _ref.displayKey,
@@ -73,6 +71,43 @@ var ValueSelector = function ValueSelector(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     filteredLocalOptions = _useState8[0],
     setFilteredLocalOptions = _useState8[1];
+  var _useState9 = (0, _react.useState)(-1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    activeIndex = _useState10[0],
+    setActiveIndex = _useState10[1];
+  var itemRefs = (0, _react.useRef)([]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      handleKeyDown: function handleKeyDown(e) {
+        if (!["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) return;
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          setActiveIndex(function (prev) {
+            if (filteredLocalOptions.length === 0) return -1;
+            return prev < filteredLocalOptions.length - 1 ? prev + 1 : 0;
+          });
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          setActiveIndex(function (prev) {
+            if (filteredLocalOptions.length === 0) return -1;
+            return prev > 0 ? prev - 1 : filteredLocalOptions.length - 1;
+          });
+        } else if (e.key === "Enter") {
+          if (activeIndex >= 0 && activeIndex < filteredLocalOptions.length) {
+            e.preventDefault();
+            handleSelection(filteredLocalOptions[activeIndex]);
+          }
+        }
+      }
+    };
+  });
+  (0, _react.useEffect)(function () {
+    if (activeIndex >= 0 && itemRefs.current[activeIndex]) {
+      itemRefs.current[activeIndex].scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }, [activeIndex]);
   (0, _react.useEffect)(function () {
     resolveOptions();
   }, []);
@@ -208,21 +243,30 @@ var ValueSelector = function ValueSelector(_ref) {
     }
   }, (filteredLocalOptions === null || filteredLocalOptions === void 0 ? void 0 : filteredLocalOptions.length) === 0 ? /*#__PURE__*/_react.default.createElement(_text.default, {
     color: "secondary"
-  }, "No Data") : filteredLocalOptions.map(function (o) {
+  }, "No Data") : filteredLocalOptions.map(function (o, index) {
     var altVal = o[avatarKey] === "/" ? " " : o[displayKey];
     var bgcAvatar = colors[o[colorKey]] ? colors[o[colorKey]][500] : "red";
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: o[valueKey]
+    }, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
       dense: true,
       disablePadding: true,
-      key: o[valueKey],
-      sx: o.selected && {
+      ref: function ref(el) {
+        return itemRefs.current[index] = el;
+      },
+      sx: _objectSpread(_objectSpread({}, o.selected && {
         backgroundColor: "#F5FAFF"
-      }
+      }), activeIndex === index && {
+        backgroundColor: theme.palette.action.hover
+      })
     }, /*#__PURE__*/_react.default.createElement(_material.ListItemButton, {
       disableRipple: true,
       dense: true,
       onClick: function onClick() {
         return handleSelection(o);
+      },
+      onMouseEnter: function onMouseEnter() {
+        return setActiveIndex(index);
       }
     }, multiple && /*#__PURE__*/_react.default.createElement(_material.ListItemIcon, {
       sx: {
@@ -290,7 +334,7 @@ var ValueSelector = function ValueSelector(_ref) {
     semibold: true,
     variant: "caption"
   }, "Clear Selection"))))));
-};
+});
 ValueSelector.propTypes = {
   label: _propTypes.default.string.isRequired,
   options: _propTypes.default.array,

package/components/filter/index.js

@@ -8,11 +8,10 @@ exports.default = void 0;
 var _material = require("@mui/material");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _ValueSelector = _interopRequireDefault(require("./ValueSelector"));
 var _bs = require("react-icons/bs");
-var _system = require("@mui/system");
-var _text = _interopRequireDefault(require("../text"));
 var _button = _interopRequireDefault(require("../button"));
+var _text = _interopRequireDefault(require("../text"));
+var _ValueSelector = _interopRequireDefault(require("./ValueSelector"));
 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); }
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,6 +74,15 @@ var Filter = function Filter(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     filter = _useState8[0],
     setFilter = _useState8[1];
+  var valueSelectorRef = (0, _react.useRef)(null);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) {
+      e.stopPropagation();
+    }
+    if (valueSelectorRef.current) {
+      valueSelectorRef.current.handleKeyDown(e);
+    }
+  };
   var handleFilterChange = function handleFilterChange(e) {
     var value = e.target.value;
     setFilter(value);
@@ -107,6 +115,7 @@ var Filter = function Filter(_ref) {
     anchorEl: menuAnchor,
     open: Boolean(menuAnchor),
     onClose: handleMenuClose,
+    onKeyDownCapture: handleKeyDown,
     PaperProps: {
       style: {
         width: "25ch",
@@ -136,6 +145,7 @@ var Filter = function Filter(_ref) {
     paddingBottom: 1.5
   }, /*#__PURE__*/_react.default.createElement(_material.TextField, {
     fullWidth: true,
+    autoFocus: true,
     value: filter,
     onChange: handleFilterChange,
     placeholder: "Type to search...",
@@ -185,6 +195,7 @@ var Filter = function Filter(_ref) {
     width: "100%",
     height: 10
   })) : /*#__PURE__*/_react.default.createElement(_ValueSelector.default, {
+    ref: valueSelectorRef,
     key: JSON.stringify(filter),
     options: filter ? options.filter(function (data) {
       return "".concat(data.id).concat(data.name).trim().toLowerCase().includes(filter.trim().toLowerCase());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tenjin-ui-kit",
-  "version": "0.3.65",
+  "version": "0.3.67",
   "repository": {
     "url": "git+https://gitlab.com/yethi/react/tenjin-ui-kit.git"
   },
@@ -112,13 +112,13 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@mui/lab": "5.0.0-alpha.116",
     "@mui/material": "^5.11.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.6.1",
-    "@mui/lab": "5.0.0-alpha.116"
+    "react-router-dom": "^6.6.1"
   }
 }