@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-input/src/{BpkInput.tsx → BpkInput.js}

@@ -17,29 +17,21 @@
  */
 
 import { Component } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkClearButton from './BpkClearButton';
-import STYLES from './BpkInput.module.scss';
-import { CLEAR_BUTTON_MODES, defaultProps } from './common-types';
-import type { Props } from './common-types';
-
-type State = {
-  persistClearButton: boolean;
-};
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkClearButton from "./BpkClearButton";
+import STYLES from "./BpkInput.module.css";
+import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-class BpkInput extends Component<Props, State> {
+class BpkInput extends Component {
   static defaultProps = defaultProps;
-
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
-
-    this.state = { persistClearButton: false };
+    this.state = {
+      persistClearButton: false
+    };
   }
-
   render() {
     const classNames = [getClassName('bpk-input')];
     const containerClassNames = [getClassName('bpk-input__container')];
@@ -62,40 +54,28 @@ class BpkInput extends Component<Props, State> {
     } = this.props;
 
     // Used as a ref for focussing the input when cleared.
-    let ref: HTMLInputElement | null = null;
+    let ref = null;
 
     // Explicit check for false primitive value as undefined is
     // treated as neither valid nor invalid
     const isInvalid = valid === false;
-
-    const clearable =
-      clearButtonMode && clearButtonMode !== CLEAR_BUTTON_MODES.never;
-
+    const clearable = clearButtonMode && clearButtonMode !== CLEAR_BUTTON_MODES.never;
     if (valid) {
       classNames.push(getClassName('bpk-input--valid'));
     } else if (isInvalid) {
       classNames.push(getClassName('bpk-input--invalid'));
     }
-
     if (large) {
       classNames.push(getClassName('bpk-input--large'));
-      clearButtonClassNames.push(
-        getClassName('bpk-input__clear-button--large'),
-      );
+      clearButtonClassNames.push(getClassName('bpk-input__clear-button--large'));
     }
     if (clearable) {
       classNames.push(getClassName('bpk-input--clearable'));
-      if (
-        clearButtonMode === CLEAR_BUTTON_MODES.always ||
-        this.state.persistClearButton
-      ) {
+      if (clearButtonMode === CLEAR_BUTTON_MODES.always || this.state.persistClearButton) {
         classNames.push(getClassName('bpk-input--persistent-clearable'));
-        clearButtonClassNames.push(
-          getClassName('bpk-input__clear-button--persistent'),
-        );
+        clearButtonClassNames.push(getClassName('bpk-input__clear-button--persistent'));
       }
     }
-
     if (docked) {
       classNames.push(getClassName('bpk-input--docked'));
     }
@@ -115,60 +95,57 @@ class BpkInput extends Component<Props, State> {
         classNames.push(className);
       }
     }
-
-    const renderedInput = (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <input
-        className={classNames.join(' ')}
-        ref={(input: HTMLInputElement) => {
-          ref = input;
-          if (inputRef) {
-            inputRef(input);
-          }
-        }}
-        aria-invalid={isInvalid}
-        value={value}
-        name={name}
-        {...rest}
-      />
-    );
+    const renderedInput =
+    /*#__PURE__*/
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    _jsx("input", {
+      className: classNames.join(' '),
+      ref: input => {
+        ref = input;
+        if (inputRef) {
+          inputRef(input);
+        }
+      },
+      "aria-invalid": isInvalid,
+      value: value,
+      name: name,
+      ...rest
+    });
 
     // When we mouseDown, we should persist the clear button.
     // If we don't do this, then for `clearableWhileEditing` mode the mouseDown on the button will cause the input to lose focus,
     // which will hide the button. The `onClick` event cannot complete if the button is removed from the DOM but mouseUp!
     const onMouseDown = () => {
-      this.setState({ persistClearButton: true });
+      this.setState({
+        persistClearButton: true
+      });
     };
-
-    return clearable ? (
-      <div className={containerClassNames.join(' ')}>
-        {renderedInput}
-        {value.length > 0 && (
-          <BpkClearButton
-            tabIndex={-1}
-            label={clearButtonLabel || ''}
-            onMouseDown={onMouseDown}
-            onClick={(e) => {
-              if (ref) {
-                ref.focus();
-              }
-              if (onClear) {
-                if (e.target instanceof HTMLButtonElement) {
-                  const { target } = e;
-                  target.name = name;
-                }
-                onClear(e);
-                this.setState({ persistClearButton: false });
-              }
-            }}
-            className={clearButtonClassNames.join(' ')}
-          />
-        )}
-      </div>
-    ) : (
-      renderedInput
-    );
+    return clearable ? /*#__PURE__*/_jsxs("div", {
+      className: containerClassNames.join(' '),
+      children: [renderedInput, value.length > 0 && /*#__PURE__*/_jsx(BpkClearButton, {
+        tabIndex: -1,
+        label: clearButtonLabel || '',
+        onMouseDown: onMouseDown,
+        onClick: e => {
+          if (ref) {
+            ref.focus();
+          }
+          if (onClear) {
+            if (e.target instanceof HTMLButtonElement) {
+              const {
+                target
+              } = e;
+              target.name = name;
+            }
+            onClear(e);
+            this.setState({
+              persistClearButton: false
+            });
+          }
+        },
+        className: clearButtonClassNames.join(' ')
+      })]
+    }) : renderedInput;
   }
 }
