@skyscanner/backpack-web 29.4.0 → 29.4.1

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -21,35 +21,12 @@ import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import keyboardFocusScope from "./keyboardFocusScope";
 import STYLES from "./BpkPopover.module.css";
-import BpkPopover, { propTypes as popoverPropTypes, defaultProps as popoverDefaultProps } from "./BpkPopover";
+import BpkPopover from "./BpkPopover";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-export const propTypes = {
-  ...popoverPropTypes,
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  portalStyle: PropTypes.object,
-  // eslint-disable-line react/forbid-prop-types
-  portalClassName: PropTypes.string,
-  renderTarget: PropTypes.func,
-  popperModifiers: PropTypes.arrayOf(PropTypes.object) // eslint-disable-line react/forbid-prop-types
-};
-
-export const defaultProps = {
-  ...popoverDefaultProps,
-  placement: 'bottom',
-  portalStyle: null,
-  portalClassName: null,
-  renderTarget: null,
-  popperModifiers: null
-};
 class BpkPopoverPortal extends Component {
-  static propTypes = propTypes;
-  static defaultProps = defaultProps;
   constructor() {
     super();
     this.popper = null;
@@ -189,4 +166,53 @@ class BpkPopoverPortal extends Component {
     });
   }
 }
+const propTypes = {
+  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
+  children: PropTypes.node.isRequired,
+  closeButtonText: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  closeButtonIcon: PropTypes.bool,
+  closeButtonProps: PropTypes.object,
+  labelAsTitle: PropTypes.bool,
+  padded: PropTypes.bool,
+  // BpkPopoverPortal additional props
+  /**
+   * In order to attach the popover to a regular DOM element, provide a function which returns it to `target`.
+   * `target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
+   */
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  portalStyle: PropTypes.object,
+  portalClassName: PropTypes.string,
+  renderTarget: PropTypes.func,
+  /**
+   * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
+   * You can achieve various behaviours such as allowing the popover to overflow the viewport etc.
+   */
+  popperModifiers: PropTypes.arrayOf(PropTypes.object)
+};
+const defaultProps = {
+  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
+  className: null,
+  closeButtonIcon: true,
+  closeButtonProps: null,
+  labelAsTitle: false,
+  padded: true,
+  // BpkPopoverPortal additional props
+  placement: 'bottom',
+  portalStyle: null,
+  portalClassName: null,
+  renderTarget: null,
+  popperModifiers: null
+};
+BpkPopoverPortal.propTypes = {
+  ...propTypes
+};
+BpkPopoverPortal.defaultProps = {
+  ...defaultProps
+};
 export default BpkPopoverPortal;

package/bpk-component-progress/src/BpkProgress.js

@@ -36,26 +36,26 @@ const renderSteps = numberOfSteps => {
   }
   return steps;
 };
+const propTypes = {
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+  stepped: PropTypes.bool,
+  small: PropTypes.bool,
+  className: PropTypes.string,
+  onComplete: PropTypes.func,
+  onCompleteTransitionEnd: PropTypes.func,
+  getValueText: PropTypes.func
+};
+const defaultProps = {
+  className: null,
+  stepped: false,
+  small: false,
+  onComplete: () => null,
+  onCompleteTransitionEnd: () => null,
+  getValueText: null
+};
 class BpkProgress extends Component {
-  static propTypes = {
-    max: PropTypes.number.isRequired,
-    min: PropTypes.number.isRequired,
-    value: PropTypes.number.isRequired,
-    stepped: PropTypes.bool,
-    small: PropTypes.bool,
-    className: PropTypes.string,
-    onComplete: PropTypes.func,
-    onCompleteTransitionEnd: PropTypes.func,
-    getValueText: PropTypes.func
-  };
-  static defaultProps = {
-    className: null,
-    stepped: false,
-    small: false,
-    onComplete: () => null,
-    onCompleteTransitionEnd: () => null,
-    getValueText: null
-  };
   componentDidUpdate(previousProps) {
     const {
       max,
@@ -119,4 +119,10 @@ class BpkProgress extends Component {
     );
   }
 }
+BpkProgress.propTypes = {
+  ...propTypes
+};
+BpkProgress.defaultProps = {
+  ...defaultProps
+};
 export default BpkProgress;

package/bpk-component-select/src/BpkSelect.js

@@ -62,11 +62,13 @@ const BpkSelect = props => {
 BpkSelect.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  // The below "value" prop is only relevant if the user is wanting a controlled component
-  // In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
-  // In this case value is not required and nor should it be given a default value (as the linter thinks)
-  // Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
-  // As a solution, the require-default-props has been disabled for this line.
+  /**
+   * The "value" prop is only relevant if the user is wanting a controlled component
+   * In some cases, users may want to create an uncontrolled select as described here: https://beta.reactjs.org/reference/react-dom/components/select
+   * In this case value is not required and nor should it be given a default value (as the linter thinks)
+   * Prop types are not expressive enough (without a drastic increase in complexity of writing a custom validator) to encode this relationship. Equally, this wouldn't actually solve the linting issue (AFAIK).
+   * As a solution, the require-default-props has been disabled for this line.
+   */
 
   value: PropTypes.string,
   className: PropTypes.string,

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

@@ -21,7 +21,15 @@ import { Component } from 'react';
 import type { ReactNode, ReactElement } from 'react';
 import type { TooltipProps } from './BpkTooltip';
 export type Props = TooltipProps & {
+    /**
+     * Tooltips are invisible to assistive technologies such as screen readers.
+     * To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
+     * The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
+     */
     ariaLabel: string;
+    /**
+     * "target" should be a DOM element with a "ref" attached to it.
+     */
     target: ReactElement<any>;
     children: ReactNode | string;
     placement?: 'top' | 'right' | 'bottom' | 'left' | 'auto';
@@ -29,6 +37,10 @@ export type Props = TooltipProps & {
     portalStyle?: object;
     portalClassName?: string;
     renderTarget: null | (() => null | HTMLElement);
+    /**
+     * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
+     * You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
+     */
     popperModifiers?: object[];
 };
 type State = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.4.0",
+  "version": "29.4.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",