@skyscanner/backpack-web 34.16.0 → 35.0.0-premajor.1

package/bpk-component-nudger/src/BpkNudger.js

@@ -16,30 +16,63 @@
  * limitations under the License.
  */
 
+import { useRef } from 'react';
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { withButtonAlignment } from "../../bpk-component-icon";
+import MinusIcon from "../../bpk-component-icon/sm/minus";
+import PlusIcon from "../../bpk-component-icon/sm/plus";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
-import BpkConfigurableNudger from "./BpkConfigurableNudger";
+import { cssModules, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;
-const incrementValue = currentValue => currentValue + 1;
-const decrementValue = currentValue => currentValue - 1;
-const formatValue = currentValue => currentValue.toString();
 const BpkNudger = ({
   buttonType = 'secondary',
   className = null,
+  decreaseButtonLabel,
   icon,
   id,
+  increaseButtonLabel,
+  inputClassName,
+  max,
+  min,
+  name,
+  onValueChange,
+  step = 1,
   subtitle,
   title,
+  value,
   ...rest
 }) => {
-  const classNames = getClassName(title && 'bpk-nudger__container');
+  // Ensure that the minimum value is 0 or greater it's not designed to handle negative values.
+  const minimum = min < 0 ? 0 : min;
+  const containerClassNames = getClassName(title && 'bpk-nudger__container');
+  const inputClassNames = getClassName('bpk-nudger__input', 'bpk-nudger__input--numeric', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
+  const nudgerClassNames = getClassName('bpk-nudger', className);
+  const maxButtonDisabled = compareValues(value, max) >= 0;
+  const minButtonDisabled = compareValues(value, minimum) <= 0;
+  const AlignedMinusIcon = withButtonAlignment(MinusIcon);
+  const AlignedPlusIcon = withButtonAlignment(PlusIcon);
+  const inputRef = useRef(null);
+  const incrementValue = currentValue => currentValue + step;
+  const decrementValue = currentValue => currentValue - step;
+  const valueLimitter = element => {
+    if (element.valueAsNumber < minimum) {
+      onValueChange(minimum);
+      setNativeValue(element, minimum, false);
+    } else if (element.valueAsNumber > max) {
+      onValueChange(max);
+      setNativeValue(element, max, false);
+    }
+    if (element.valueAsNumber >= minimum && element.valueAsNumber <= max) {
+      onValueChange(element.valueAsNumber);
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
+    className: containerClassNames,
     children: [title && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-nudger__label'),
       children: [/*#__PURE__*/_jsx(BpkLabel, {
@@ -60,19 +93,68 @@ const BpkNudger = ({
           })
         })]
       })]
-    }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {
-      inputClassName: getClassName('bpk-nudger__input--numeric'),
-      compareValues: compareValues,
-      incrementValue: incrementValue,
-      decrementValue: decrementValue,
-      formatValue: formatValue
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: className,
-      buttonType: buttonType,
-      id: id,
-      ...rest
+    }), /*#__PURE__*/_jsxs("div", {
+      className: nudgerClassNames,
+      children: [/*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(minimum);
+            inputRef.current && setNativeValue(inputRef.current, minimum);
+            return;
+          }
+          const newValue = decrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: minButtonDisabled,
+        title: decreaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        "aria-live": "polite",
+        defaultValue: value,
+        id: id,
+        ref: inputRef,
+        name: name || id,
+        step: step,
+        onInput: event => {
+          const inputElement = event.target;
+          if (!inputElement.validity.valid &&
+          // allow the removal of a value
+          Number.isNaN(inputElement.valueAsNumber)) {
+            // set prev value if entry invalid
+            onValueChange(value);
+            setNativeValue(inputElement, value, false);
+          }
+          valueLimitter(inputElement);
+        },
+        className: inputClassNames,
+        ...rest
+      }), /*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(max);
+            inputRef.current && setNativeValue(inputRef.current, max);
+            return;
+          }
+          const newValue = incrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: maxButtonDisabled,
+        title: increaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
+      })]
     })]
   });
 };

package/bpk-component-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}
+html[dir=rtl] .bpk-nudger{display:flex}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input::-webkit-outer-spin-button,.bpk-nudger__input::-webkit-inner-spin-button{margin:0;appearance:none}.bpk-nudger__input[type=number]{appearance:textfield}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}

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

@@ -5,11 +5,12 @@ export declare const BUTTON_TYPES: {
 };
 export type CommonProps = {
     id: string;
-    min: string | number;
-    max: string | number;
-    value: string | number;
-    onChange: (arg0: any) => void | null;
-    name?: string | null;
+    min: number;
+    max: number;
+    value: number;
+    onValueChange: (arg0: number) => void;
+    name?: string | undefined;
+    step?: number;
     className?: string | null;
     /**
      * This is the label that will be read out when screen reader users tab to the increase button. Make sure you use a descriptive label.
@@ -18,6 +19,7 @@ export type CommonProps = {
      * Function that handle the incrementing of the current selected value.
      */
     increaseButtonLabel: string;
+    inputClassName?: string | undefined;
     /**
      * This is the label that will be read out when screen reader users tab to the decrease button. Make sure you use a descriptive label
      */

package/bpk-component-slider/src/BpkSlider.d.ts

@@ -8,7 +8,10 @@ export type Props = {
     value: number[] | number;
     ariaLabel: string[];
     ariaValuetext?: string[];
+    inputProps?: [{
+        [key: string]: any;
+    }];
     [rest: string]: any;
 };
-declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => JSX.Element;
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, inputProps, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => JSX.Element;
 export default BpkSlider;

package/bpk-component-slider/src/BpkSlider.js

@@ -15,15 +15,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { forwardRef, useRef, useEffect } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { usePrevious } from '@radix-ui/react-use-previous';
+import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSlider = ({
   ariaLabel,
   ariaValuetext,
+  inputProps,
   max,
   min,
   minDistance,
@@ -67,8 +70,53 @@ const BpkSlider = ({
       "aria-label": ariaLabel[index],
       "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
       className: getClassName('bpk-slider__thumb'),
-      "aria-valuenow": currentValue[index]
+      "aria-valuenow": currentValue[index],
+      asChild: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(BubbleInput, {
+          value: currentValue[index],
+          ...(inputProps && inputProps[index])
+        })
+      })
     }, ariaLabel[index]))]
   });
 };
