Merge pull request #1032 from securityscorecard/merge-1322-beta-03

Merge 1.32.2 into beta

.github/workflows/CD.yaml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['18','20','22']
+        node: ['18','20','22.4.1']
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -50,7 +50,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: '22.4.1'
 
       - name: Cache yarn files
         uses: actions/cache@v4
@@ -138,7 +138,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: '22.4.1'
 
       - name: Cache yarn files
         uses: actions/cache@v4
@@ -174,7 +174,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: '22.4.1'
 
       - name: Cache yarn files
         uses: actions/cache@v4
@@ -202,7 +202,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['18','20','22']
+        node: ['18','20','22.4.1']
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -258,7 +258,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: '22.4.1'
 
       - name: Cache yarn files
         uses: actions/cache@v4
@@ -309,7 +309,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: '22.4.1'
           registry-url: 'https://registry.npmjs.org'
           scope: '@securityscorecard'
 

package.json

@@ -70,7 +70,6 @@
     "dayjs": "^1.11.0",
     "dedent": "^1.5.1",
     "fast-deep-equal": "^3.1.3",
-    "focus-trap-react": "^10.2.3",
     "focus-within-polyfill": "^5.2.1",
     "numeral": "^2.0.6",
     "prop-types": "^15.8.1",

src/components/Drawer/Drawer.tsx

@@ -11,7 +11,6 @@ import { useLockBodyScroll } from '../../hooks/useLockBodyScroll';
 import { useOuterClick } from '../../hooks/useOuterCallback';
 import { Inline, Padbox, Surface } from '../layout';
 import { Overlay } from '../_internal/BaseOverlay';
-import { BaseFocusTrap } from '../_internal/BaseFocusTrap';
 import {
   getColor,
   getDepth,
@@ -206,15 +205,11 @@ const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
       <FloatingProvider>
         <Portal>
           {hasBackdrop ? (
-            <BaseFocusTrap onDeactivate={onClose as () => void}>
-              <Overlay data-testid="dialog-overlay" placement="right">
-                <DrawerBox {...drawerProps} />
-              </Overlay>
-            </BaseFocusTrap>
-          ) : (
-            <BaseFocusTrap onDeactivate={onClose as () => void}>
+            <Overlay data-testid="dialog-overlay" placement="right">
               <DrawerBox {...drawerProps} />
-            </BaseFocusTrap>
+            </Overlay>
+          ) : (
+            <DrawerBox {...drawerProps} />
           )}
         </Portal>
       </FloatingProvider>
@@ -233,7 +228,6 @@ DrawerBox.propTypes = {
   size: PropTypes.oneOf(Object.values(DrawerSizes)),
   props: PropTypes.objectOf(PropTypes.oneOf([PropTypes.string])),
 };
-
 Drawer.propTypes = {
   children: PropTypes.node.isRequired,
   title: PropTypes.string.isRequired,

src/components/Dropdown/ControlledDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, forwardRef, useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { SpaceSizes } from '../../theme';
@@ -10,7 +10,6 @@ import DropdownPane from './DropdownPane';
 import { DropdownPlacements } from './Dropdown.enums';
 import { mergeRefs } from '../../utils/mergeRefs';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
-import { useFloatingContext } from '../../contexts/FloatingContext';
 
 const ControlledDropdown = forwardRef<
   HTMLDivElement,
@@ -45,12 +44,9 @@ const ControlledDropdown = forwardRef<
 
     useFocusTrap({ el: paneEl, enabled: isOpen && focusTrap });
     const { Portal } = usePortal();
-    const isInFloatingElement = useFloatingContext() ?? false;
-
-    const MaybePortal = isInFloatingElement ? Fragment : Portal;
 
     return isOpen ? (
-      <MaybePortal>
+      <Portal>
         <DropdownPane
           ref={mergeRefs(ref, setPaneEl)}
           arrowRef={setArrowEl}
@@ -67,7 +63,7 @@ const ControlledDropdown = forwardRef<
         >
           {children}
         </DropdownPane>
-      </MaybePortal>
+      </Portal>
     ) : null;
   },
 );

src/components/Modal/Modal.tsx

@@ -12,7 +12,6 @@ import { useOuterClick } from '../../hooks/useOuterCallback';
 import { Inline, Padbox } from '../layout';
 import { H4 } from '../Heading';
 import { Overlay } from '../_internal/BaseOverlay';
-import { BaseFocusTrap } from '../_internal/BaseFocusTrap';
 import { getColor, getRadii, pxToRem } from '../../utils';
 import { mergeRefs } from '../../utils/mergeRefs';
 import { SpaceSizes } from '../../theme';
