@skyscanner/backpack-web 40.1.1 → 40.2.0

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

@@ -9,7 +9,7 @@ import BpkButtonSecondary from './BpkButtonSecondary';
 import BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark';
 import BpkButton from './src/BpkButton';
 import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton';
-export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types';
+export { BUTTON_TYPES, SIZE_TYPES, type ButtonType, type SizeType, type Props, } from './src/BpkButtonV2/common-types';
 export { buttonThemeAttributes, primaryThemeAttributes, primaryOnDarkThemeAttributes, primaryOnLightThemeAttributes, secondaryThemeAttributes, secondaryOnDarkThemeAttributes, featuredThemeAttributes, destructiveThemeAttributes, } from './themeAttributes';
 export default BpkButton;
 export { BpkButtonPrimary, BpkButtonPrimaryOnDark, BpkButtonPrimaryOnLight, BpkButtonSecondary, BpkButtonSecondaryOnDark, BpkButtonDestructive, BpkButtonLink, BpkButtonLinkOnDark, BpkButtonFeatured, BpkButtonV2, };

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

@@ -0,0 +1,5 @@
+import BpkCheckbox, { type Props as BpkCheckboxProps } from './src/BpkCheckbox';
+import themeAttributes from './src/themeAttributes';
+export type { BpkCheckboxProps };
+export default BpkCheckbox;
+export { themeAttributes };

package/bpk-component-checkbox/index.js

@@ -14,7 +14,9 @@
  * 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 BpkCheckbox from "./src/BpkCheckbox";
+ */
+
+import BpkCheckbox from "./src/BpkCheckbox";
 import themeAttributes from "./src/themeAttributes";
 export default BpkCheckbox;
 export { themeAttributes };

package/bpk-component-checkbox/src/BpkCheckbox.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+type NativeInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type Props = Omit<NativeInputProps, 'type' | 'className'> & {
+    name: string;
+    label: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    white?: boolean;
+    className?: string | null;
+    smallLabel?: boolean;
+    valid?: boolean | null;
+    /**
+     * The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box.  This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.
+     */
+    indeterminate?: boolean;
+};
+declare const BpkCheckbox: ({ checked, className, disabled, indeterminate, label, name, required, smallLabel, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckbox.js

@@ -14,7 +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.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCheckbox.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -45,7 +46,7 @@ const BpkCheckbox = ({
       className: inputClasses,
       name: name,
       disabled: disabled,
-      "aria-label": label,
+      "aria-label": typeof label === 'string' ? label : undefined,
       "aria-invalid": isInvalid,
       "data-indeterminate": indeterminate,
       ref: e => {
@@ -65,16 +66,4 @@ const BpkCheckbox = ({
     })]
   });
 };
-BpkCheckbox.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
-  required: PropTypes.bool,
-  disabled: PropTypes.bool,
-  white: PropTypes.bool,
-  className: PropTypes.string,
-  smallLabel: PropTypes.bool,
-  valid: PropTypes.bool,
-  checked: PropTypes.bool,
-  indeterminate: PropTypes.bool
-};
 export default BpkCheckbox;

package/bpk-component-checkbox/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/bpk-component-checkbox/src/themeAttributes.js

@@ -14,4 +14,6 @@
  * 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.
- */export default ['checkboxCheckedColor'];
+ */
+
+export default ['checkboxCheckedColor'];

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

@@ -0,0 +1,5 @@
+import BpkFieldset, { type Props as BpkFieldsetProps } from './src/BpkFieldset';
+import themeAttributes from './src/themeAttributes';
+export type { BpkFieldsetProps };
+export { themeAttributes };
+export default BpkFieldset;

package/bpk-component-fieldset/index.js

@@ -14,7 +14,9 @@
  * 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 BpkFieldset, { propTypes, defaultProps } from "./src/BpkFieldset";
+ */
+
+import BpkFieldset from "./src/BpkFieldset";
 import themeAttributes from "./src/themeAttributes";
-export default BpkFieldset;
-export { propTypes, defaultProps, themeAttributes };
+export { themeAttributes };
+export default BpkFieldset;

