@primer/components 31.0.2-rc.1e80de40 → 31.0.2-rc.c7dafefb

package/lib/TextInputWithTokens.js

@@ -25,6 +25,8 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
+var _iterateFocusableElements = require("./utils/iterateFocusableElements");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -98,14 +100,25 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
+    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
 
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3;
 
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+
+      const firstFocusable = nextElementToFocus && (0, _iterateFocusableElements.isFocusable)(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => (0, _iterateFocusableElements.isFocusable)(el));
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        var _ref$current;
+
+        // if there are no tokens left, focus the input
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }, 0);
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -118,9 +131,9 @@ function TextInputWithTokensInnerComponent({
 
   const handleTokenKeyUp = e => {
     if (e.key === 'Escape') {
-      var _ref$current;
+      var _ref$current2;
 
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }
   };
 
@@ -130,13 +143,13 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current2;
+    var _ref$current3;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
+    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
       return;
     }
 
@@ -157,9 +170,9 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current3;
+        var _ref$current4;
 
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
+        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
       }, 0);
     }
   };

package/lib/__tests__/TextInputWithTokens.test.js

@@ -353,6 +353,58 @@ describe('TextInputWithTokens', () => {
 
     expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id);
   });
+  it('moves focus to the next token when removing the first token', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+      tokens: [...mockTokens].slice(0, 2),
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+
+    _react2.fireEvent.focus(tokenNode);
+
+    _react2.fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme12;
+
+      expect((_document$activeEleme12 = document.activeElement) === null || _document$activeEleme12 === void 0 ? void 0 : _document$activeEleme12.textContent).toBe(mockTokens[1].text);
+    }, 0);
+    jest.useRealTimers();
+  });
+  it('moves focus to the input when the last token is removed', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText,
+      getByLabelText
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(LabelledTextInputWithTokens, {
+      tokens: [mockTokens[0]],
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    const inputNode = getByLabelText('Tokens');
+
+    _react2.fireEvent.focus(tokenNode);
+
+    _react2.fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme13;
+
+      expect((_document$activeEleme13 = document.activeElement) === null || _document$activeEleme13 === void 0 ? void 0 : _document$activeEleme13.id).toBe(inputNode.id);
+    }, 0);
+    jest.useRealTimers();
+  });
   it('calls onKeyDown', () => {
     const onRemoveMock = jest.fn();
     const onKeyDownMock = jest.fn();

package/lib/stories/TextInputWithTokens.stories.js

@@ -72,7 +72,7 @@ const mockTokens = [{
 }];
 
 const Default = () => {
-  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 3));
 
   const onTokenRemove = tokenId => {
     setTokens(tokens.filter(token => token.id !== tokenId));

package/lib-esm/TextInputWithTokens.js

@@ -9,7 +9,8 @@ import Token from './Token/Token';
 import { useProvidedRefOrCreate } from './hooks';
 import UnstyledTextInput from './_UnstyledTextInput';
 import TextInputWrapper from './_TextInputWrapper';
-import Box from './Box'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+import Box from './Box';
+import { isFocusable } from './utils/iterateFocusableElements'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
@@ -76,14 +77,25 @@ function TextInputWithTokensInnerComponent({
   }, [selectedTokenIndex]);
 
   const handleTokenRemove = tokenId => {
-    onTokenRemove(tokenId);
+    onTokenRemove(tokenId); // HACK: wait a tick for the the token node to be removed from the DOM
 
-    if (selectedTokenIndex) {
-      var _containerRef$current2;
+    setTimeout(() => {
+      var _containerRef$current2, _containerRef$current3;
 
-      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex];
-      nextElementToFocus.focus();
-    }
+      const nextElementToFocus = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.children[selectedTokenIndex || 0]; // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+
+      const firstFocusable = nextElementToFocus && isFocusable(nextElementToFocus) ? nextElementToFocus : Array.from(((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.children) || []).find(el => isFocusable(el));
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      } else {
+        var _ref$current;
+
+        // if there are no tokens left, focus the input
+        (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      }
+    }, 0);
   };
 
   const handleTokenFocus = tokenIndex => () => {
@@ -96,9 +108,9 @@ function TextInputWithTokensInnerComponent({
 
   const handleTokenKeyUp = e => {
     if (e.key === 'Escape') {
-      var _ref$current;
+      var _ref$current2;
 
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
     }
   };
 
@@ -108,13 +120,13 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleInputKeyDown = e => {
-    var _ref$current2;
+    var _ref$current3;
 
     if (onKeyDown) {
       onKeyDown(e);
     }
 
-    if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
+    if ((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value) {
       return;
     }
 
@@ -135,9 +147,9 @@ function TextInputWithTokensInnerComponent({
 
 
       setTimeout(() => {
-        var _ref$current3;
+        var _ref$current4;
 
-        (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.select();
+        (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.select();
       }, 0);
     }
   };

package/lib-esm/__tests__/TextInputWithTokens.test.js

@@ -308,6 +308,52 @@ describe('TextInputWithTokens', () => {
     });
     expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id);
   });
+  it('moves focus to the next token when removing the first token', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText
+    } = HTMLRender( /*#__PURE__*/React.createElement(TextInputWithTokens, {
+      tokens: [...mockTokens].slice(0, 2),
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    fireEvent.focus(tokenNode);
+    fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme12;
+
+      expect((_document$activeEleme12 = document.activeElement) === null || _document$activeEleme12 === void 0 ? void 0 : _document$activeEleme12.textContent).toBe(mockTokens[1].text);
+    }, 0);
+    jest.useRealTimers();
+  });
+  it('moves focus to the input when the last token is removed', () => {
+    jest.useFakeTimers();
+    const onRemoveMock = jest.fn();
+    const {
+      getByText,
+      getByLabelText
+    } = HTMLRender( /*#__PURE__*/React.createElement(LabelledTextInputWithTokens, {
+      tokens: [mockTokens[0]],
+      onTokenRemove: onRemoveMock
+    }));
+    const tokenNode = getByText(mockTokens[0].text);
+    const inputNode = getByLabelText('Tokens');
+    fireEvent.focus(tokenNode);
+    fireEvent.keyDown(tokenNode, {
+      key: 'Backspace'
+    });
+    jest.runAllTimers();
+    setTimeout(() => {
+      var _document$activeEleme13;
+
+      expect((_document$activeEleme13 = document.activeElement) === null || _document$activeEleme13 === void 0 ? void 0 : _document$activeEleme13.id).toBe(inputNode.id);
+    }, 0);
+    jest.useRealTimers();
+  });
   it('calls onKeyDown', () => {
     const onRemoveMock = jest.fn();
     const onKeyDownMock = jest.fn();

package/lib-esm/stories/TextInputWithTokens.stories.js

@@ -53,7 +53,7 @@ const mockTokens = [{
   id: 21
 }];
 export const Default = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2));
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3));
 
   const onTokenRemove = tokenId => {
     setTokens(tokens.filter(token => token.id !== tokenId));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.2-rc.1e80de40",
+  "version": "31.0.2-rc.c7dafefb",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/TextInputWithTokens.tsx

@@ -11,6 +11,7 @@ import {useProvidedRefOrCreate} from './hooks'
 import UnstyledTextInput from './_UnstyledTextInput'
 import TextInputWrapper from './_TextInputWrapper'
 import Box from './Box'
+import {isFocusable} from './utils/iterateFocusableElements'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<any>
@@ -117,10 +118,24 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   const handleTokenRemove = (tokenId: string | number) => {
     onTokenRemove(tokenId)
 
-    if (selectedTokenIndex) {
-      const nextElementToFocus = containerRef.current?.children[selectedTokenIndex] as HTMLElement
-      nextElementToFocus.focus()
-    }
+    // HACK: wait a tick for the the token node to be removed from the DOM
+    setTimeout(() => {
+      const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0] as HTMLElement | undefined
+
+      // when removing the first token by keying "Backspace" or "Delete",
+      // `nextFocusableElement` is the div that wraps the input
+      const firstFocusable =
+        nextElementToFocus && isFocusable(nextElementToFocus)
+          ? nextElementToFocus
+          : (Array.from(containerRef.current?.children || []) as HTMLElement[]).find(el => isFocusable(el))
+
+      if (firstFocusable) {
+        firstFocusable.focus()
+      } else {
+        // if there are no tokens left, focus the input
+        ref.current?.focus()
+      }
+    }, 0)
   }
 
   const handleTokenFocus: (tokenIndex: number) => FocusEventHandler = tokenIndex => () => {

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -238,6 +238,44 @@ describe('TextInputWithTokens', () => {
     expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id)
   })
 
+  it('moves focus to the next token when removing the first token', () => {
+    jest.useFakeTimers()
+    const onRemoveMock = jest.fn()
+    const {getByText} = HTMLRender(
+      <TextInputWithTokens tokens={[...mockTokens].slice(0, 2)} onTokenRemove={onRemoveMock} />
+    )
+    const tokenNode = getByText(mockTokens[0].text)
+
+    fireEvent.focus(tokenNode)
+    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
+
+    jest.runAllTimers()
+    setTimeout(() => {
+      expect(document.activeElement?.textContent).toBe(mockTokens[1].text)
+    }, 0)
+
+    jest.useRealTimers()
+  })
+
+  it('moves focus to the input when the last token is removed', () => {
+    jest.useFakeTimers()
+    const onRemoveMock = jest.fn()
+    const {getByText, getByLabelText} = HTMLRender(
+      <LabelledTextInputWithTokens tokens={[mockTokens[0]]} onTokenRemove={onRemoveMock} />
+    )
+    const tokenNode = getByText(mockTokens[0].text)
+    const inputNode = getByLabelText('Tokens')
+
+    fireEvent.focus(tokenNode)
+    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
+
+    jest.runAllTimers()
+    setTimeout(() => {
+      expect(document.activeElement?.id).toBe(inputNode.id)
+    }, 0)
+    jest.useRealTimers()
+  })
+
   it('calls onKeyDown', () => {
     const onRemoveMock = jest.fn()
     const onKeyDownMock = jest.fn()

package/src/stories/TextInputWithTokens.stories.tsx

@@ -47,7 +47,7 @@ const mockTokens = [
 ]
 
 export const Default = () => {
-  const [tokens, setTokens] = useState([...mockTokens].slice(0, 2))
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
   const onTokenRemove: (tokenId: string | number) => void = tokenId => {
     setTokens(tokens.filter(token => token.id !== tokenId))
   }