[COR-481][BpkDrawer] Update backpack drawer to tsx

package.json

@@ -142,6 +142,7 @@
     "@types/lodash.clamp": "^4.0.9",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
+    "@types/react-transition-group": "^4.4.11",
     "@types/react-window": "^1.8.8",
     "@types/webpack-env": "^1.18.4",
     "autoprefixer": "^10.4.18",

packages/bpk-component-banner-alert/src/AnimateAndFade.tsx

@@ -19,7 +19,6 @@
 import { Component } from 'react';
 import type { ReactNode } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

packages/bpk-component-drawer/index.js → packages/bpk-component-drawer/index.ts

@@ -21,5 +21,9 @@
 import BpkDrawer from './src/BpkDrawer';
 import themeAttributes from './src/themeAttributes';
 
+import type { Props } from './src/BpkDrawer';
+
+export type BpkDrawerProps = Props;
+
 export default BpkDrawer;
 export { themeAttributes };

packages/bpk-component-drawer/src/BpkDrawer-test.js → packages/bpk-component-drawer/src/BpkDrawer-test.tsx

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
 import { render } from '@testing-library/react';
 
 import BpkDrawer from './BpkDrawer';

packages/bpk-component-drawer/src/BpkDrawer.tsx

@@ -0,0 +1,110 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* @flow strict */
+
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+
+import { Portal, isDeviceIphone } from '../../bpk-react-utils';
+import { withScrim } from '../../bpk-scrim-utils';
+
+import BpkDrawerContent from './BpkDrawerContent';
+
+const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
+
+export type Props = {
+  id: string,
+  children: ReactNode;
+  isOpen: boolean,
+  onClose?: (
+    arg0?: TouchEvent | MouseEvent | KeyboardEvent,
+    arg1?: {
+      source: 'ESCAPE' | 'DOCUMENT_CLICK';
+    },
+  ) => void;
+  title: string,
+  getApplicationElement: () => HTMLElement | null,
+  renderTarget?: null | HTMLElement | (() => null | HTMLElement),
+  dialogRef?: (ref: HTMLElement | null | undefined) => void,
+  className?: string | null,
+  contentClassName?: string,
+  closeLabel?: string | null,
+  closeText?: string,
+  hideTitle?: boolean,
+  isIphone?: boolean,
+  padded?: boolean,
+};
+
+const BpkDrawer = ({
+  children,
+  className = null,
+  closeLabel = null,
+  closeText = undefined,
+  contentClassName = undefined,
+  dialogRef,
+  getApplicationElement,
+  hideTitle = false,
+  id,
+  isIphone = isDeviceIphone(),
+  isOpen,
+  onClose,
+  padded = true,
+  renderTarget = null,
+  title,
+}: Props) =>  {
+
+  const [isDrawerShown, setIsDrawerShown] = useState(true);
+
+  const onCloseAnimationComplete = () => {
+    if (onClose){
+      onClose();
+    }
+  };
+
+  const hide = () => {
+    setIsDrawerShown(false)
+  };
+
+  return(
+      <Portal isOpen={isOpen} onClose={hide} renderTarget={renderTarget}>
+        <BpkScrimDrawerContent
+          id={id}
+          title={title}
+          dialogRef={dialogRef}
+          closeLabel={closeLabel || ""}
+          closeText={closeText}
+          additionalClassName={className}
+          contentClassName={contentClassName}
+          getApplicationElement={getApplicationElement}
+          hideTitle={hideTitle}
+          isDrawerShown={isDrawerShown}
+          onClose={hide}
+          onCloseAnimationComplete={onCloseAnimationComplete}
+          closeOnScrimClick
+          isIpad
+          isIphone={isIphone}
+          padded={padded}
+        >
+          {children}
+        </BpkScrimDrawerContent>
+      </Portal>
+  );
+}
+
+export default BpkDrawer;

packages/bpk-component-drawer/src/BpkDrawerContent-test.tsx

@@ -39,7 +39,7 @@ describe('BpkDrawerContent', () => {
         onCloseAnimationComplete={jest.fn()}
         closeLabel="Close"
         dialogRef={jest.fn()}
-      >
+        >
         Drawer content
       </BpkDrawerContent>,
     );

packages/bpk-component-drawer/src/BpkDrawerContent.tsx

@@ -18,8 +18,7 @@
 
 import type { ReactNode } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import Transition from 'react-transition-group/Transition';
+import { Transition } from 'react-transition-group';
 
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
@@ -49,7 +48,7 @@ type Props = {
   closeOnScrimClick?: boolean,
   isIphone?: boolean,
   isIpad?: boolean,
-  padded?: boolean,
+  padded?: boolean
 };
 
 const BpkDrawerContent = ({

packages/bpk-component-drawer/src/themeAttributes.js → packages/bpk-component-drawer/src/themeAttributes.ts

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-/* @flow strict */
-
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { themeAttributes as linkAttributes } from '../../bpk-component-link';
 
 export default [...linkAttributes];

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

@@ -19,7 +19,6 @@
 import type { MouseEvent, FunctionComponent } from 'react';
 import { useEffect, useState } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 
 import BpkAriaLive from '../../bpk-component-aria-live';

packages/bpk-component-image/src/BpkBackgroundImage.tsx

@@ -19,7 +19,6 @@
 import { Component } from 'react';
 import type { ReactNode, CSSProperties } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

packages/bpk-component-image/src/BpkImage.tsx

@@ -18,7 +18,6 @@
 
 import { Component } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

packages/bpk-component-info-banner/src/AnimateAndFade.tsx

@@ -19,7 +19,6 @@
 import { Component } from 'react';
 import type { ReactNode } from 'react';
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';

packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx

@@ -18,7 +18,6 @@
 import type { SyntheticEvent, ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import cssModules from '../cssModules';

packages/bpk-react-utils/src/TransitionInitialMount.tsx

@@ -20,7 +20,6 @@ import type { ReactNode } from 'react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import assign from 'object-assign';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 // Object.assign() is used unpolyfilled in react-transition-group.