@skyscanner/backpack-web 42.20.1 → 42.21.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 (4) hide show
  1. package/bpk-component-checkbox-card/src/BpkCheckboxCard.module.css +1 -1
  2. package/bpk-component-tooltip/src/BpkTooltip.d.ts +2 -1
  3. package/bpk-component-tooltip/src/BpkTooltip.js +5 -1
  4. package/package.json +1 -1
package/bpk-component-checkbox-card/src/BpkCheckboxCard.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-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-disabled-background-color: rgb(255, 255, 255);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));opacity:.5}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #0062e3}}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
18
+ .bpk-checkbox-card-root{position:relative;display:block;min-width:2.75rem;height:100%;min-height:2.75rem;transition:background-color 200ms ease-in-out,border-color 200ms ease-in-out,color 200ms ease-in-out;border:1px solid var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-default-background-color, rgb(255, 255, 255));color:var(--bpk-checkbox-card-default-text-color, rgb(22, 22, 22));cursor:pointer;box-sizing:border-box}.bpk-checkbox-card-root:has(:focus-visible){outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){border-color:var(--bpk-checkbox-card-hover-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-hover-background-color, rgb(245, 247, 250))}.bpk-checkbox-card-root[data-state=checked]{border-color:var(--bpk-checkbox-card-checked-border-color, transparent);background-color:var(--bpk-checkbox-card-checked-background-color, rgb(5, 32, 60));color:var(--bpk-checkbox-card-checked-text-color, rgb(255, 255, 255))}.bpk-checkbox-card-root[data-disabled]:not([data-loading]){border-color:var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));background-color:var(--bpk-checkbox-card-disabled-background-color, rgb(239, 243, 248));color:var(--bpk-checkbox-card-disabled-text-color, rgba(0, 0, 0, 0.2));cursor:not-allowed}.bpk-checkbox-card-root[data-loading]{cursor:not-allowed}.bpk-checkbox-card-root--radius-square{border-radius:0}.bpk-checkbox-card-root--radius-rounded{border-radius:.75rem}.bpk-checkbox-card-root--on-canvas-default{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207)}.bpk-checkbox-card-root--cars{transition:background-color 200ms ease-in-out,box-shadow 200ms ease-in-out,color 200ms ease-in-out;border:none;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-default-border-color, rgb(193, 199, 207));--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: rgb(193, 199, 207);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-border-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(255, 255, 255);--bpk-checkbox-card-checked-text-color: rgb(22, 22, 22);--bpk-checkbox-card-checked-border-color: rgb(5, 32, 60);--bpk-checkbox-card-disabled-background-color: rgb(255, 255, 255);--bpk-checkbox-card-indicator-background-color: rgb(5, 32, 60)}.bpk-checkbox-card-root--cars.bpk-checkbox-card-root--cars--radius-rounded{border-radius:1.5rem}.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked]):not([data-disabled]):hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-checkbox-card-root--cars:not([data-state=checked])[data-loading]:hover:not(:active):not(:disabled){box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-hover-border-color, rgb(5, 32, 60))}.bpk-checkbox-card-root--cars[data-state=checked]{box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars[data-state=checked]{border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){transition:none;box-shadow:inset 0 0 0 2px var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}@media(hover: none)and (pointer: coarse){.bpk-checkbox-card-root--cars:active:not([data-disabled]):not([data-loading]){border:.0125rem solid var(--bpk-checkbox-card-checked-border-color, rgb(5, 32, 60))}}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]){color:#161616;box-shadow:inset 0 0 0 1px var(--bpk-checkbox-card-disabled-border-color, rgb(193, 199, 207));opacity:.5}.bpk-checkbox-card-root--cars:has(:focus-visible){outline:none;outline-offset:0}@media(hover: hover)and (pointer: fine){.bpk-checkbox-card-root--cars:has(:focus-visible){box-shadow:inset 0 0 0 2px #0062e3}}.bpk-checkbox-card-root--on-canvas-contrast{--bpk-checkbox-card-default-background-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(255, 255, 255);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: rgb(193, 199, 207);--bpk-checkbox-card-disabled-background-color: rgb(239, 243, 248)}.bpk-checkbox-card-root--on-surface-contrast{--bpk-checkbox-card-default-background-color: rgba(255, 255, 255, 0.1);--bpk-checkbox-card-default-text-color: rgb(255, 255, 255);--bpk-checkbox-card-secondary-text-color: rgb(255, 255, 255);--bpk-checkbox-card-hover-background-color: rgb(5, 32, 60);--bpk-checkbox-card-checked-background-color: rgb(0, 98, 227);--bpk-checkbox-card-default-border-color: transparent;--bpk-checkbox-card-hover-border-color: transparent;--bpk-checkbox-card-disabled-border-color: transparent}.bpk-checkbox-card-content{width:100%;padding:.5rem}.bpk-checkbox-card-label{display:-webkit-box;width:100%;color:inherit;text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-label-line-clamp, 2);line-clamp:var(--bpk-label-line-clamp, 2)}.bpk-checkbox-card-label>*{text-align:inherit}.bpk-checkbox-card-description{display:-webkit-box;width:100%;color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113));text-align:center;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--bpk-description-line-clamp, 3);line-clamp:var(--bpk-description-line-clamp, 3);margin:0}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-description{color:inherit}.bpk-checkbox-card-root--cars[data-state=checked] .bpk-checkbox-card-description{color:var(--bpk-checkbox-card-secondary-text-color, rgb(98, 105, 113))}.bpk-checkbox-card-root--cars[data-disabled]:not([data-loading]) .bpk-checkbox-card-description{color:rgba(0,0,0,.2)}.bpk-checkbox-card-description>*{text-align:inherit}.bpk-checkbox-card-price{display:flex;align-items:center;gap:.25rem}.bpk-checkbox-card-indicator{position:absolute;top:.5rem;display:none;z-index:1;width:1.25rem;height:1.25rem;inset-inline-end:.5rem;pointer-events:none}.bpk-checkbox-card-indicator svg{width:100%;height:100%;fill:var(--bpk-checkbox-card-indicator-background-color, rgb(0, 98, 227))}.bpk-checkbox-card-root[data-state=checked] .bpk-checkbox-card-indicator{display:block}.bpk-checkbox-card-root--cars .bpk-checkbox-card-indicator{width:1rem;height:1rem}
package/bpk-component-tooltip/src/BpkTooltip.d.ts CHANGED
@@ -19,6 +19,7 @@ export type Props = {
19
19
  hideOnTouchDevices?: boolean;
20
20
  placement?: Placement;
21
21
  isOpen?: boolean;
22
+ zIndexValue?: number;
22
23
  };
23
- declare const BpkTooltip: ({ ariaLabel, children, hideOnTouchDevices, id, isOpen, padded, placement, target, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
24
+ declare const BpkTooltip: ({ ariaLabel, children, hideOnTouchDevices, id, isOpen, padded, placement, target, type, zIndexValue, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
24
25
  export default BpkTooltip;
package/bpk-component-tooltip/src/BpkTooltip.js CHANGED
@@ -60,6 +60,7 @@ const BpkTooltip = ({
60
60
  placement = 'bottom',
61
61
  target,
62
62
  type = TOOLTIP_TYPES.light,
63
+ zIndexValue,
63
64
  ...rest
64
65
  }) => {
65
66
  const [isOpenState, setIsOpenState] = useState(isOpen);
@@ -107,7 +108,10 @@ const BpkTooltip = ({
107
108
  children: /*#__PURE__*/_jsx("div", {
108
109
  className: getClassName('bpk-tooltip--container'),
109
110
  ref: refs.setFloating,
110
- style: floatingStyles,
111
+ style: {
112
+ ...floatingStyles,
113
+ zIndex: zIndexValue
114
+ },
111
115
  ...getFloatingProps(),
112
116
  children: /*#__PURE__*/_jsx(TransitionInitialMount, {
113
117
  appearClassName: getClassName('bpk-tooltip--appear'),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "42.20.1",
3
+ "version": "42.21.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",