Version bump for Paragon to 22.6.1, with stricter typing (openedx#1146)

* fix(deps): update dependency @openedx/paragon to v22.6.1 * fix: lint errors from stricter types in new paragon version --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
open-craft · Jul 8, 2024 · 8cf26e1 · 8cf26e1
1 parent 9528bfd
commit 8cf26e1
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -74,7 +74,7 @@ const CustomMenu = (props) => {
         <div className="d-flex flex-row justify-content-end">
           <div className="d-inline">
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectCancelRef}
               variant="tertiary"
               className="tags-drawer-cancel-button"
@@ -83,7 +83,7 @@ const CustomMenu = (props) => {
               { intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText) }
             </Button>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               ref={selectAddRef}
               variant="tertiary"
               className="text-info-500 add-tags-button"
@@ -139,7 +139,7 @@ const CustomIndicatorsContainer = (props) => {
             onClick={handleCommitStagedTags}
             onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }}
             ref={selectInlineAddRef}
-            tabIndex="0"
+            tabIndex={0}
             onKeyDown={disableActionKeys} // To prevent navigating staged tags when button focused
           >
             { intl.formatMessage(messages.collapsibleInlineAddStagedTagsButtonText) }
@@ -240,7 +240,7 @@ const ContentTagsCollapsible = ({
   const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
   const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
-  const selectInlineEditModeRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectInlineEditModeRef = React.useRef(/** @type {HTMLButtonElement | null} */(null));
   const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
 
   const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
@@ -393,7 +393,7 @@ const ContentTagsCollapsible = ({
               <div className="mb-3" key={taxonomyId}>
                 <p className="text-gray-500">{intl.formatMessage(messages.collapsibleNoTagsAddedText)}
                   <Button
-                    tabIndex="0"
+                    tabIndex={0}
                     size="inline"
                     ref={selectInlineEditModeRef}
                     variant="link"

diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -53,7 +53,7 @@ const TaxonomyList = ({ contentId }) => {
         values={{
           link: (
             <Button
-              tabIndex="0"
+              tabIndex={0}
               size="inline"
               variant="link"
               className="text-info-500 p-0 enable-taxonomies-button"

diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -309,7 +309,7 @@ const ContentTagsDropDownSelector = ({
         ? (
           <div>
             <Button
-              tabIndex="0"
+              tabIndex={0}
               variant="tertiary"
               iconBefore={Add}
               onClick={loadMoreTags}

diff --git a/src/files-and-videos/videos-page/VideoThumbnail.jsx b/src/files-and-videos/videos-page/VideoThumbnail.jsx
@@ -69,7 +69,7 @@ const VideoThumbnail = ({
               variant="primary"
               size="sm"
               onClick={fileInputControl.click}
-              tabIndex="0"
+              tabIndex={0}
             >
               {addThumbnailMessage}
             </Button>

diff --git a/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx b/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
@@ -34,7 +34,7 @@ const WhatsInClipboard = ({
       />
       <p
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex="0"
+        tabIndex={0}
         role="presentation"
         ref={triggerElementRef}
         className="whats-in-clipboard-text m-0"

diff --git a/src/generic/clipboard/paste-component/index.jsx b/src/generic/clipboard/paste-component/index.jsx
@@ -14,7 +14,7 @@ const PasteComponent = ({
   const handlePopoverToggle = (isOpen) => togglePopover(isOpen);
 
   const renderPopover = (props) => (
-    <div role="link" ref={popoverElementRef} tabIndex="0">
+    <div role="link" ref={popoverElementRef} tabIndex={0}>
       <Popover
         className="clipboard-popover"
         id="popover-positioned"

diff --git a/src/search-modal/SearchFilterWidget.tsx b/src/search-modal/SearchFilterWidget.tsx
@@ -24,7 +24,7 @@ const SearchFilterWidget: React.FC<{
   children: React.ReactNode;
 }> = ({ appliedFilters, ...props }) => {
   const [isOpen, open, close] = useToggle(false);
-  const [target, setTarget] = React.useState(null);
+  const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
   return (
     <>

diff --git a/src/search-modal/SearchResult.tsx b/src/search-modal/SearchResult.tsx
@@ -22,13 +22,13 @@ import type { ContentHit } from './data/api';
 import Highlight from './Highlight';
 import messages from './messages';
 
-const STRUCTURAL_TYPE_ICONS: Record<string, React.ReactElement> = {
+const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
   vertical: TYPE_ICONS_MAP.vertical,
   sequential: Folder,
   chapter: Folder,
 };
 
-function getItemIcon(blockType: string): React.ReactElement {
+function getItemIcon(blockType: string): React.ComponentType {
   return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
 }