@skyscanner/backpack-web 35.0.1 → 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/index.d.ts

@@ -0,0 +1,3 @@
+import BpkNavigationTabGroup, { type Props as BpkNavigationTabGroupProps } from './src/BpkNavigationTabGroup';
+export type { BpkNavigationTabGroupProps };
+export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkNavigationTabGroup from "./src/BpkNavigationTabGroup";
+export default BpkNavigationTabGroup;

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

@@ -0,0 +1,23 @@
+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: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>, tab: TabItem, index: number) => void;
+    selectedIndex: number;
+    ariaLabel: string;
+};
+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

@@ -0,0 +1,99 @@
+/*
+ * 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 { useState } from 'react';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkNavigationTabGroup.module.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const NAVIGATION_TAB_GROUP_TYPES = {
+  CanvasDefault: 'canvas-default',
+  SurfaceContrast: 'surface-contrast'
+};
+const TabWrap = ({
+  children,
+  onClick,
+  selected,
+  tab,
+  type
+}) => {
+  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: e => onClick(e),
+    "aria-current": selected ? 'page' : false,
+    children: children
+  }) : /*#__PURE__*/_jsx("button", {
+    ...tab,
+    id: tab.id,
+    className: tabStyling,
+    type: "button",
+    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 = (e, tab, index) => {
+    if (index !== selectedTab) {
+      setSelectedTab(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,
+    children: tabs.map((tab, index) => {
+      const selected = index === selectedTab;
+      const Icon = tab.icon;
+      return /*#__PURE__*/_jsx(TabWrap, {
+        tab: tab,
+        selected: selected,
+        onClick: e => handleButtonClick(e, tab, index),
+        type: type,
+        children: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [Icon && /*#__PURE__*/_jsx("span", {
+            className: getClassName('bpk-navigation-tab-icon', `bpk-navigation-tab-icon--${type}`, selected && `bpk-navigation-tab-icon--${type}-selected`),
+            children: /*#__PURE__*/_jsx(Icon, {})
+          }), /*#__PURE__*/_jsx(BpkText, {
+            tagName: "span",
+            textStyle: TEXT_STYLES.label2,
+            children: tab.text
+          })]
+        })
+      }, `index-${index.toString()}`);
+    })
+  });
+};
+export default BpkNavigationTabGroup;

package/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-navigation-tab-group{display:flex}.bpk-navigation-tab-group .bpk-navigation-tab-wrap{height:2.25rem;padding:0 1rem;border:none;border-radius:6.25rem;margin-inline-end:.25rem;display:flex;align-items:center;text-decoration:none;white-space:nowrap}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast:hover{background-color:#154679;box-shadow:0 0 0 1px #154679 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--surface-contrast-selected:hover{background-color:#0062e3;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default:hover{color:#161616;box-shadow:0 0 0 1px #161616 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-wrap--canvas-default-selected:hover{background-color:#0062e3;color:#fff;box-shadow:0 0 0 1px #0062e3 inset}.bpk-navigation-tab-group .bpk-navigation-tab-icon{height:1rem;margin-inline-end:.5rem}.bpk-navigation-tab-group .bpk-navigation-tab-icon--surface-contrast{fill:#fff}.bpk-navigation-tab-group .bpk-navigation-tab-icon--canvas-default-selected{fill:#fff}

package/package.json

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