@skyscanner/backpack-web 23.2.2 → 24.0.0

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts

@@ -0,0 +1,151 @@
+/*
+ * 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.
+ */
+
+import type { ComponentType } from 'react';
+
+declare const updateOnDirectionChange: (
+  EnhancedComponent: ComponentType<any> | string,
+) => {
+  new (props: {} | Readonly<{}>): {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDirectionChange: () => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<{}>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<{}> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    shouldComponentUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  new (props: {}, context: any): {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDirectionChange: () => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<{}>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<{}> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    shouldComponentUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  displayName: string;
+  contextType?: import('react').Context<any> | undefined;
+};
+export default updateOnDirectionChange;

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js

@@ -38,15 +38,22 @@ const updateOnDirectionChange = EnhancedComponent => {
       });
     }
     componentDidMount() {
-      (0, _utils.getHtmlElement)().addEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      const htmlElement = (0, _utils.getHtmlElement)();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.addEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      }
     }
     componentWillUnmount() {
-      (0, _utils.getHtmlElement)().removeEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      const htmlElement = (0, _utils.getHtmlElement)();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.removeEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      }
     }
     render() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(EnhancedComponent, _objectSpread({}, this.props));
     }
   }
+  _defineProperty(UpdateOnDirectionChange, "displayName", void 0);
   UpdateOnDirectionChange.displayName = (0, _bpkReactUtils.wrapDisplayName)(EnhancedComponent, 'updateOnDirectionChange');
   return UpdateOnDirectionChange;
 };

package/bpk-component-rtl-toggle/src/utils.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+declare const DIRECTIONS: {
+  readonly LTR: 'ltr';
+  readonly RTL: 'rtl';
+};
+declare const DIRECTION_CHANGE_EVENT = 'bpkchangedirection';
+declare const getHtmlElement: () => HTMLElement | null | {};
+export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };

package/bpk-component-text/index.d.ts

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+import component, { TEXT_STYLES } from './src/BpkText';
+export default component;
+export { TEXT_STYLES };

package/bpk-component-text/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "TEXT_STYLES", {
     return _BpkText.TEXT_STYLES;
   }
 });
-Object.defineProperty(exports, "WEIGHT_STYLES", {
-  enumerable: true,
-  get: function () {
-    return _BpkText.WEIGHT_STYLES;
-  }
-});
 exports.default = void 0;
 var _BpkText = _interopRequireWildcard(require("./src/BpkText"));
 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); }

package/bpk-component-text/src/BpkText.d.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+import type { ReactNode } from 'react';
+export declare const TEXT_STYLES: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly base: "base";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly xxxl: "xxxl";
+    readonly xxxxl: "xxxxl";
+    readonly xxxxxl: "xxxxxl";
+    readonly caption: "caption";
+    readonly footnote: "footnote";
+    readonly label1: "label-1";
+    readonly label2: "label-2";
+    readonly label3: "label-3";
+    readonly bodyDefault: "body-default";
+    readonly bodyLongform: "body-longform";
+    readonly subheading: "subheading";
+    readonly heading1: "heading-1";
+    readonly heading2: "heading-2";
+    readonly heading3: "heading-3";
+    readonly heading4: "heading-4";
+    readonly heading5: "heading-5";
+    readonly hero1: "hero-1";
+    readonly hero2: "hero-2";
+    readonly hero3: "hero-3";
+    readonly hero4: "hero-4";
+    readonly hero5: "hero-5";
+};
+export type TextStyle = typeof TEXT_STYLES[keyof typeof TEXT_STYLES];
+export type Tag = 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type Props = {
+    children: ReactNode;
+    textStyle?: TextStyle;
+    tagName?: Tag;
+    className?: string | null;
+    id?: string;
+    [rest: string]: any;
+};
+declare const BpkText: ({ textStyle, tagName: TagName, className, children, ...rest }: Props) => JSX.Element;
+export default BpkText;

