@skyscanner/backpack-web 42.15.0 → 42.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/bpk-component-accordion/src/BpkAccordionItem.module.css +1 -1
  2. package/bpk-component-autosuggest/src/BpkAutosuggest.module.css +1 -1
  3. package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.css +1 -1
  4. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css +1 -1
  5. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts +2 -4
  6. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js +1 -15
  7. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js +20 -4
  8. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts +1 -2
  9. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js +1 -5
  10. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts +1 -1
  11. package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js +25 -13
  12. package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts +2 -0
  13. package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css +1 -1
  14. package/package.json +1 -1
package/bpk-component-accordion/src/BpkAccordionItem.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
18
+ .bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:start;cursor:pointer;appearance:none}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
package/bpk-component-autosuggest/src/BpkAutosuggest.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:flex;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
18
+ .bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:flex;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
18
+ .bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTable.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-button{opacity:var(--bpk-image-opacity, 1);overflow:clip;margin-block-start:calc(.5rem*var(--bpk-image-opacity, 1));max-block-size:calc(5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
18
+ .bpk-comparison-table__scroll-container{flex:1;overflow:auto;min-block-size:0;overscroll-behavior:contain}.bpk-comparison-table__scroll-container tbody{transform:translateY(var(--bpk-rows-offset, 0))}.bpk-comparison-table__scroll-container td:not(:last-child){border-inline-end:1px solid #c1c7cf}.bpk-comparison-table__scroll-container th:not(:last-child)::after{position:absolute;content:"";background-color:#c1c7cf;inline-size:1px;inset-block-end:0;inset-block-start:1rem;inset-inline-end:0}.bpk-comparison-table__scroll-container table{border-collapse:separate;border-spacing:0;box-shadow:none;min-inline-size:33.75rem}.bpk-comparison-table__scroll-container th{position:sticky;z-index:1;padding:0;background-color:#fff;vertical-align:top;inset-block-start:0}.bpk-comparison-table__header-content{display:flex;padding:1rem;flex-direction:column}.bpk-comparison-table__header-image-wrapper{position:relative;opacity:var(--bpk-image-opacity, 1);margin-block-end:1rem}.bpk-comparison-table__header-image-area{display:flex;justify-content:center;align-items:center;border-radius:.25rem;background-color:#e0e4e9;overflow:hidden;block-size:5.1875rem}.bpk-comparison-table__header-image-area img{max-block-size:100%;max-inline-size:100%;object-fit:contain}.bpk-comparison-table__header-id-section{margin-block-start:calc(6.1875rem*(var(--bpk-image-opacity, 1) - 1))}.bpk-comparison-table__best-tag{position:absolute;z-index:1;transform:translateY(-50%);inset-block-start:0}.bpk-comparison-table__remove-cell{padding:0}.bpk-comparison-table__remove-cell-inner{padding:0 1rem calc(1rem*var(--bpk-image-opacity, 1));opacity:var(--bpk-image-opacity, 1);overflow:clip;max-block-size:calc(3.5rem*var(--bpk-image-opacity, 1));overflow-clip-margin:.25rem}.bpk-comparison-table__placeholder-cell{background-color:#fff}
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.d.ts CHANGED
@@ -1,8 +1,6 @@
1
1
  import type { BpkCompareColumn } from './common-types';
2
- type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'itemId' | 'bestTag' | 'removeA11yLabel'> & {
3
- removeLabel: string;
2
+ type BpkComparisonTableColumnHeaderProps = Pick<BpkCompareColumn, 'imageSrc' | 'imageAlt' | 'headerContent' | 'bestTag'> & {
4
3
  bestTagLabel: string;
5
- onRemove: (itemId: string) => void;
6
4
  };
7
- declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, itemId, onRemove, removeA11yLabel, removeLabel, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
5
+ declare const BpkComparisonTableColumnHeader: ({ bestTag, bestTagLabel, headerContent, imageAlt, imageSrc, }: BpkComparisonTableColumnHeaderProps) => import("react/jsx-runtime").JSX.Element;
8
6
  export default BpkComparisonTableColumnHeader;
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableColumnHeader.js CHANGED
@@ -17,7 +17,6 @@
17
17
  */
18
18
 
19
19
  import BpkBadge, { BADGE_TYPES } from "../../../bpk-component-badge";
20
- import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
21
20
  import { cssModules } from "../../../bpk-react-utils";
22
21
  import STYLES from "./BpkComparisonTable.module.css";
23
22
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,11 +26,7 @@ const BpkComparisonTableColumnHeader = ({
27
26
  bestTagLabel,
28
27
  headerContent,
29
28
  imageAlt = '',
30
- imageSrc,
31
- itemId,
32
- onRemove,
33
- removeA11yLabel,
34
- removeLabel
29
+ imageSrc
35
30
  }) => /*#__PURE__*/_jsxs("div", {
36
31
  className: getClassName('bpk-comparison-table__header-content'),
37
32
  children: [/*#__PURE__*/_jsxs("div", {
@@ -52,15 +47,6 @@ const BpkComparisonTableColumnHeader = ({
52
47
  }), /*#__PURE__*/_jsx("div", {
53
48
  className: getClassName('bpk-comparison-table__header-id-section'),
54
49
  children: headerContent
55
- }), /*#__PURE__*/_jsx("div", {
56
- className: getClassName('bpk-comparison-table__remove-button'),
57
- children: /*#__PURE__*/_jsx(BpkButton, {
58
- type: BUTTON_TYPES.link,
59
- size: SIZE_TYPES.small,
60
- onClick: () => onRemove(itemId),
61
- "aria-label": removeA11yLabel,
62
- children: removeLabel
63
- })
64
50
  })]
65
51
  });
66
52
  export default BpkComparisonTableColumnHeader;
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableContent.js CHANGED
@@ -17,6 +17,7 @@
17
17
  */
18
18
 
19
19
  import { useEffect, useRef } from 'react';
20
+ import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../../bpk-component-button";
20
21
  import { BpkTable, BpkTableBody, BpkTableCell, BpkTableRow, TABLE_BODY_TYPES } from "../../../bpk-component-table";
21
22
  import { cssModules } from "../../../bpk-react-utils";
22
23
  import BpkComparisonTableHeaderRow from "./BpkComparisonTableHeaderRow";
@@ -74,19 +75,34 @@ const BpkComparisonTableContent = ({
74
75
  children: /*#__PURE__*/_jsxs(BpkTable, {
75
76
  children: [/*#__PURE__*/_jsx(BpkComparisonTableHeaderRow, {
76
77
  displayColumns: displayColumns,
77
- onRemove: onRemove,
78
78
  onAddMoreClick: onAddMoreClick,
79
79
  strings: strings
80
- }), /*#__PURE__*/_jsx(BpkTableBody, {
80
+ }), /*#__PURE__*/_jsxs(BpkTableBody, {
81
81
  type: TABLE_BODY_TYPES.striped,
82
- children: rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
82
+ children: [columns.length > 0 && /*#__PURE__*/_jsx(BpkTableRow, {
83
+ children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
84
+ // Zero padding needed for row collapse animation — no BpkTableCell prop.
85
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
86
+ className: getClassName('bpk-comparison-table__remove-cell'),
87
+ children: column && /*#__PURE__*/_jsx("div", {
88
+ className: getClassName('bpk-comparison-table__remove-cell-inner'),
89
+ children: /*#__PURE__*/_jsx(BpkButton, {
90
+ type: BUTTON_TYPES.link,
91
+ size: SIZE_TYPES.small,
92
+ onClick: () => onRemove(column.itemId),
93
+ "aria-label": column.removeA11yLabel,
94
+ children: strings.removeLabel
95
+ })
96
+ })
97
+ }, column ? `remove-${column.itemId}` : `remove-placeholder-${index}`))
98
+ }), rowIds.map(rowId => /*#__PURE__*/_jsx(BpkTableRow, {
83
99
  children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableCell, {
84
100
  // Placeholder need a distinct background colour not available via BpkTableCell props
85
101
  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
86
102
  className: column ? undefined : getClassName('bpk-comparison-table__placeholder-cell'),
87
103
  children: column ? cellsByItemAndRow.get(column.itemId)?.get(rowId) ?? null : null
88
104
  }, column ? `${rowId}-${column.itemId}` : `${rowId}-placeholder-${index}`))
89
- }, rowId))
105
+ }, rowId))]
90
106
  })]
91
107
  })
