@rh-support/components 2.1.28 → 2.1.29

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 (5) hide show
  1. package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts.map +1 -1
  2. package/lib/cjs/hooks/useSelectKeyboardNavigator.js +5 -2
  3. package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts.map +1 -1
  4. package/lib/esm/hooks/useSelectKeyboardNavigator.js +6 -3
  5. package/package.json +2 -2
package/lib/cjs/hooks/useSelectKeyboardNavigator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BA6BrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}
1
+ {"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BAiCrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}
package/lib/cjs/hooks/useSelectKeyboardNavigator.js CHANGED
@@ -4,6 +4,9 @@ exports.useSelectKeyboardNavigator = void 0;
4
4
  const react_1 = require("react");
5
5
  function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
6
6
  const [focusedItemIndex, setFocusedItemIndex] = react_1.useState(null);
7
+ react_1.useEffect(() => {
8
+ setFocusedItemIndex(null);
9
+ }, [list.length]);
7
10
  const handleMenuArrowKeys = (key) => {
8
11
  let indexToFocus;
9
12
  if (isOpen) {
@@ -29,14 +32,14 @@ function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
29
32
  }
30
33
  };
31
34
  const onInputKeyDown = (event) => {
32
- const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
35
+ const focusedItem = focusedItemIndex !== null ? list[focusedItemIndex] : null;
33
36
  switch (event.key) {
34
37
  // Select the first available option
35
38
  case 'Enter':
36
39
  if (!isOpen) {
37
40
  setIsOpen((pre) => !pre);
38
41
  }
39
- else if (isOpen) {
42
+ else if (isOpen && focusedItem !== null) {
40
43
  onSelect(focusedItem);
41
44
  }
42
45
  break;
package/lib/esm/hooks/useSelectKeyboardNavigator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BA6BrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}
1
+ {"version":3,"file":"useSelectKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSelectKeyboardNavigator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,UAAU,MAAM;IACZ,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,0BAA0B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,MAAM;4BAiCrD,mBAAmB,CAAC,gBAAgB,CAAC;;EAuBvE"}
package/lib/esm/hooks/useSelectKeyboardNavigator.js CHANGED
@@ -1,6 +1,9 @@
1
- import { useState } from 'react';
1
+ import { useEffect, useState } from 'react';
2
2
  export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }) {
3
3
  const [focusedItemIndex, setFocusedItemIndex] = useState(null);
4
+ useEffect(() => {
5
+ setFocusedItemIndex(null);
6
+ }, [list.length]);
4
7
  const handleMenuArrowKeys = (key) => {
5
8
  let indexToFocus;
6
9
  if (isOpen) {
@@ -26,14 +29,14 @@ export function useSelectKeyboardNavigator({ list, isOpen, setIsOpen, onSelect }
26
29
  }
27
30
  };
28
31
  const onInputKeyDown = (event) => {
29
- const focusedItem = focusedItemIndex ? list[focusedItemIndex] : list[0];
32
+ const focusedItem = focusedItemIndex !== null ? list[focusedItemIndex] : null;
30
33
  switch (event.key) {
31
34
  // Select the first available option
32
35
  case 'Enter':
33
36
  if (!isOpen) {
34
37
  setIsOpen((pre) => !pre);
35
38
  }
36
- else if (isOpen) {
39
+ else if (isOpen && focusedItem !== null) {
37
40
  onSelect(focusedItem);
38
41
  }
39
42
  break;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rh-support/components",
3
- "version": "2.1.28",
3
+ "version": "2.1.29",
4
4
  "description": "Contains all reusabel components for support app",
5
5
  "author": "Vikas Rathee <vrathee@redhat.com>",
6
6
  "license": "ISC",
@@ -115,5 +115,5 @@
115
115
  "defaults and supports es6-module",
116
116
  "maintained node versions"
117
117
  ],
118
- "gitHead": "d17dacfd35aa08c446f37c8f0f92760346b8eb7a"
118
+ "gitHead": "3f01e59886b03b621a3681869c543b4fd5091f9f"
119
119
  }