diff --git a/package-lock.json b/package-lock.json index 4891ee40d3..b7336d07fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,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", @@ -9923,6 +9924,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-window": { "version": "1.8.8", "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", diff --git a/package.json b/package.json index a3954d57bd..b64706893f 100644 --- a/package.json +++ b/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", diff --git a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx b/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx index 3c7ecddbce..6d8d867b7f 100644 --- a/packages/bpk-component-banner-alert/src/AnimateAndFade.tsx +++ b/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'; diff --git a/packages/bpk-component-drawer/index.js b/packages/bpk-component-drawer/index.ts similarity index 90% rename from packages/bpk-component-drawer/index.js rename to packages/bpk-component-drawer/index.ts index 7bc579e451..fd132d7923 100644 --- a/packages/bpk-component-drawer/index.js +++ b/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 }; diff --git a/packages/bpk-component-drawer/src/BpkDrawer-test.js b/packages/bpk-component-drawer/src/BpkDrawer-test.tsx similarity index 98% rename from packages/bpk-component-drawer/src/BpkDrawer-test.js rename to packages/bpk-component-drawer/src/BpkDrawer-test.tsx index b1ebfd8748..2efed072fd 100644 --- a/packages/bpk-component-drawer/src/BpkDrawer-test.js +++ b/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'; diff --git a/packages/bpk-component-drawer/src/BpkDrawer.js b/packages/bpk-component-drawer/src/BpkDrawer.js deleted file mode 100644 index 4f201fe6a5..0000000000 --- a/packages/bpk-component-drawer/src/BpkDrawer.js +++ /dev/null @@ -1,125 +0,0 @@ -/* - * 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 PropTypes from 'prop-types'; -import { Component } from 'react'; - -import { Portal } from '../../bpk-react-utils'; -import { withScrim } from '../../bpk-scrim-utils'; - -import BpkDrawerContent from './BpkDrawerContent'; - -const BpkScrimDrawerContent = withScrim(BpkDrawerContent); - -type Props = { - id: string, - children: Node, - isOpen: boolean, - onClose: () => mixed, - title: string, - getApplicationElement: () => mixed, - renderTarget: ?() => mixed, - dialogRef: ?() => mixed, - className: ?string, - contentClassName: ?string, - closeLabel: ?string, - closeText: ?string, - hideTitle: ?boolean, - padded?: boolean, -}; - -type State = { - isDrawerShown: boolean, -}; - -class BpkDrawer extends Component { - constructor() { - super(); - - this.state = { - isDrawerShown: true, - }; - } - - UNSAFE_componentWillReceiveProps(nextProps: Props) { - if (!this.props.isOpen && nextProps.isOpen) { - this.setState({ isDrawerShown: true }); - } - } - - onCloseAnimationComplete = () => { - this.props.onClose(); - }; - - hide = () => { - this.setState({ isDrawerShown: false }); - }; - - render() { - const { isOpen, onClose, renderTarget, ...rest } = this.props; - - const { isDrawerShown } = this.state; - - return ( - - {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */} - - - ); - } -} - -BpkDrawer.propTypes = { - id: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - isOpen: PropTypes.bool.isRequired, - onClose: PropTypes.func.isRequired, - title: PropTypes.string.isRequired, - /** - * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what - * the root element for your application is by returning it's DOM node via the function passed to the - * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work". - */ - getApplicationElement: PropTypes.func.isRequired, - renderTarget: PropTypes.func, - dialogRef: PropTypes.func, - className: PropTypes.string, - contentClassName: PropTypes.string, - closeLabel: PropTypes.string, - closeText: PropTypes.string, - hideTitle: PropTypes.bool, -}; - -BpkDrawer.defaultProps = { - renderTarget: null, - className: null, - contentClassName: null, - closeLabel: null, - closeText: null, - hideTitle: false, - padded: true, -}; - -export default BpkDrawer; diff --git a/packages/bpk-component-drawer/src/BpkDrawer.tsx b/packages/bpk-component-drawer/src/BpkDrawer.tsx new file mode 100644 index 0000000000..c3e50cf55c --- /dev/null +++ b/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( + + + {children} + + + ); +} + +export default BpkDrawer; diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent-test.tsx b/packages/bpk-component-drawer/src/BpkDrawerContent-test.tsx index acd6e7d7fe..731bff1461 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent-test.tsx +++ b/packages/bpk-component-drawer/src/BpkDrawerContent-test.tsx @@ -39,7 +39,7 @@ describe('BpkDrawerContent', () => { onCloseAnimationComplete={jest.fn()} closeLabel="Close" dialogRef={jest.fn()} - > + > Drawer content , ); diff --git a/packages/bpk-component-drawer/src/BpkDrawerContent.tsx b/packages/bpk-component-drawer/src/BpkDrawerContent.tsx index 2b9de8c498..6cbd861156 100644 --- a/packages/bpk-component-drawer/src/BpkDrawerContent.tsx +++ b/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 = ({ diff --git a/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap b/packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.tsx.snap similarity index 100% rename from packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.js.snap rename to packages/bpk-component-drawer/src/__snapshots__/BpkDrawer-test.tsx.snap diff --git a/packages/bpk-component-drawer/src/accessibility-test.js b/packages/bpk-component-drawer/src/accessibility-test.tsx similarity index 100% rename from packages/bpk-component-drawer/src/accessibility-test.js rename to packages/bpk-component-drawer/src/accessibility-test.tsx diff --git a/packages/bpk-component-drawer/src/themeAttributes-test.js b/packages/bpk-component-drawer/src/themeAttributes-test.ts similarity index 100% rename from packages/bpk-component-drawer/src/themeAttributes-test.js rename to packages/bpk-component-drawer/src/themeAttributes-test.ts diff --git a/packages/bpk-component-drawer/src/themeAttributes.js b/packages/bpk-component-drawer/src/themeAttributes.ts similarity index 90% rename from packages/bpk-component-drawer/src/themeAttributes.js rename to packages/bpk-component-drawer/src/themeAttributes.ts index 030053ec85..a0f239930b 100644 --- a/packages/bpk-component-drawer/src/themeAttributes.js +++ b/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]; diff --git a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx b/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx index f4d26b6400..b666d329ed 100644 --- a/packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx +++ b/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'; diff --git a/packages/bpk-component-image/src/BpkBackgroundImage.tsx b/packages/bpk-component-image/src/BpkBackgroundImage.tsx index 697bb89f1d..6f8cefa2dd 100644 --- a/packages/bpk-component-image/src/BpkBackgroundImage.tsx +++ b/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'; diff --git a/packages/bpk-component-image/src/BpkImage.tsx b/packages/bpk-component-image/src/BpkImage.tsx index 61e74ae1dc..27f433a8b8 100644 --- a/packages/bpk-component-image/src/BpkImage.tsx +++ b/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'; diff --git a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx b/packages/bpk-component-info-banner/src/AnimateAndFade.tsx index 3c7ecddbce..6d8d867b7f 100644 --- a/packages/bpk-component-info-banner/src/AnimateAndFade.tsx +++ b/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'; diff --git a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx b/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx index c57f0cc15c..afff66ac43 100644 --- a/packages/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.tsx +++ b/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'; diff --git a/packages/bpk-react-utils/src/TransitionInitialMount.tsx b/packages/bpk-react-utils/src/TransitionInitialMount.tsx index 8585c959d0..19f64b0469 100644 --- a/packages/bpk-react-utils/src/TransitionInitialMount.tsx +++ b/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.