92
108
  });
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import type { BpkComparisonTableStrings, BpkCompareColumn } from './common-types';
2
2
  type BpkComparisonTableHeaderRowProps = {
3
3
  displayColumns: Array<BpkCompareColumn | null>;
4
- onRemove: (itemId: string) => void;
5
4
  onAddMoreClick: () => void;
6
5
  strings: BpkComparisonTableStrings;
7
6
  };
8
- declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, onRemove, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
7
+ declare const BpkComparisonTableHeaderRow: ({ displayColumns, onAddMoreClick, strings, }: BpkComparisonTableHeaderRowProps) => import("react/jsx-runtime").JSX.Element;
9
8
  export default BpkComparisonTableHeaderRow;
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableHeaderRow.js CHANGED
@@ -23,22 +23,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
23
23
  const BpkComparisonTableHeaderRow = ({
24
24
  displayColumns,
25
25
  onAddMoreClick,
26
- onRemove,
27
26
  strings
28
27
  }) => {
29
28
  const {
30
29
  addMoreDescription,
31
30
  addMoreLinkText,
32
- bestTagLabel,
33
- removeLabel
31
+ bestTagLabel
34
32
  } = strings;
35
33
  return /*#__PURE__*/_jsx(BpkTableHead, {
36
34
  children: /*#__PURE__*/_jsx(BpkTableRow, {
37
35
  children: displayColumns.map((column, index) => /*#__PURE__*/_jsx(BpkTableHeadCell, {
38
36
  children: column ? /*#__PURE__*/_jsx(BpkComparisonTableColumnHeader, {
39
37
  ...column,
40
- removeLabel: removeLabel,
41
- onRemove: onRemove,
42
38
  bestTagLabel: bestTagLabel
43
39
  }) : /*#__PURE__*/_jsx(BpkComparisonTableColumnHeaderPlaceholder, {
44
40
  addMoreDescription: addMoreDescription,
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import type { BpkComparisonTableRootProps } from './common-types';
2
- declare const BpkComparisonTableRoot: ({ children, isOpen, onClose }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const BpkComparisonTableRoot: ({ children, isOpen, onClose, onOpen }: BpkComparisonTableRootProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default BpkComparisonTableRoot;
package/bpk-component-comparison-table/src/BpkComparisonTable/BpkComparisonTableRoot.js CHANGED
@@ -16,23 +16,35 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
+ import { useEffect, useRef } from 'react';
19
20
  import { BpkModalV3 } from "../../../bpk-component-modal";
20
21
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
21
22
  const BpkComparisonTableRoot = ({
22
23
  children,
23
24
  isOpen,
24
- onClose
25
- }) => /*#__PURE__*/_jsx(BpkModalV3.Root, {
26
- open: isOpen,
27
- onOpenChange: details => {
28
- if (!details.open) {
29
- onClose();
25
+ onClose,
26
+ onOpen
27
+ }) => {
28
+ // Hold onOpen in a ref so inline callbacks (new identity each render) don't re-trigger the effect and double-fire while the modal stays open.
29
+ const onOpenRef = useRef(onOpen);
30
+ onOpenRef.current = onOpen;
31
+ useEffect(() => {
32
+ if (isOpen) {
33
+ onOpenRef.current?.();
30
34
  }
31
- },
32
- children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
33
- children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
34
- children: children
35
- })]
36
- })
37
- });
35
+ }, [isOpen]);
36
+ return /*#__PURE__*/_jsx(BpkModalV3.Root, {
37
+ open: isOpen,
38
+ onOpenChange: details => {
39
+ if (!details.open) {
40
+ onClose();
41
+ }
42
+ },
43
+ children: /*#__PURE__*/_jsxs(BpkModalV3.Portal, {
44
+ children: [/*#__PURE__*/_jsx(BpkModalV3.Scrim, {}), /*#__PURE__*/_jsx(BpkModalV3.Content, {
45
+ children: children
46
+ })]
47
+ })
48
+ });
49
+ };
38
50
  export default BpkComparisonTableRoot;
package/bpk-component-comparison-table/src/BpkComparisonTable/common-types.d.ts CHANGED
@@ -44,6 +44,8 @@ export type BpkComparisonTableRootProps = {
44
44
  isOpen: boolean;
45
45
  /** Called when the modal close trigger is activated or Escape is pressed. */
46
46
  onClose: () => void;
47
+ /** Optional — called each time the modal opens: on mount if `isOpen` is `true`, and whenever `isOpen` transitions from `false` to `true`. Useful for analytics, logging, or fetching data on open. */
48
+ onOpen?: () => void;
47
49
  /** BpkComparisonTable.Header and BpkComparisonTable.Content. */
48
50
  children: ReactNode;
49
51
  };
package/bpk-component-comparison-table/src/BpkComparisonTray/BpkComparisonTray.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}
18
+ .bpk-comparison-tray{width:22.1875rem;max-width:100%}@media(max-width: 32rem){.bpk-comparison-tray{width:auto;min-width:0;flex:1}}.bpk-comparison-tray button{min-height:0;padding-block:0}.bpk-comparison-tray__item{position:relative;width:3.875rem;min-width:0;flex-shrink:1;aspect-ratio:62/28}.bpk-comparison-tray__item-image-container{width:100%;height:100%;background-color:#eff3f8;overflow:hidden;border-radius:.25rem}.bpk-comparison-tray__item-image-container img{height:100%;object-fit:contain}.bpk-comparison-tray__item-close{position:relative;position:absolute;top:0;inset-inline-end:calc(-8*0.0625rem);display:flex;width:1rem;height:1rem;justify-content:center;align-items:center;transform:translateY(-50%);border:.125rem solid #fff;border-radius:50%;background-color:#161616;color:#fff;cursor:pointer;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-comparison-tray__item-close::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-comparison-tray__item-close svg{width:.5rem;height:.5rem;flex-shrink:0;fill:#fff}.bpk-comparison-tray__item-close:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-comparison-tray__item-placeholder{width:3.875rem;min-width:0;flex-shrink:1;border:.0625rem dashed #c1c7cf;aspect-ratio:62/28;border-radius:.25rem}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.15.0",
3
+ "version": "42.16.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",