package/bpk-component-text/src/BpkText.js

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WEIGHT_STYLES = exports.TEXT_STYLES = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = exports.TEXT_STYLES = void 0;
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkTextModule = _interopRequireDefault(require("./BpkText.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["bold", "children", "className", "tagName", "textStyle", "weight"];
+const _excluded = ["textStyle", "tagName", "className", "children"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -65,59 +64,20 @@ const TEXT_STYLES = {
   hero5: 'hero-5'
 };
 exports.TEXT_STYLES = TEXT_STYLES;
-const WEIGHT_STYLES = {
-  regular: 'regular',
-  bold: 'bold',
-  black: 'black'
-};
-exports.WEIGHT_STYLES = WEIGHT_STYLES;
-const getWeight = (bold, weight, textStyle) => {
-  if (bold || weight === WEIGHT_STYLES.bold) {
-    return WEIGHT_STYLES.bold;
-  }
-
-  // Weight can only be black if textStyle is `xl`, `xxl` or `xxxl`.
-  if (weight === WEIGHT_STYLES.black && textStyle.match(/^x+l$/)) {
-    return WEIGHT_STYLES.black;
-  }
-  return null;
-};
-const BpkText = props => {
-  const {
-      bold,
-      children,
-      className,
-      tagName: TagName,
-      textStyle,
-      weight
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const validWeight = getWeight(bold, weight, textStyle);
-  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, validWeight && `bpk-text--${validWeight}`, className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    (0, _jsxRuntime.jsx)(TagName, _objectSpread(_objectSpread({
-      className: classNames
-    }, rest), {}, {
-      children: children
-    }))
-  );
-};
-BpkText.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  textStyle: _propTypes.default.oneOf(Object.values(TEXT_STYLES)),
-  tagName: _propTypes.default.oneOf(['span', 'p', 'text', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
-  className: _propTypes.default.string,
-  bold: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'Use a different "textStyle" to achieve the desired weight.'),
-  weight: (0, _bpkReactUtils.deprecated)(_propTypes.default.oneOf(Object.keys(WEIGHT_STYLES)), 'Use a different "textStyle" to achieve the desired weight.')
-};
-BpkText.defaultProps = {
-  textStyle: TEXT_STYLES.bodyDefault,
-  tagName: 'span',
-  className: null,
-  bold: null,
-  weight: null
+const BpkText = _ref => {
+  let {
+      textStyle = TEXT_STYLES.bodyDefault,
+      tagName: TagName = 'span',
+      className = null,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, _objectSpread(_objectSpread({
+    className: classNames
+  }, rest), {}, {
+    children: children
+  }));
 };
 var _default = BpkText;
 exports.default = _default;

package/bpk-component-text/src/BpkText.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--bold{font-weight:700}.bpk-text--black{font-weight:900}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-text{margin:0}.bpk-text--xs{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--sm{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--base{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--lg{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--xl{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--xxl{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--xxxl{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--xxxxl{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--xxxxxl{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--caption{font-size:.75rem;line-height:1rem;font-weight:400}.bpk-text--footnote{font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-text--label-1{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-text--label-2{font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-text--label-3{font-size:.75rem;line-height:1rem;font-weight:700}.bpk-text--body-default{font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-text--body-longform{font-size:1.25rem;line-height:1.75rem;font-weight:400}.bpk-text--subheading{font-size:1.5rem;line-height:2rem;font-weight:400}.bpk-text--heading-1{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-text--heading-2{font-size:2rem;line-height:2.5rem;font-weight:700}.bpk-text--heading-3{font-size:1.5rem;line-height:1.75rem;font-weight:700}.bpk-text--heading-4{font-size:1.25rem;line-height:1.5rem;font-weight:700}.bpk-text--heading-5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-text--hero-1{font-size:7.5rem;line-height:7.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-2{font-size:6rem;line-height:6rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-3{font-size:4.75rem;line-height:5.25rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-4{font-size:4rem;line-height:4.5rem;font-weight:700;letter-spacing:-.02em}.bpk-text--hero-5{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-.02em}

package/bpk-component-tooltip/index.d.ts

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+import BpkTooltipPortal from './src/BpkTooltipPortal';
+import type { Props } from './src/BpkTooltipPortal';
+import { TOOLTIP_TYPES } from './src/constants';
+export type BpkTooltipPortalProps = Props;
+export default BpkTooltipPortal;
+export { TOOLTIP_TYPES };

package/bpk-component-tooltip/src/BpkTooltip.d.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+import type { ReactNode } from 'react';
+import { TOOLTIP_TYPES } from './constants';
+export type TooltipProps = {
+    id: string;
+    children: ReactNode | string;
+    type?: typeof TOOLTIP_TYPES[keyof typeof TOOLTIP_TYPES];
+    padded?: boolean;
+    className?: string | null;
+};
+declare const BpkTooltip: ({ children, className, id, padded, type, ...rest }: TooltipProps) => JSX.Element;
+export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.propTypes = exports.defaultProps = exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkTooltipModule = _interopRequireDefault(require("./BpkTooltip.module.css"));
 var _constants = require("./constants");
@@ -41,15 +40,15 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTooltipModule.default);
-const BpkTooltip = props => {
-  const {
+const BpkTooltip = _ref => {
+  let {
       children,
-      className,
+      className = null,
       id,
-      padded,
-      type
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+      padded = true,
+      type = _constants.TOOLTIP_TYPES.light
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
   const classNames = getClassName('bpk-tooltip', className);
   const innerClassNames = getClassName('bpk-tooltip__inner', type === _constants.TOOLTIP_TYPES.dark && 'bpk-tooltip__inner--dark', padded && 'bpk-tooltip__inner--padded');
   const arrowClassNames = getClassName('bpk-tooltip__arrow', type === _constants.TOOLTIP_TYPES.dark && 'bpk-tooltip__arrow--dark');
@@ -59,7 +58,7 @@ const BpkTooltip = props => {
     transitionTimeout: 200,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", _objectSpread(_objectSpread({
       id: id,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "dialog",
       className: classNames
     }, rest), {}, {
@@ -75,21 +74,5 @@ const BpkTooltip = props => {
     }))
   });
 };
-const propTypes = {
-  id: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string,
-  padded: _propTypes.default.bool,
-  type: _propTypes.default.oneOf(Object.keys(_constants.TOOLTIP_TYPES))
-};
-exports.propTypes = propTypes;
-const defaultProps = {
-  className: null,
-  padded: true,
-  type: _constants.TOOLTIP_TYPES.light
-};
-exports.defaultProps = defaultProps;
-BpkTooltip.propTypes = _objectSpread({}, propTypes);
-BpkTooltip.defaultProps = _objectSpread({}, defaultProps);
 var _default = BpkTooltip;
 exports.default = _default;

package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+import { createPopper } from '@popperjs/core';
+import { Component } from 'react';
+import type { ReactNode, ReactElement } from 'react';
+import type { TooltipProps } from './BpkTooltip';
+export type Props = TooltipProps & {
+    ariaLabel: string;
+    target: ReactElement<any>;
+    children: ReactNode | string;
+    placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
+    hideOnTouchDevices?: boolean;
+    portalStyle?: object;
+    portalClassName?: string;
+    renderTarget: null | (() => null | HTMLElement);
+    popperModifiers?: object[];
+};
+type State = {
+    isOpen: boolean;
+};
+declare class BpkTooltipPortal extends Component<Props, State> {
+    popper?: ReturnType<typeof createPopper> | null;
+    targetRef?: Element | null;
+    static defaultProps: {
+        className: null;
+        padded: boolean;
+        type: "light";
+        placement: string;
+        hideOnTouchDevices: boolean;
+        portalStyle: null;
+        portalClassName: null;
+        renderTarget: null;
+        popperModifiers: null;
+    };
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onOpen: (tooltipElement: HTMLElement, targetElement?: HTMLElement | null | undefined) => void;
+    beforeClose: (done: () => void | null) => void;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    render(): JSX.Element;
+}
+export default BpkTooltipPortal;

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -5,15 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _core = require("@popperjs/core");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkTooltip = _interopRequireWildcard(require("./BpkTooltip"));
+var _BpkTooltip = _interopRequireDefault(require("./BpkTooltip"));
 var _BpkTooltipModule = _interopRequireDefault(require("./BpkTooltip.module.css"));
+var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ariaLabel", "children", "hideOnTouchDevices", "padded", "placement", "popperModifiers", "portalClassName", "portalStyle", "renderTarget", "target"];
-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); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -39,10 +37,10 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * limitations under the License.
                                                                                                                                                                                                                                                                                                                                                                                            */
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTooltipModule.default);
-const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch));
+const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
 class BpkTooltipPortal extends _react.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     _defineProperty(this, "popper", void 0);
     _defineProperty(this, "targetRef", void 0);
     _defineProperty(this, "onOpen", (tooltipElement, targetElement) => {
@@ -152,25 +150,19 @@ class BpkTooltipPortal extends _react.Component {
     });
   }
 }
-_defineProperty(BpkTooltipPortal, "propTypes", _objectSpread(_objectSpread({}, _BpkTooltip.propTypes), {}, {
-  ariaLabel: _propTypes.default.string.isRequired,
-  target: _propTypes.default.node.isRequired,
-  children: _propTypes.default.node.isRequired,
-  placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
-  hideOnTouchDevices: _propTypes.default.bool,
-  portalStyle: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  portalClassName: _propTypes.default.string,
-  renderTarget: _propTypes.default.func,
-  popperModifiers: _propTypes.default.arrayOf(_propTypes.default.object) // eslint-disable-line react/forbid-prop-types
-}));
-_defineProperty(BpkTooltipPortal, "defaultProps", _objectSpread(_objectSpread({}, _BpkTooltip.defaultProps), {}, {
+_defineProperty(BpkTooltipPortal, "defaultProps", {
+  // Disabling as the rule doesn't work when types are defined in a different file
+  /* eslint-disable react/default-props-match-prop-types */
+  className: null,
+  padded: true,
+  type: _constants.TOOLTIP_TYPES.light,
+  /* eslint-enable */
   placement: 'bottom',
   hideOnTouchDevices: true,
   portalStyle: null,
   portalClassName: null,
   renderTarget: null,
   popperModifiers: null
-}));
+});
 var _default = BpkTooltipPortal;
 exports.default = _default;