-
-export default BpkInput;
+export default BpkInput;

package/bpk-component-input/src/{common-types.ts → common-types.js}

@@ -17,102 +17,42 @@
  */
 
 import PropTypes from 'prop-types';
-import type { ComponentProps, SyntheticEvent } from 'react';
-
 export const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
-  always: 'always',
-} as const;
-
+  always: 'always'
+};
 export const INPUT_TYPES = {
   text: 'text',
   email: 'email',
   number: 'number',
   password: 'password',
-  tel: 'tel',
-} as const;
-
-type BaseProps = ComponentProps<'input'> & {
-  id: string;
-  name: string;
-  value: string;
-  type?: (typeof INPUT_TYPES)[keyof typeof INPUT_TYPES];
-  valid?: boolean | null;
-  large?: boolean;
-  docked?: boolean;
-  dockedFirst?: boolean;
-  dockedMiddle?: boolean;
-  dockedLast?: boolean;
-  inputRef?: ((ref: HTMLInputElement) => void) | null;
-};
-
-export type PropsWithoutClearButonMode = BaseProps & {
-  clearButtonMode?: 'never';
-  clearButtonLabel?: string | null;
-  onClear?: ((e?: SyntheticEvent<HTMLButtonElement>) => void) | null;
-};
-
-export type PropsWithClearButtonMode = BaseProps & {
-  clearButtonMode: (typeof CLEAR_BUTTON_MODES)[keyof Omit<
-    typeof CLEAR_BUTTON_MODES,
-    'never'
-  >];
-  clearButtonLabel: string;
-  onClear: (e?: SyntheticEvent<HTMLButtonElement>) => void;
+  tel: 'tel'
 };
-
-export type Props = PropsWithoutClearButonMode | PropsWithClearButtonMode;
-
 // TODO - this function should be removed once all input examples have been migrated to TS
-export const clearablePropType = (
-  props: any,
-  propName: string,
-  componentName: string,
-) => {
-  const createError = (message: string) =>
-    new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
-    );
-
+export const clearablePropType = (props, propName, componentName) => {
+  const createError = message => new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`);
   const propBeingChecked = props[propName];
-  if (
-    props.clearButtonMode &&
-    props.clearButtonMode !== CLEAR_BUTTON_MODES.never
-  ) {
+  if (props.clearButtonMode && props.clearButtonMode !== CLEAR_BUTTON_MODES.never) {
     if (!propBeingChecked) {
-      return createError(
-        `When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`,
-      );
+      return createError(`When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`);
     }
-
     switch (propName) {
       case 'clearButtonLabel':
-        return typeof propBeingChecked === 'string'
-          ? null
-          : createError(`\`clearButtonLabel\` must be a string`);
+        return typeof propBeingChecked === 'string' ? null : createError(`\`clearButtonLabel\` must be a string`);
       case 'onClear':
-        return typeof propBeingChecked === 'function'
-          ? null
-          : createError(`\`onClear\` must be a function`);
+        return typeof propBeingChecked === 'function' ? null : createError(`\`onClear\` must be a function`);
       default:
         return null;
     }
   }
   return null;
 };
-
 export const propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  type: PropTypes.oneOf([
-    INPUT_TYPES.text,
-    INPUT_TYPES.email,
-    INPUT_TYPES.number,
-    INPUT_TYPES.password,
-    INPUT_TYPES.tel,
-  ]),
+  type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.email, INPUT_TYPES.number, INPUT_TYPES.password, INPUT_TYPES.tel]),
   className: PropTypes.string,
   valid: PropTypes.bool,
   large: PropTypes.bool,
@@ -123,9 +63,8 @@ export const propTypes = {
   inputRef: PropTypes.func,
   clearButtonMode: PropTypes.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
   clearButtonLabel: clearablePropType,
-  onClear: clearablePropType,
+  onClear: clearablePropType
 };
-
 export const defaultProps = {
   type: INPUT_TYPES.text,
   valid: null,
@@ -137,5 +76,5 @@ export const defaultProps = {
   inputRef: null,
   clearButtonMode: CLEAR_BUTTON_MODES.never,
   clearButtonLabel: null,
-  onClear: null,
-};
+  onClear: null
+};