@@ -58,7 +57,6 @@ const Content = styled(Padbox)`
 const Footer = styled(Padbox)`
   border-top: 1px solid ${getColor('neutral.300')};
 `;
-
 const Modal = forwardRef<HTMLDivElement, ModalProps>(
   (
     {
@@ -87,39 +85,37 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
     return (
       <FloatingProvider>
         <Portal>
-          <BaseFocusTrap onDeactivate={onClose as () => void}>
-            <Overlay data-testid="dialog-overlay" placement="center">
-              <BaseModal
-                ref={mergeRefs<HTMLDivElement>(modalRef, ref)}
-                $maxWidth={widthVariants[size]}
-                className={cls(CLX_COMPONENT, className, 'ssc-ui-styled')}
-                {...rest}
-              >
-                <Inline stretch={StretchEnum.start}>
-                  <Padbox paddingSize={SpaceSizes.lgPlus} paddingType="squish">
-                    {isNotUndefined(title) && <Title>{title}</Title>}
-                  </Padbox>
-                  {onClose && (
-                    <CloseButton
-                      marginCompensation={SpaceSizes.none}
-                      onClose={onClose}
-                    />
-                  )}
-                </Inline>
-                <Content
-                  paddingSize={paddingVariants[size]}
-                  paddingType={hasFooter ? 'squish' : 'square'}
-                >
-                  {children}
-                </Content>
-                {hasFooter && (
-                  <Footer paddingSize={SpaceSizes.lgPlus} paddingType="squish">
-                    {footer}
-                  </Footer>
+          <Overlay data-testid="dialog-overlay" placement="center">
+            <BaseModal
+              ref={mergeRefs<HTMLDivElement>(modalRef, ref)}
+              $maxWidth={widthVariants[size]}
+              className={cls(CLX_COMPONENT, className, 'ssc-ui-styled')}
+              {...rest}
+            >
+              <Inline stretch={StretchEnum.start}>
+                <Padbox paddingSize={SpaceSizes.lgPlus} paddingType="squish">
+                  {isNotUndefined(title) && <Title>{title}</Title>}
+                </Padbox>
+                {onClose && (
+                  <CloseButton
+                    marginCompensation={SpaceSizes.none}
+                    onClose={onClose}
+                  />
                 )}
-              </BaseModal>
-            </Overlay>
-          </BaseFocusTrap>
+              </Inline>
+              <Content
+                paddingSize={paddingVariants[size]}
+                paddingType={hasFooter ? 'squish' : 'square'}
+              >
+                {children}
+              </Content>
+              {hasFooter && (
+                <Footer paddingSize={SpaceSizes.lgPlus} paddingType="squish">
+                  {footer}
+                </Footer>
+              )}
+            </BaseModal>
+          </Overlay>
         </Portal>
       </FloatingProvider>
     );

src/components/_internal/BaseSingleDatePicker/styles.ts

@@ -115,6 +115,7 @@ export const datePickerStyles = css`
   }
   .react-datepicker-popper {
     z-index: 10;
+    width: 16.25rem;
   }
   .react-datepicker-popper[data-placement^='bottom']
     .react-datepicker__triangle,

src/theme/GlobalStyles/GlobalStyles.tsx

@@ -60,6 +60,9 @@ export default createGlobalStyle`
     font-size: 100%;
     vertical-align: baseline;
   }
+  abbr {
+    text-decoration: none;
+  }
   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure,
   footer, header, hgroup, main, menu, nav, section {

yarn.lock

@@ -4866,7 +4866,6 @@ __metadata:
     eslint-plugin-storybook: ^0.5.12
     eslint-plugin-testing-library: ^5.1.0
     fast-deep-equal: ^3.1.3
-    focus-trap-react: ^10.2.3
     focus-within-polyfill: ^5.2.1
     history: ^5.3.0
     husky: ^7.0.4
@@ -13110,29 +13109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-trap-react@npm:^10.2.3":
-  version: 10.2.3
-  resolution: "focus-trap-react@npm:10.2.3"
-  dependencies:
-    focus-trap: ^7.5.4
-    tabbable: ^6.2.0
-  peerDependencies:
-    prop-types: ^15.8.1
-    react: ">=16.3.0"
-    react-dom: ">=16.3.0"
-  checksum: 5efbde5af1cdd5873b1a58f04832099b10f4acdaab6d144f03b7414c77f71e54b68907e790349043d8faa89375c85186b6565b3b35d8e1c98efff8fece301c70
-  languageName: node
-  linkType: hard
-
-"focus-trap@npm:^7.5.4":
-  version: 7.5.4
-  resolution: "focus-trap@npm:7.5.4"
-  dependencies:
-    tabbable: ^6.2.0
-  checksum: 9589ae0c8ad2f0bb0610c23e949571ef956424f1e7f7e1981c0d95ce518ea97b8bdd3d43b68c6113cbbcf35c9d36d521ffc2841610f7d5cc1746e2aa84faf578
-  languageName: node
-  linkType: hard
-
 "focus-within-polyfill@npm:^5.2.1":
   version: 5.2.1
   resolution: "focus-within-polyfill@npm:5.2.1"
@@ -22676,13 +22652,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tabbable@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "tabbable@npm:6.2.0"
-  checksum: f8440277d223949272c74bb627a3371be21735ca9ad34c2570f7e1752bd646ccfc23a9d8b1ee65d6561243f4134f5fbbf1ad6b39ac3c4b586554accaff4a1300
-  languageName: node
-  linkType: hard
-
 "table@npm:^6.8.2":
   version: 6.8.2
   resolution: "table@npm:6.8.2"