+
+// Work around until radix-ui/react-slider is updated to accept an inputRef prop https://github.com/radix-ui/primitives/pull/3033
+const BubbleInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    ...inputProps
+  } = props;
+  const ref = useRef();
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const prevValue = usePrevious(value);
+
+  // Bubble value change to parents (e.g form change event)
+  useEffect(() => {
+    const input = ref.current;
+    if (prevValue !== value) {
+      setNativeValue(input, `${value}`);
+    }
+  }, [prevValue, value]);
+
+  /**
+   * We purposefully do not use `type="hidden"` here otherwise forms that
+   * wrap it will not be able to access its value via the FormData API.
+   *
+   * We purposefully do not add the `value` attribute here to allow the value
+   * to be set programatically and bubble to any parent form `onChange` event.
+   * Adding the `value` will cause React to consider the programatic
+   * dispatch a duplicate and it will get swallowed.
+   */
+  return /*#__PURE__*/_jsx("input", {
+    style: {
+      display: 'none'
+    },
+    ...inputProps,
+    ref: composedRefs,
+    type: "number",
+    defaultValue: value
+  });
+});
 export default BpkSlider;

package/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts

@@ -1,18 +1,8 @@
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-};
-declare const BpkExtraLargeSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    [rest: string]: any;
 };
+declare const BpkExtraLargeSpinner: ({ className, type, ...rest }: Props) => JSX.Element;
 export default BpkExtraLargeSpinner;

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var XlSpinner = function XlSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -81,12 +79,11 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkExtraLargeSpinner = props => {
-  const {
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkExtraLargeSpinner = ({
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -95,12 +92,4 @@ const BpkExtraLargeSpinner = props => {
     })
   });
 };
-BpkExtraLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string
-};
-BpkExtraLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null
-};
 export default BpkExtraLargeSpinner;

package/bpk-component-spinner/src/BpkLargeSpinner.d.ts

@@ -1,21 +1,9 @@
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-    alignToButton: boolean;
-};
-declare const BpkLargeSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        alignToButton: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-        alignToButton: boolean;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    alignToButton?: boolean;
+    [rest: string]: any;
 };
+declare const BpkLargeSpinner: ({ alignToButton, className, type, ...rest }: Props) => JSX.Element;
 export default BpkLargeSpinner;

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var LgSpinner = function LgSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -81,13 +79,12 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLargeSpinner = props => {
-  const {
-    alignToButton,
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkLargeSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -96,14 +93,4 @@ const BpkLargeSpinner = props => {
     })
   });
 };
-BpkLargeSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool
-};
-BpkLargeSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false
-};
 export default BpkLargeSpinner;

package/bpk-component-spinner/src/BpkSpinner.d.ts

@@ -1,21 +1,9 @@
-import PropTypes from 'prop-types';
 import type { SpinnerTypes } from './spinnerTypes';
 type Props = {
-    type: SpinnerTypes;
-    className?: string;
-    alignToButton: boolean;
-};
-declare const BpkSpinner: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        type: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        alignToButton: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        type: "dark";
-        className: null;
-        alignToButton: boolean;
-    };
+    type?: SpinnerTypes;
+    className?: string | null;
+    alignToButton?: boolean;
+    [rest: string]: any;
 };