package/{bpk-component-map/src/BpkMap.module.scss → bpk-component-input/src/themeAttributes.js}

@@ -16,6 +16,4 @@
  * limitations under the License.
  */
 
-.bpk-map {
-  height: 100%;
-}
+export default ['inputInvalidBorderColor'];

package/bpk-component-input/src/{withOpenEvents.tsx → withOpenEvents.js}

@@ -17,77 +17,36 @@
  */
 
 import { Component } from 'react';
-import type {
-  ComponentType,
-  ReactElement,
-  UIEvent,
-  ComponentProps,
-} from 'react';
-
-import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
-
-import STYLES from './BpkInput.module.scss';
-
+import { cssModules, wrapDisplayName } from "../../bpk-react-utils";
+import STYLES from "./BpkInput.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
 const KEYCODES = {
   ENTER: 13,
-  SPACEBAR: 32,
-} as const;
-
-type WithOpenEventsProps = {
-  isOpen?: boolean;
-  onOpen?: () => void;
-  hasTouchSupport?: boolean;
+  SPACEBAR: 32
 };
-
-type EventHandlers = {
-  onClick?: (event: UIEvent) => void;
-  onFocus?: (event: UIEvent) => void;
-  onBlur?: (event: UIEvent) => void;
-  onTouchEnd?: (event: UIEvent) => void;
-  onKeyDown?: (event: UIEvent) => void;
-  onKeyUp?: (event: UIEvent) => void;
-  readOnly?: string;
-  'aria-readonly'?: boolean;
-};
-
-type InputProps = ComponentProps<'input'> &
-  Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
-
-const handleKeyEvent =
-  (keyCode: number, callback?: () => void) => (e: UIEvent) => {
-    if (e instanceof KeyboardEvent && e.keyCode === keyCode) {
-      e.preventDefault();
-      if (callback) {
-        callback();
-      }
-    }
-  };
-
-const withEventHandler =
-  (fn?: (e: UIEvent) => void, eventHandler?: (e: UIEvent) => void) =>
-  (e: UIEvent) => {
-    if (fn) {
-      fn(e);
+const handleKeyEvent = (keyCode, callback) => e => {
+  if (e instanceof KeyboardEvent && e.keyCode === keyCode) {
+    e.preventDefault();
+    if (callback) {
+      callback();
     }
-    if (eventHandler) {
-      eventHandler(e);
-    }
-  };
-
-const withOpenEvents = <P extends object>(InputComponent: ComponentType<P>) => {
-  class WithOpenEvents extends Component<P & InputProps & WithOpenEventsProps> {
-    public static displayName: string;
-
-    focusCanOpen: boolean;
-
+  }
+};
+const withEventHandler = (fn, eventHandler) => e => {
+  if (fn) {
+    fn(e);
+  }
+  if (eventHandler) {
+    eventHandler(e);
+  }
+};
+const withOpenEvents = InputComponent => {
+  class WithOpenEvents extends Component {
     static defaultProps = {
       // Custom props
       isOpen: false,
-      hasTouchSupport: !!(
-        typeof window !== 'undefined' && 'ontouchstart' in window
-      ),
+      hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
       onOpen: null,
       // Input props
       onClick: null,
@@ -95,16 +54,13 @@ const withOpenEvents = <P extends object>(InputComponent: ComponentType<P>) => {
       onBlur: null,
       onTouchEnd: null,
       onKeyDown: null,
-      onKeyUp: null,
+      onKeyUp: null
     };
-
-    constructor(props: P & WithOpenEventsProps & InputProps) {
+    constructor(props) {
       super(props);
-
       this.focusCanOpen = true;
     }
-
-    handleTouchEnd = (event: UIEvent) => {
+    handleTouchEnd = event => {
       // preventDefault fixes an issue on Android and iOS in which the popover closes immediately
       // because a touch event is registered on one of the dates.
       // We can only run preventDefault when the input is already focused - otherwise it would never set
@@ -117,13 +73,11 @@ const withOpenEvents = <P extends object>(InputComponent: ComponentType<P>) => {
         }
       }
     };
-
     handleFocus = () => {
       if (this.focusCanOpen && this.props.onOpen) {
         this.props.onOpen();
       }
     };
-
     handleBlur = () => {
       // If the input loses focus when the target is open, it should not open on a subsequent focus.
       // Fixes an issue with IE9.
@@ -133,8 +87,7 @@ const withOpenEvents = <P extends object>(InputComponent: ComponentType<P>) => {
         this.focusCanOpen = true;
       }
     };
-
-    render(): ReactElement {
+    render() {
       const {
         className,
         hasTouchSupport,
@@ -148,56 +101,34 @@ const withOpenEvents = <P extends object>(InputComponent: ComponentType<P>) => {
         onTouchEnd,
         ...rest
       } = this.props;
-
       const classNames = [getClassName('bpk-input--with-open-events')];
       if (className) {
         classNames.push(className);
       }
-
-      const eventHandlers: EventHandlers = {
+      const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
-        onKeyDown: withEventHandler(
-          handleKeyEvent(KEYCODES.ENTER, onOpen),
-          onKeyDown,
-        ),
-        onKeyUp: withEventHandler(
-          handleKeyEvent(KEYCODES.SPACEBAR, onOpen),
-          onKeyUp,
-        ),
+        onKeyDown: withEventHandler(handleKeyEvent(KEYCODES.ENTER, onOpen), onKeyDown),
+        onKeyUp: withEventHandler(handleKeyEvent(KEYCODES.SPACEBAR, onOpen), onKeyUp)
       };
-
       if (hasTouchSupport) {
         // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
         eventHandlers.readOnly = 'readOnly';
         eventHandlers['aria-readonly'] = false;
-
-        eventHandlers.onTouchEnd = withEventHandler(
-          this.handleTouchEnd,
-          onTouchEnd,
-        );
+        eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
       }
 
       // Needed on desktop to allow the intended behaviour of opening on focus
       // Needed on mobile as some Android devices do not trigger onClick or onTouch when TalkBack is active but do trigger onFocus
       eventHandlers.onFocus = withEventHandler(this.handleFocus, onFocus);
       eventHandlers.onBlur = withEventHandler(this.handleBlur, onBlur);
-
-      return (
-        <InputComponent
-          className={classNames.join(' ')}
-          {...eventHandlers}
-          {...(rest as P)}
-        />
-      );
+      return /*#__PURE__*/_jsx(InputComponent, {
+        className: classNames.join(' '),
+        ...eventHandlers,
+        ...rest
+      });
     }
   }
-
-  WithOpenEvents.displayName = wrapDisplayName(
-    InputComponent,
-    'withOpenEvents',
-  );
-
+  WithOpenEvents.displayName = wrapDisplayName(InputComponent, 'withOpenEvents');
   return WithOpenEvents;
 };
-
-export default withOpenEvents;
+export default withOpenEvents;

package/bpk-component-label/index.js

@@ -14,11 +14,5 @@
  * 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 BpkLabel, { type Props } from './src/BpkLabel';
-
-export type BpkLabelProps = Props;
-
-export default BpkLabel;
+ */import BpkLabel from "./src/BpkLabel";
+export default BpkLabel;

package/bpk-component-label/src/BpkLabel.js

@@ -14,67 +14,50 @@
  * 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 type { Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkLabel.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkLabel.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-export type Props = {
-  children: Node,
-  className: ?string,
-  disabled: boolean,
-  valid: ?boolean,
-  required: boolean,
-  white: boolean,
-};
-
-const BpkLabel = (props: Props) => {
-  const { children, className, disabled, required, valid, white, ...rest } =
-    props;
-  const invalid = valid === false;
-
-  const classNames = getClassName(
-    'bpk-label',
-    white && 'bpk-label--white',
-    invalid && 'bpk-label--invalid',
-    disabled && 'bpk-label--disabled',
-    white && disabled && 'bpk-label--disabled--white',
+const BpkLabel = props => {
+  const {
+    children,
     className,
-  );
-
+    disabled,
+    required,
+    valid,
+    white,
+    ...rest
+  } = props;
+  const invalid = valid === false;
+  const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <label className={classNames} {...rest}>
-      {children}
-      {!disabled && required && (
-        <span className={getClassName('bpk-label__asterisk')}>*</span>
-      )}
-    </label>
+    _jsxs("label", {
+      className: classNames,
+      ...rest,
+      children: [children, !disabled && required && /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-label__asterisk'),
+        children: "*"
+      })]
+    })
   );
 };
-
 BpkLabel.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   valid: PropTypes.bool,
   required: PropTypes.bool,
-  white: PropTypes.bool,
+  white: PropTypes.bool
 };
-
 BpkLabel.defaultProps = {
   className: null,
   disabled: false,
   valid: null,
   required: false,
-  white: false,
+  white: false
 };
-
-export default BpkLabel;
+export default BpkLabel;

package/bpk-component-link/index.js

@@ -14,15 +14,8 @@
  * 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 BpkLink from './src/BpkLink';
-import BpkButtonLink from './src/BpkButtonLink';
-import themeAttributes, {
-  linkAlternateThemeAttributes,
-} from './src/themeAttributes';
-
+ */import BpkLink from "./src/BpkLink";
+import BpkButtonLink from "./src/BpkButtonLink";
+import themeAttributes, { linkAlternateThemeAttributes } from "./src/themeAttributes";
 export default BpkLink;
-export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };
+export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };