@skyscanner/backpack-web 25.1.0 → 25.3.0

package/bpk-component-input/src/common-types.d.ts

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import type PropTypes from 'prop-types';
-import type { SyntheticEvent } from 'react';
+import PropTypes from 'prop-types';
+import type { ComponentProps, SyntheticEvent } from 'react';
 export declare const CLEAR_BUTTON_MODES: {
     readonly never: "never";
     readonly whileEditing: "whileEditing";
@@ -30,12 +30,11 @@ export declare const INPUT_TYPES: {
     readonly password: "password";
     readonly tel: "tel";
 };
-type BaseProps = {
+type BaseProps = ComponentProps<'input'> & {
     id: string;
     name: string;
     value: string;
     type?: typeof INPUT_TYPES[keyof typeof INPUT_TYPES];
-    className?: string | null;
     valid?: boolean | null;
     large?: boolean;
     docked?: boolean;
@@ -43,7 +42,6 @@ type BaseProps = {
     dockedMiddle?: boolean;
     dockedLast?: boolean;
     inputRef?: ((ref: HTMLInputElement) => void) | null;
-    [rest: string]: any;
 };
 export type PropsWithoutClearButonMode = BaseProps & {
     clearButtonMode?: 'never';
@@ -76,7 +74,6 @@ export declare const propTypes: {
 };
 export declare const defaultProps: {
     type: "text";
-    className: null;
     valid: null;
     large: boolean;
     docked: boolean;

package/bpk-component-input/src/common-types.js

@@ -78,7 +78,6 @@ const propTypes = {
 exports.propTypes = propTypes;
 const defaultProps = {
   type: INPUT_TYPES.text,
-  className: null,
   valid: null,
   large: false,
   docked: false,

package/bpk-component-input/src/withOpenEvents.d.ts

@@ -16,106 +16,65 @@
  * limitations under the License.
  */
 
-import type { ComponentType, ReactElement, UIEvent } from 'react';
-
+import type { ComponentType, ReactElement, UIEvent, ComponentProps } from 'react';
 type WithOpenEventsProps = {
-  isOpen?: boolean;
-  onOpen?: () => void;
-  hasTouchSupport?: boolean;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    hasTouchSupport?: boolean;
 };
-type InputProps = {
-  className?: string | null;
-  onClick?: (event: UIEvent) => void;
-  onFocus?: (event: UIEvent) => void;
-  onBlur?: (event: UIEvent) => void;
-  onTouchEnd?: (event: UIEvent) => void;
-  onKeyDown?: (event: UIEvent) => void;
-  onKeyUp?: (event: UIEvent) => void;
+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;
 };
-declare const withOpenEvents: <P extends InputProps>(
-  InputComponent: ComponentType<P>,
-) => {
-  new (props: P & WithOpenEventsProps): {
-    focusCanOpen: boolean;
-    handleTouchEnd: (event: UIEvent) => void;
-    handleFocus: () => void;
-    handleBlur: () => void;
-    render(): ReactElement;
-    context: any;
-    setState<K extends never>(
-      state:
-        | {}
-        | ((
-            prevState: Readonly<{}>,
-            props: Readonly<P & WithOpenEventsProps>, // eslint-disable-line no-shadow
-          ) => {} | Pick<{}, K> | null)
-        | Pick<{}, K>
-        | null,
-      callback?: (() => void) | undefined,
-    ): void;
-    forceUpdate(callback?: (() => void) | undefined): void;
-    readonly props: Readonly<P & WithOpenEventsProps> &
-      Readonly<{
-        children?: import('react').ReactNode;
-      }>;
-    state: Readonly<{}>;
-    refs: {
-      [key: string]: import('react').ReactInstance;
+type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
+declare const withOpenEvents: <P extends object>(InputComponent: ComponentType<P>) => {
+    new (props: P & WithOpenEventsProps & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly">): {
+        focusCanOpen: boolean;
+        handleTouchEnd: (event: UIEvent) => void;
+        handleFocus: () => void;
+        handleBlur: () => void;
+        render(): ReactElement;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    defaultProps: {
+        isOpen: boolean;
+        hasTouchSupport: boolean;
+        onOpen: null;
+        onClick: null;
+        onFocus: null;
+        onBlur: null;
+        onTouchEnd: null;
+        onKeyDown: null;
+        onKeyUp: null;
     };
-    componentDidMount?(): void;
-    shouldComponentUpdate?(
-      nextProps: Readonly<P & WithOpenEventsProps>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): boolean;
-    componentWillUnmount?(): void;
-    componentDidCatch?(
-      error: Error,
-      errorInfo: import('react').ErrorInfo,
-    ): void;
-    getSnapshotBeforeUpdate?(
-      prevProps: Readonly<P & WithOpenEventsProps>,
-      prevState: Readonly<{}>,
-    ): any;
-    componentDidUpdate?(
-      prevProps: Readonly<P & WithOpenEventsProps>,
-      prevState: Readonly<{}>,
-      snapshot?: any,
-    ): void;
-    componentWillMount?(): void;
-    UNSAFE_componentWillMount?(): void;
-    componentWillReceiveProps?(
-      nextProps: Readonly<P & WithOpenEventsProps>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillReceiveProps?(
-      nextProps: Readonly<P & WithOpenEventsProps>,
-      nextContext: any,
-    ): void;
-    componentWillUpdate?(
-      nextProps: Readonly<P & WithOpenEventsProps>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-    UNSAFE_componentWillUpdate?(
-      nextProps: Readonly<P & WithOpenEventsProps>,
-      nextState: Readonly<{}>,
-      nextContext: any,
-    ): void;
-  };
-  displayName: string;
-  defaultProps: {
-    isOpen: boolean;
-    hasTouchSupport: boolean;
-    onOpen: null;
-    className: null;
-    onClick: null;
-    onFocus: null;
-    onBlur: null;
-    onTouchEnd: null;
-    onKeyDown: null;
-    onKeyUp: null;
-  };
-  contextType?: import('react').Context<any> | undefined;
+    contextType?: import("react").Context<any> | undefined;
 };
 export default withOpenEvents;

package/bpk-component-input/src/withOpenEvents.js

@@ -135,7 +135,6 @@ const withOpenEvents = InputComponent => {
     hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
     onOpen: null,
     // Input props
-    className: null,
     onClick: null,
     onFocus: null,
     onBlur: null,

package/bpk-component-modal/src/BpkModal.js

@@ -9,7 +9,7 @@ var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkModalModule = _interopRequireDefault(require("./BpkModal.module.css"));
 var _BpkModalInner = _interopRequireDefault(require("./BpkModalInner"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["title", "onClose", "className", "contentClassName", "closeLabel", "closeText", "wide", "showHeader", "fullScreenOnMobile", "fullScreen", "padded", "accessoryView", "renderTarget", "isIphone", "closeOnScrimClick", "closeOnEscPressed", "dialogRef", "isOpen"];
+const _excluded = ["accessoryView", "className", "closeLabel", "closeOnEscPressed", "closeOnScrimClick", "closeText", "contentClassName", "dialogRef", "fullScreen", "fullScreenOnMobile", "isIphone", "isOpen", "onClose", "padded", "renderTarget", "showHeader", "title", "wide"];
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -39,24 +39,24 @@ const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalModule.default);
 const ScrimBpkModalInner = (0, _bpkScrimUtils.withScrim)(_BpkModalInner.default);
 const BpkModal = _ref => {
   let {
-      title = null,
-      onClose = () => null,
+      accessoryView = null,
       className = null,
-      contentClassName = null,
       closeLabel = '',
+      closeOnEscPressed = true,
+      closeOnScrimClick = true,
       closeText = null,
-      wide = false,
-      showHeader = true,
-      fullScreenOnMobile = true,
+      contentClassName = null,
+      dialogRef = () => null,
       fullScreen = false,
+      fullScreenOnMobile = true,
+      isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
+      isOpen,
+      onClose = () => null,
       padded = true,
-      accessoryView = null,
       renderTarget = null,
-      isIphone = (0, _bpkReactUtils.isDeviceIphone)(),
-      closeOnScrimClick = true,
-      closeOnEscPressed = true,
-      dialogRef = () => null,
-      isOpen
+      showHeader = true,
+      title = null,
+      wide = false
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const containerClass = [getClassName('bpk-modal__container')];

package/bpk-component-modal/src/BpkModalInner.js

@@ -37,22 +37,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const getClassName = (0, _bpkReactUtils.cssModules)(_BpkModalInnerModule.default);
 const BpkModalInner = ({
-  isIphone,
-  id,
-  dialogRef,
+  accessoryView = null,
   children,
-  title = null,
-  onClose = () => null,
   className = null,
-  contentClassName = null,
   closeLabel = '',
   closeText = null,
-  wide = false,
-  showHeader = true,
-  fullScreenOnMobile = true,
+  contentClassName = null,
+  dialogRef,
   fullScreen = false,
+  fullScreenOnMobile = true,
+  id,
+  isIphone,
+  onClose = () => null,
   padded = true,
-  accessoryView = null
+  showHeader = true,
+  title = null,
+  wide = false
 }) => {
   const classNames = [getClassName('bpk-modal')];
   const contentClassNames = [getClassName('bpk-modal__content')];

package/bpk-component-radio/src/BpkRadio.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-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.125rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.125rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-radio{position:relative;display:inline-block;padding-left:1.75rem}html[dir='rtl'] .bpk-radio{padding-right:1.75rem;padding-left:0}.bpk-radio--white{color:#fff}.bpk-radio--white input[type='radio']{background:#fff}.bpk-radio--disabled{color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-radio--disabled--white{color:rgba(255,255,255,0.5)}.bpk-radio--invalid input[type='radio']{border:3px solid #e70866;border-radius:1.5rem}.bpk-radio__input{position:absolute;top:0;left:0;width:1.25rem;height:1.25rem;margin:0;padding:0;cursor:pointer;vertical-align:text-bottom;appearance:none;border:3px solid #545860;border-radius:1.5rem}html[dir='rtl'] .bpk-radio__input{right:0;left:auto}@media screen\0 {.bpk-radio__input{background:none !important}}.bpk-radio__input:checked{border-color:#0062e3;border-color:var(--bpk-radio-checked-color, #0062e3)}.bpk-radio__input:checked:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{border-color:rgba(0,0,0,0.2)}.bpk-radio__input:disabled{cursor:inherit}.bpk-radio__input:checked+.bpk-radio__circle{display:block}.bpk-radio__input:checked:disabled+.bpk-radio__circle{display:block;background:rgba(0,0,0,0.2)}.bpk-radio__circle{position:absolute;top:0.375rem;left:0.375rem;display:none;width:.5rem;height:.5rem;border-radius:50%;background:#0062e3;background:var(--bpk-radio-checked-color, #0062e3)}html[dir='rtl'] .bpk-radio__circle{right:0.375rem;left:auto}

package/bpk-component-scrollable-calendar/index.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.
+ */
+
+import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
+import BpkScrollableCalendar from './src/BpkScrollableCalendar';
+import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';
+import BpkScrollableCalendarGrid from './src/BpkScrollableCalendarGrid';
+import BpkScrollableCalendarGridList from './src/BpkScrollableCalendarGridList';
+export default BpkScrollableCalendar;
+export { CALENDAR_SELECTION_TYPE, BpkScrollableCalendarDate, BpkScrollableCalendarGrid, BpkScrollableCalendarGridList, };