@skyscanner/backpack-web 34.8.0 → 34.8.1

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 (3) hide show
  1. package/bpk-component-popover/src/BpkPopover.d.ts +2 -2
  2. package/bpk-component-popover/src/BpkPopover.js +72 -71
  3. package/package.json +1 -1
package/bpk-component-popover/src/BpkPopover.d.ts CHANGED
@@ -4,14 +4,14 @@ declare const EVENT_SOURCES: {
4
4
  CLOSE_BUTTON: string;
5
5
  CLOSE_LINK: string;
6
6
  };
7
- type CloseButtonProps = ({
7
+ type CloseButtonProps = {
8
8
  /**
9
9
  * @deprecated close button text is deprecated. Instead, please use `closeButtonIcon`, or you may opt not to render a close button at all.
10
10
  */
11
11
  closeButtonText: string;
12
12
  } | {
13
13
  closeButtonText?: never;
14
- });
14
+ };
15
15
  export type Props = CloseButtonProps & {
16
16
  children: ReactNode;
17
17
  id: string;
package/bpk-component-popover/src/BpkPopover.js CHANGED
@@ -17,7 +17,7 @@
17
17
  */
18
18
 
19
19
  import { useState, useEffect, useRef, cloneElement, isValidElement } from 'react';
20
- import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, shift } from '@floating-ui/react';
20
+ import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingPortal, arrow, FloatingArrow, shift } from '@floating-ui/react';
21
21
  import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
22
22
 
23
23
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -115,79 +115,80 @@ const BpkPopover = ({
115
115
  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
116
116
  const labelId = `bpk-popover-label-${id}`;
117
117
  return /*#__PURE__*/_jsxs(_Fragment, {
118
- children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
119
- context: context,
120
- modal: false,
121
- children: /*#__PURE__*/_jsx("div", {
122
- className: getClassName('bpk-popover--container'),
123
- ref: refs.setFloating,
124
- style: floatingStyles,
125
- ...getFloatingProps(),
126
- children: /*#__PURE__*/_jsx(TransitionInitialMount, {
127
- appearClassName: getClassName('bpk-popover--appear'),
128
- appearActiveClassName: getClassName('bpk-popover--appear-active'),
129
- transitionTimeout: 200,
130
- children: /*#__PURE__*/_jsxs("section", {
131
- id: id,
132
- tabIndex: -1,
133
- role: "dialog",
134
- "aria-labelledby": labelId,
135
- className: classNames,
136
- ...rest,
137
- children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
138
- ref: arrowRef,
139
- context: context,
140
- id: ARROW_ID,
141
- className: getClassName('bpk-popover__arrow'),
142
- role: "presentation",
143
- stroke: surfaceHighlightDay,
144
- strokeWidth: strokeWidth
145
- }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
146
- className: getClassName('bpk-popover__header'),
147
- children: [/*#__PURE__*/_jsx(BpkText, {
148
- tagName: "h2",
118
+ children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
119
+ children: /*#__PURE__*/_jsx(FloatingFocusManager, {
120
+ context: context,
121
+ children: /*#__PURE__*/_jsx("div", {
122
+ className: getClassName('bpk-popover--container'),
123
+ ref: refs.setFloating,
124
+ style: floatingStyles,
125
+ ...getFloatingProps(),
126
+ children: /*#__PURE__*/_jsx(TransitionInitialMount, {
127
+ appearClassName: getClassName('bpk-popover--appear'),
128
+ appearActiveClassName: getClassName('bpk-popover--appear-active'),
129
+ transitionTimeout: 200,
130
+ children: /*#__PURE__*/_jsxs("section", {
131
+ id: id,
132
+ tabIndex: -1,
133
+ role: "dialog",
134
+ "aria-labelledby": labelId,
135
+ className: classNames,
136
+ ...rest,
137
+ children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
138
+ ref: arrowRef,
139
+ context: context,
140
+ id: ARROW_ID,
141
+ className: getClassName('bpk-popover__arrow'),
142
+ role: "presentation",
143
+ stroke: surfaceHighlightDay,
144
+ strokeWidth: strokeWidth
145
+ }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
146
+ className: getClassName('bpk-popover__header'),
147
+ children: [/*#__PURE__*/_jsx(BpkText, {
148
+ tagName: "h2",
149
+ id: labelId,
150
+ textStyle: TEXT_STYLES.label1,
151
+ children: label
152
+ }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
153
+ label: closeButtonText || closeButtonLabel,
154
+ onClick: event => {
155
+ bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
156
+ setIsOpenState(false);
157
+ },
158
+ ...closeButtonProps
159
+ }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
160
+ onClick: event => {
161
+ bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
162
+ setIsOpenState(false);
163
+ },
164
+ ...closeButtonProps,
165
+ children: closeButtonText
166
+ })]
167
+ }) : /*#__PURE__*/_jsx("span", {
149
168
  id: labelId,
150
- textStyle: TEXT_STYLES.label1,
169
+ className: getClassName('bpk-popover__label'),
151
170
  children: label
152
- }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
153
- label: closeButtonText || closeButtonLabel,
154
- onClick: event => {
155
- bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
156
- setIsOpenState(false);
157
- },
158
- ...closeButtonProps
159
- }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
160
- onClick: event => {
161
- bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
162
- setIsOpenState(false);
163
- },
164
- ...closeButtonProps,
165
- children: closeButtonText
171
+ }), /*#__PURE__*/_jsx("div", {
172
+ className: bodyClassNames,
173
+ children: children
174
+ }), actionText && onAction && /*#__PURE__*/_jsx("div", {
175
+ className: getClassName('bpk-popover__action'),
176
+ children: /*#__PURE__*/_jsx(BpkButtonLink, {
177
+ onClick: onAction,
178
+ children: actionText
179
+ })
180
+ }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
181
+ className: getClassName('bpk-popover__footer'),
182
+ children: /*#__PURE__*/_jsx(BpkButtonLink, {
183
+ onClick: event => {
184
+ bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
185
+ setIsOpenState(false);
186
+ },
187
+ ...closeButtonProps,
188
+ children: closeButtonText
189
+ })
166
190
  })]
167
- }) : /*#__PURE__*/_jsx("span", {
168
- id: labelId,
169
- className: getClassName('bpk-popover__label'),
170
- children: label
171
- }), /*#__PURE__*/_jsx("div", {
172
- className: bodyClassNames,
173
- children: children
174
- }), actionText && onAction && /*#__PURE__*/_jsx("div", {
175
- className: getClassName('bpk-popover__action'),
176
- children: /*#__PURE__*/_jsx(BpkButtonLink, {
177
- onClick: onAction,
178
- children: actionText
179
- })
180
- }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
181
- className: getClassName('bpk-popover__footer'),
182
- children: /*#__PURE__*/_jsx(BpkButtonLink, {
183
- onClick: event => {
184
- bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
185
- setIsOpenState(false);
186
- },
187
- ...closeButtonProps,
188
- children: closeButtonText
189
- })
190
- })]
191
+ })
191
192
  })
192
193
  })
193
194
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "34.8.0",
3
+ "version": "34.8.1",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",