package/bpk-component-fieldset/src/BpkFieldset.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+type BaseProps = {
+    children: ReactElement;
+    disabled?: boolean;
+    valid?: boolean | null;
+    required?: boolean;
+    className?: string | null;
+    validationMessage?: string | null;
+    validationProps?: Record<string, unknown>;
+    description?: string | null;
+    [rest: string]: any;
+};
+type CheckboxFieldsetProps = BaseProps & {
+    isCheckbox: true;
+    /**
+     * Optional when `isCheckbox` is true.
+     */
+    label?: string | null;
+};
+type NonCheckboxFieldsetProps = BaseProps & {
+    /**
+     * When `isCheckbox` is false or omitted, `label` is required.
+     */
+    isCheckbox?: false | undefined;
+    label: string;
+};
+export type Props = CheckboxFieldsetProps | NonCheckboxFieldsetProps;
+declare const BpkFieldset: ({ children, className, description, disabled, isCheckbox, label, required, valid, validationMessage, validationProps, ...rest }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default BpkFieldset;

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -14,9 +14,12 @@
  * 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 { cloneElement } from 'react';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
@@ -39,21 +42,16 @@ const BpkFieldset = ({
     return null;
   }
 
-  // $FlowIgnore[prop-missing] - As children could be any element and might not have a value which is safe
-  let childId = children.props.id;
-  if (
-  // Flow is being dumb here and doesn't let us do this check, even though it's perfectly safe!
-  // $FlowIgnore[prop-missing]
-  // $FlowIgnore[sketchy-null-mixed]
-  children.props.inputProps &&
-  // $FlowIgnore[sketchy-null-mixed]
-  children.props.inputProps.id && typeof children.props.inputProps.id === 'string') {
-    childId = children.props.inputProps.id;
+  // Get the child's id, checking both direct props and inputProps
+  const childProps = children.props;
+  let childId = childProps.id || '';
+  if (childProps.inputProps?.id && typeof childProps.inputProps.id === 'string') {
+    childId = childProps.inputProps.id;
   }
   const classNames = [getClassName('bpk-fieldset')];
   const validationMessageId = `${childId}_validation_message`;
   const descriptionId = `${childId}_description`;
-  const isValid = isCheckbox ? valid : children.props.valid;
+  const isValid = isCheckbox ? valid : childProps.valid;
 
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
@@ -75,75 +73,29 @@ const BpkFieldset = ({
   if (className) {
     classNames.push(className);
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("fieldset", {
-      className: classNames.join(' '),
-      ...rest,
-      children: [!isCheckbox && /*#__PURE__*/_jsx("div", {
-        className: getClassName('bpk-fieldset__label'),
-        children: /*#__PURE__*/_jsx(BpkLabel, {
-          htmlFor: childId,
-          required: required,
-          disabled: disabled,
-          valid: isValid,
-          children: label
-        })
-      }), clonedChildren, description && /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-fieldset__description'),
-        id: descriptionId,
-        children: description
-      }), !disabled && validationMessage &&
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx(BpkFormValidation, {
-        id: validationMessageId,
-        expanded: isInvalid,
-        isCheckbox: isCheckbox,
-        ...validationProps,
-        children: validationMessage
-      })]
-    })
-  );
-};
-const labelPropType = (props, propName) => {
-  const {
-    isCheckbox,
-    label
-  } = props;
-  if (!label && !isCheckbox) {
-    return new Error(`\`${propName}\` is required when \`isCheckbox\` is false.`);
-  }
-  return false;
-};
-export const propTypes = {
-  children: PropTypes.element.isRequired,
-  /**
-   * Required when `isCheckbox` is false.
-   */
-  label: labelPropType,
-  disabled: PropTypes.bool,
-  valid: PropTypes.bool,
-  required: PropTypes.bool,
-  className: PropTypes.string,
-  validationMessage: PropTypes.string,
-  isCheckbox: PropTypes.bool,
-  validationProps: PropTypes.object,
-  description: PropTypes.string
-};
-export const defaultProps = {
-  label: null,
-  disabled: false,
-  valid: null,
-  required: false,
-  className: null,
-  validationMessage: null,
-  isCheckbox: false,
-  validationProps: {},
-  description: null
-};
-BpkFieldset.propTypes = {
-  ...propTypes
+  return /*#__PURE__*/_jsxs("fieldset", {
+    className: classNames.join(' '),
+    ...rest,
+    children: [!isCheckbox && /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-fieldset__label'),
+      children: /*#__PURE__*/_jsx(BpkLabel, {
+        htmlFor: childId,
+        required: required,
+        disabled: disabled,
+        valid: isValid,
+        children: label
+      })
+    }), clonedChildren, description && /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-fieldset__description'),
+      id: descriptionId,
+      children: description
+    }), !disabled && validationMessage && /*#__PURE__*/_jsx(BpkFormValidation, {
+      id: validationMessageId,
+      expanded: isInvalid,
+      isCheckbox: isCheckbox,
+      ...validationProps,
+      children: validationMessage
+    })]
+  });
 };
 export default BpkFieldset;

package/bpk-component-fieldset/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/bpk-component-loading-button/src/BpkLoadingButton.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement, ReactNode } from 'react';
-import type { Props as ButtonProps } from '../../bpk-component-button/src/BpkButtonV2/common-types';
+import type { Props as ButtonProps } from '../../bpk-component-button';
 export declare const ICON_POSITION: {
     LEADING: string;
     TRAILING: string;

package/bpk-component-nudger/src/themeAttributes.d.ts

@@ -1,2 +1,2 @@
-import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button';
 export default themeAttributes;

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

@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-import { secondaryThemeAttributes as themeAttributes } from "../../bpk-component-button/themeAttributes";
+import { secondaryThemeAttributes as themeAttributes } from "../../bpk-component-button";
 export default themeAttributes;

package/bpk-component-swap-button/src/BpkSwapButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-swap-button{transform:translateY(-50%) rotate(90deg)}@media(max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media(max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e4e9}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e4e9}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff3f8}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff3f8}
+.bpk-swap-button{transform:translateY(-50%) rotate(90deg)}@media(max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;padding:0;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media(max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e4e9}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e4e9}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff3f8}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff3f8}

package/package.json

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