+declare const BpkSpinner: ({ alignToButton, className, type, ...rest }: Props) => JSX.Element;
 export default BpkSpinner;

package/bpk-component-spinner/src/BpkSpinner.js

@@ -16,8 +16,6 @@ import React from "react";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import PropTypes from 'prop-types';
 var SmSpinner = function SmSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
@@ -68,13 +66,12 @@ import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSpinner = props => {
-  const {
-    alignToButton,
-    className,
-    type,
-    ...rest
-  } = props;
+const BpkSpinner = ({
+  alignToButton = false,
+  className = null,
+  type = SPINNER_TYPES.dark,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
   return /*#__PURE__*/_jsx("span", {
     className: classNames,
@@ -83,14 +80,4 @@ const BpkSpinner = props => {
     })
   });
 };
-BpkSpinner.propTypes = {
-  type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
-  alignToButton: PropTypes.bool
-};
-BpkSpinner.defaultProps = {
-  type: SPINNER_TYPES.dark,
-  className: null,
-  alignToButton: false
-};
 export default BpkSpinner;

package/bpk-component-split-input/src/BpkInputField.d.ts

@@ -0,0 +1,21 @@
+import { PureComponent } from 'react';
+export type Props = DefaultProps;
+type DefaultProps = {
+    id: string;
+    label: string;
+    value: string | number;
+    focus: boolean;
+    index: number;
+    name: string;
+    [key: string]: any;
+};
+declare class BpkInputField extends PureComponent<Props> {
+    static defaultProps: {
+        value: string;
+        name: string;
+    };
+    componentDidUpdate(prevProps: Props): void;
+    private input;
+    render(): JSX.Element;
+}
+export default BpkInputField;

package/bpk-component-split-input/src/BpkInputField.js

@@ -14,14 +14,19 @@
  * 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 PropTypes from 'prop-types';
-import { Component } from 'react';
+ */
+
+import { PureComponent } from 'react';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-class BpkInputField extends Component {
+class BpkInputField extends PureComponent {
+  static defaultProps = {
+    value: '',
+    name: ''
+  };
   componentDidUpdate(prevProps) {
     const {
       focus
@@ -31,6 +36,7 @@ class BpkInputField extends Component {
       this.input.select();
     }
   }
+  input = null;
   render() {
     const {
       focus,
@@ -46,27 +52,16 @@ class BpkInputField extends Component {
       children: /*#__PURE__*/_jsx(BpkInput, {
         id: id,
         autoComplete: "off",
-        maxLength: "1",
+        name: name,
+        maxLength: 1,
         "aria-label": `${label} ${index}`,
         inputRef: input => {
           this.input = input;
         },
-        value: value || '',
-        name: name || '',
+        value: value,
         ...rest
       })
     }, index);
   }
 }
-BpkInputField.propTypes = {
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string,
-  focus: PropTypes.bool.isRequired,
-  index: PropTypes.number.isRequired,
-  name: PropTypes.string
-};
-BpkInputField.defaultProps = {
-  value: ''
-};
 export default BpkInputField;

package/bpk-component-split-input/src/BpkSplitInput.d.ts

@@ -0,0 +1,44 @@
+import { Component } from 'react';
+import type { ChangeEvent, ClipboardEvent, FocusEvent, KeyboardEvent } from 'react';
+import { INPUT_TYPES } from '../../bpk-component-input';
+interface Props {
+    type?: string | number;
+    id: string;
+    label: string;
+    name: string;
+    inputLength?: number;
+    placeholder?: string;
+    onInputChange: (value: string | number) => void;
+    onSubmit: (value: string | number) => void;
+    large?: boolean;
+}
+interface State {
+    focusedInput: number;
+    inputValue: string[] | number[];
+}
+declare class BpkSplitInput extends Component<Props, State> {
+    static defaultProps: {
+        type: "number";
+        inputLength: number;
+        large: boolean;
+        placeholder: string;
+    };
+    constructor(props: Props);
+    onInputChange: (input: string[] | number[]) => void;
+    updateInputValue: (value: string | number) => void;
+    handleSubmit: () => void;
+    validateInput: (inputValue: string[] | number[]) => boolean;
+    isNumeric: () => boolean;
+    isInputValid: (value: string | number) => boolean;
+    focusInput: (inputIndex: number) => void;
+    focusNextInput: () => void;
+    focusPreviousInput: () => void;
+    handleOnPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+    handleOnKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleOnChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleOnFocus: (e: FocusEvent<HTMLInputElement>, index: number) => void;
+    renderInputs: () => JSX.Element[];
+    render(): JSX.Element;
+}
+export default BpkSplitInput;
+export { INPUT_TYPES };