@skyscanner/backpack-web 35.1.0 → 35.2.0

package/bpk-component-datepicker/src/BpkDatepicker.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactElement } from 'react';
+import type { ReactElement, RefObject } from 'react';
 import type { DaysOfWeek, ReactComponent, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = {
     changeMonthLabel: string;
@@ -49,7 +49,9 @@ type State = {
     isOpen: boolean;
 };
 declare class BpkDatepicker extends Component<Props, State> {
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: (ref: HTMLInputElement) => void;
+    elementRef?: HTMLInputElement;
+    focusRef?: RefObject<HTMLInputElement>;
     static defaultProps: {
         calendarComponent: {
             new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -22,6 +22,7 @@ import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDat
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
 import BpkPopover from "../../bpk-component-popover";
+import { setNativeValue } from "../../bpk-react-utils";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
@@ -55,7 +56,10 @@ class BpkDatepicker extends Component {
     this.state = {
       isOpen: props.isOpen
     };
-    this.inputRef = /*#__PURE__*/createRef();
+    this.focusRef = /*#__PURE__*/createRef();
+    this.inputRef = ref => {
+      this.elementRef = ref;
+    };
   }
   componentDidUpdate(prevProps, prevState) {
     const {
@@ -147,7 +151,9 @@ class BpkDatepicker extends Component {
       const newEndDate = DateUtils.dateToBoundaries(endDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
       if (selectionConfiguration && selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
         onDateSelect(selectionConfiguration.startDate, newEndDate);
+        this.elementRef && setNativeValue(this.elementRef, this.props.formatDate(newEndDate));
       } else {
+        this.elementRef && setNativeValue(this.elementRef, this.props.formatDate(newStartDate));
         onDateSelect(newStartDate);
       }
     }
@@ -188,8 +194,9 @@ class BpkDatepicker extends Component {
     delete rest.onOpenChange;
     delete rest.isOpen;
     const input = inputComponent || /*#__PURE__*/_jsx("div", {
-      ref: this.inputRef,
+      ref: this.focusRef,
       children: /*#__PURE__*/_jsx(Input, {
+        inputRef: this.inputRef,
         id: id,
         name: `${id}_input`,
         value: this.getValue(selectionConfiguration, formatDate),

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.d.ts

@@ -1,20 +1,23 @@
-import type { FunctionComponent } from 'react';
+import type { MouseEvent, FunctionComponent } from 'react';
 export declare const NAVIGATION_TAB_GROUP_TYPES: {
     CanvasDefault: string;
     SurfaceContrast: string;
 };
 export type NavigationTabGroupTypes = (typeof NAVIGATION_TAB_GROUP_TYPES)[keyof typeof NAVIGATION_TAB_GROUP_TYPES];
 type TabItem = {
+    id: string;
     text: string;
     icon?: FunctionComponent<any> | null;
     href?: string;
+    [rest: string]: any;
 };
 export type Props = {
+    id: string;
     tabs: TabItem[];
     type?: NavigationTabGroupTypes;
-    onItemClick: (tab: TabItem, index: number) => void;
+    onItemClick: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>, tab: TabItem, index: number) => void;
     selectedIndex: number;
     ariaLabel: string;
 };
-declare const BpkNavigationTabGroup: ({ ariaLabel, onItemClick, selectedIndex, tabs, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkNavigationTabGroup: ({ ariaLabel, id, onItemClick, selectedIndex, tabs, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.js

@@ -35,36 +35,42 @@ const TabWrap = ({
 }) => {
   const tabStyling = getClassName('bpk-navigation-tab-wrap', `bpk-navigation-tab-wrap--${type}`, selected && `bpk-navigation-tab-wrap--${type}-selected`);
   return tab.href ? /*#__PURE__*/_jsx("a", {
+    ...tab,
+    id: tab.id,
     className: tabStyling,
     href: tab.href,
-    onClick: onClick,
+    onClick: e => onClick(e),
     "aria-current": selected ? 'page' : false,
     children: children
   }) : /*#__PURE__*/_jsx("button", {
+    ...tab,
+    id: tab.id,
     className: tabStyling,
     type: "button",
-    onClick: onClick,
-    "aria-current": selected ? 'page' : false,
+    onClick: e => onClick(e),
     role: "link",
+    "aria-current": selected ? 'page' : false,
     children: children
   });
 };
 const BpkNavigationTabGroup = ({
   ariaLabel,
+  id,
   onItemClick,
   selectedIndex,
   tabs,
   type = NAVIGATION_TAB_GROUP_TYPES.SurfaceContrast
 }) => {
   const [selectedTab, setSelectedTab] = useState(selectedIndex);
-  const handleButtonClick = (tab, index) => {
+  const handleButtonClick = (e, tab, index) => {
     if (index !== selectedTab) {
       setSelectedTab(index);
     }
-    onItemClick(tab, index);
+    onItemClick(e, tab, index);
   };
   const containerStyling = getClassName('bpk-navigation-tab-group');
   return /*#__PURE__*/_jsx("nav", {
+    id: id,
     className: containerStyling,
     role: "navigation",
     "aria-label": ariaLabel,
@@ -74,7 +80,7 @@ const BpkNavigationTabGroup = ({
       return /*#__PURE__*/_jsx(TabWrap, {
         tab: tab,
         selected: selected,
-        onClick: () => handleButtonClick(tab, index),
+        onClick: e => handleButtonClick(e, tab, index),
         type: type,
         children: /*#__PURE__*/_jsxs(_Fragment, {
           children: [Icon && /*#__PURE__*/_jsx("span", {

package/package.json

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