@skyscanner/backpack-web 42.17.0 → 42.18.0

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

@@ -9,3 +9,4 @@ export type { BpkCheckboxV2RootProps, BpkCheckboxV2CheckedState } from './src/Bp
 export type { BpkCheckboxV2ControlProps } from './src/BpkCheckboxV2/BpkCheckboxV2Control';
 export type { BpkCheckboxV2LabelProps } from './src/BpkCheckboxV2/BpkCheckboxV2Label';
 export type { BpkCheckboxV2DescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxV2Description';
+export type { BpkCheckboxV2HiddenInputProps } from './src/BpkCheckboxV2/BpkCheckboxV2HiddenInput';

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

@@ -1,9 +1,9 @@
 declare const BpkCheckboxV2: {
-    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
     Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
     Indicator: () => null;
     Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ children }: import("./BpkCheckboxV2Description").BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
-    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: import("./BpkCheckboxV2HiddenInput").BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-checkbox-v2{display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-focus-visible]{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
+.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-focus-visible]{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.d.ts

@@ -1,2 +1,7 @@
-declare const BpkCheckboxV2HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+export type BpkCheckboxV2HiddenInputProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+declare const BpkCheckboxV2HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js

@@ -17,9 +17,19 @@
  */
 
 import { Checkbox } from '@ark-ui/react';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // Renders Ark's visually hidden native <input type="checkbox">.
 // Include when the checkbox is inside a <form> for native form submission.
-import { jsx as _jsx } from "react/jsx-runtime";
-const BpkCheckboxV2HiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
+// Accepts aria-* attributes so consumers can override the screen-reader
+// announcement when the visible <BpkCheckboxV2.Label> is missing or differs
+// from the desired accessible name.
+const BpkCheckboxV2HiddenInput = ({
+  'aria-describedby': ariaDescribedby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby
+} = {}) => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+});
 export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts

@@ -3,6 +3,7 @@ export type BpkCheckboxV2CheckedState = boolean | 'indeterminate';
 export type BpkCheckboxV2RootProps = {
     children: ReactNode;
     checked?: BpkCheckboxV2CheckedState;
+    'data-testid'?: string;
     defaultChecked?: BpkCheckboxV2CheckedState;
     disabled?: boolean;
     id?: string;
@@ -12,5 +13,5 @@ export type BpkCheckboxV2RootProps = {
     required?: boolean;
     value?: string;
 };
-declare const BpkCheckboxV2Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkCheckboxV2Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkCheckboxV2Root;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js

@@ -24,6 +24,7 @@ const getClassName = cssModules(STYLES);
 const BpkCheckboxV2Root = ({
   checked,
   children,
+  'data-testid': dataTestId,
   defaultChecked,
   disabled = false,
   id,
@@ -35,6 +36,7 @@ const BpkCheckboxV2Root = ({
 }) => /*#__PURE__*/_jsx(Checkbox.Root, {
   className: getClassName('bpk-checkbox-v2'),
   checked: checked,
+  "data-testid": dataTestId,
   defaultChecked: defaultChecked,
   disabled: disabled,
   id: id,

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

@@ -17,7 +17,6 @@
  */
 
 import { cloneElement } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkFormValidation from "../../bpk-component-form-validation";
 import BpkLabel from "../../bpk-component-label";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";

package/bpk-component-form-validation/index.d.ts

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

package/bpk-component-form-validation/src/BpkFormValidation.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Props as AnimateHeightProps } from '../../bpk-animate-height';
+export type Props = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    children: ReactNode;
+    id: string;
+    expanded: boolean;
+    isCheckbox?: boolean;
+    className?: string | null;
+    containerProps?: Partial<AnimateHeightProps>;
+};
+declare const BpkFormValidation: ({ children, className, containerProps, expanded, isCheckbox, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkFormValidation;

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { lineHeightSm, iconSizeSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import AnimateHeight from "../../bpk-animate-height";
 import { withAlignment } from "../../bpk-component-icon";
@@ -53,12 +52,4 @@ const BpkFormValidation = ({
     })
   });
 };
-BpkFormValidation.propTypes = {
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  expanded: PropTypes.bool.isRequired,
-  isCheckbox: PropTypes.bool,
-  className: PropTypes.string,
-  containerProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
-};
 export default BpkFormValidation;

package/bpk-component-form-validation/src/themeAttributes.d.ts

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

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

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

package/bpk-component-radio/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 BpkRadio from "./src/BpkRadio";
+ */
+
+import BpkRadio from "./src/BpkRadio";
 import themeAttributes from "./src/themeAttributes";
 export default BpkRadio;
 export { themeAttributes };

package/bpk-component-radio/src/BpkRadio.d.ts

@@ -0,0 +1,13 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+type NativeInputProps = InputHTMLAttributes<HTMLInputElement>;
+export type Props = Omit<NativeInputProps, 'type' | 'className'> & {
+    name: string;
+    label: ReactNode;
+    ariaLabel?: string | null;
+    className?: string | null;
+    disabled?: boolean;
+    white?: boolean;
+    valid?: boolean | null;
+};
+declare const BpkRadio: ({ ariaLabel, className, disabled, label, name, valid, white, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkRadio;

package/bpk-component-radio/src/BpkRadio.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 "./BpkRadio.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -40,7 +41,7 @@ const BpkRadio = ({
       className: getClassName('bpk-radio__input'),
       name: name,
       disabled: disabled,
-      "aria-label": ariaLabel || label,
+      "aria-label": ariaLabel || (typeof label === 'string' ? label : undefined),
       "aria-invalid": isInvalid,
       ...rest
     }), /*#__PURE__*/_jsx("div", {
@@ -51,13 +52,4 @@ const BpkRadio = ({
     })]
   });
 };
-BpkRadio.propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
-  ariaLabel: PropTypes.string,
-  disabled: PropTypes.bool,
-  white: PropTypes.bool,
-  className: PropTypes.string,
-  valid: PropTypes.bool
-};
 export default BpkRadio;

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

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

package/bpk-component-radio/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 ['radioCheckedColor'];
+ */
+
+export default ['radioCheckedColor'];

package/package.json

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