@skyscanner/backpack-web 23.2.1 → 23.3.0

package/bpk-component-input/src/withOpenEvents.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _bpkReactUtils = require("../../bpk-react-utils");
 var _BpkInputModule = _interopRequireDefault(require("./BpkInput.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "hasTouchSupport", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onOpen", "onTouchEnd"];
+const _excluded = ["className", "hasTouchSupport", "isOpen", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onOpen", "onTouchEnd"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -40,13 +39,17 @@ const KEYCODES = {
   SPACEBAR: 32
 };
 const handleKeyEvent = (keyCode, callback) => e => {
-  if (e.keyCode === keyCode) {
+  if (e instanceof KeyboardEvent && e.keyCode === keyCode) {
     e.preventDefault();
-    callback();
+    if (callback) {
+      callback();
+    }
   }
 };
 const withEventHandler = (fn, eventHandler) => e => {
-  fn(e);
+  if (fn) {
+    fn(e);
+  }
   if (eventHandler) {
     eventHandler(e);
   }
@@ -55,6 +58,7 @@ const withOpenEvents = InputComponent => {
   class WithOpenEvents extends _react.Component {
     constructor(props) {
       super(props);
+      _defineProperty(this, "focusCanOpen", void 0);
       _defineProperty(this, "handleTouchEnd", event => {
         // preventDefault fixes an issue on Android and iOS in which the popover closes immediately
         // because a touch event is registered on one of the dates.
@@ -89,6 +93,7 @@ const withOpenEvents = InputComponent => {
         {
           className,
           hasTouchSupport,
+          isOpen,
           onBlur,
           onClick,
           onFocus,
@@ -98,7 +103,6 @@ const withOpenEvents = InputComponent => {
           onTouchEnd
         } = _this$props,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      delete rest.isOpen;
       const classNames = [getClassName('bpk-input--with-open-events')];
       if (className) {
         classNames.push(className);
@@ -124,26 +128,11 @@ const withOpenEvents = InputComponent => {
       }, eventHandlers), rest));
     }
   }
-  WithOpenEvents.propTypes = {
-    // Custom props
-    isOpen: _propTypes.default.bool,
-    hasTouchSupport: _propTypes.default.bool,
-    onOpen: _propTypes.default.func,
-    // Input props
-    className: _propTypes.default.string,
-    onClick: _propTypes.default.func,
-    onFocus: _propTypes.default.func,
-    onBlur: _propTypes.default.func,
-    onTouchEnd: _propTypes.default.func,
-    onKeyDown: _propTypes.default.func,
-    onKeyUp: _propTypes.default.func
-  };
-  WithOpenEvents.defaultProps = {
+  _defineProperty(WithOpenEvents, "displayName", void 0);
+  _defineProperty(WithOpenEvents, "defaultProps", {
     // Custom props
     isOpen: false,
-    hasTouchSupport: !!(typeof window !== 'undefined' && ('ontouchstart' in window ||
-    // eslint-disable-next-line no-undef
-    window.DocumentTouch && document instanceof DocumentTouch)),
+    hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
     onOpen: null,
     // Input props
     className: null,
@@ -153,7 +142,7 @@ const withOpenEvents = InputComponent => {
     onTouchEnd: null,
     onKeyDown: null,
     onKeyUp: null
-  };
+  });
   WithOpenEvents.displayName = (0, _bpkReactUtils.wrapDisplayName)(InputComponent, 'withOpenEvents');
   return WithOpenEvents;
 };

package/bpk-component-modal/index.js

@@ -3,17 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BpkModalV2", {
+  enumerable: true,
+  get: function () {
+    return _BpkModal.BpkModalV2;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "defaultProps", {
   enumerable: true,
   get: function () {
-    return _BpkModal.defaultProps;
+    return _BpkModal2.defaultProps;
   }
 });
 Object.defineProperty(exports, "propTypes", {
   enumerable: true,
   get: function () {
-    return _BpkModal.propTypes;
+    return _BpkModal2.propTypes;
   }
 });
 Object.defineProperty(exports, "themeAttributes", {
@@ -22,8 +28,9 @@ Object.defineProperty(exports, "themeAttributes", {
     return _themeAttributes.default;
   }
 });
+var _BpkModal = require("./src/BpkModalV2/BpkModal");
 var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-var _BpkModal = _interopRequireWildcard(require("./src/BpkModal"));
+var _BpkModal2 = _interopRequireWildcard(require("./src/BpkModal"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,5 +51,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkModal.default;
+var _default = _BpkModal2.default;
 exports.default = _default;

package/bpk-component-modal/src/BpkModalV2/BpKModal.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal{position:fixed;display:block;z-index:1}.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal:not([data-open='true']),.bpk-modal-wrapper.bpk-modal-polyfill .bpk-modal-backdrop:not([data-open='true']){display:none}.bpk-modal{top:0;right:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0 auto;padding:0;border:none;background:#eff1f2;overflow-y:scroll;inset-block-start:0;inset-inline:0;inset-inline-end:0;scrollbar-width:none;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25)}@media (min-width: 32.0625rem){.bpk-modal{width:32rem;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}.bpk-modal--full-screen-desktop{width:100%;height:100%;max-height:100%;border-radius:0}.bpk-modal--wide{width:64rem}}.bpk-modal--no-full-screen-mobile{width:90%;max-width:none;height:fit-content;max-height:90%;top:50%;transform:translateY(-50%);border-radius:.75rem;inset-block-start:50%}@media (min-width: 32.0625rem){.bpk-modal--no-full-screen-mobile{width:32rem;max-width:none}}.bpk-modal::backdrop{position:fixed;background-color:rgba(0,0,0,0.7);inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-modal::-webkit-scrollbar{display:none}.bpk-modal__header-title{padding:1rem;border-block-end:solid 0.0625rem #C2C9CD;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__header-title-container{display:flex;width:100%;justify-content:flex-start}.bpk-modal__title{padding-inline-end:1rem;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-modal__button-container{padding-block-start:1rem;padding-inline-end:1rem;display:flex;min-height:1.5rem;flex-wrap:nowrap;justify-content:flex-end;align-items:center}.bpk-modal__container{min-height:100%;padding:1rem}.bpk-modal__container--padded{padding:0}.bpk-modal__container--full-screen-desktop{height:100%}

package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts

@@ -0,0 +1,35 @@
+/*
+ * 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.
+ */
+
+/// <reference types="react" />
+import type { ReactNode } from 'react';
+
+export type Props = {
+  id: string | undefined;
+  ariaLabelledby: string;
+  children: ReactNode;
+  closeLabel: string;
+  fullScreenOnDesktop?: boolean;
+  isOpen: boolean;
+  noFullScreenOnMobile?: boolean;
+  onClose: () => void | null;
+  padded?: boolean;
+  title?: string | null;
+  wide?: boolean;
+};
+export declare const BpkModalV2: (props: Props) => JSX.Element | null;

package/bpk-component-modal/src/BpkModalV2/BpkModal.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BpkModalV2 = void 0;
+var _react = require("react");
+var _bpkComponentCloseButton = _interopRequireDefault(require("../../../bpk-component-close-button"));
+var _bpkComponentText = _interopRequireWildcard(require("../../../bpk-component-text"));
+var _bpkReactUtils = require("../../../bpk-react-utils");
+var _BpKModalModule = _interopRequireDefault(require("./BpKModal.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * 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.
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpKModalModule.default);
+const Heading = (0, _bpkReactUtils.withDefaultProps)(_bpkComponentText.default, {
+  textStyle: _bpkComponentText.TEXT_STYLES.label1,
+  tagName: 'h2',
+  className: getClassName('bpk-modal__title')
+});
+// TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
+const dialogSupported = typeof HTMLDialogElement === 'function';
+const setPageProperties = ({
+  isDialogOpen
+}) => {
+  document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
+  if (!dialogSupported) {
+    document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
+    document.body.style.width = isDialogOpen ? '100%' : 'auto';
+  }
+};
+const BpkModalV2 = props => {
+  const {
+    ariaLabelledby,
+    children,
+    closeLabel,
+    fullScreenOnDesktop,
+    id,
+    isOpen,
+    noFullScreenOnMobile,
+    onClose,
+    padded,
+    title,
+    wide
+  } = props;
+  const ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      ref.current?.showModal?.();
+      const dialog = document.getElementById(`${id}`);
+      if (dialog) {
+        dialog.addEventListener('click', event => {
+          const {
+            target
+          } = event;
+          if (target instanceof HTMLElement && target.id === `${id}`) {
+            ref.current?.close?.();
+          }
+        });
+      }
+    } else {
+      ref.current?.close?.();
+    }
+    setPageProperties({
+      isDialogOpen: isOpen
+    });
+    return () => setPageProperties({
+      isDialogOpen: false
+    });
+  }, [id, isOpen]);
+  const classNames = getClassName('bpk-modal', fullScreenOnDesktop && 'bpk-modal--full-screen-desktop', noFullScreenOnMobile && 'bpk-modal--no-full-screen-mobile', wide && 'bpk-modal--wide');
+  const contentClassNames = getClassName('bpk-modal__container', fullScreenOnDesktop && 'bpk-modal__container--full-screen-desktop', padded && 'bpk-modal__container--padded');
+  const closeButton = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentCloseButton.default, {
+      label: closeLabel,
+      onClick: onClose
+    })
+  });
+  return isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: getClassName('bpk-modal-wrapper', dialogSupported ? '' : 'bpk-modal-polyfill'),
+    children: [!dialogSupported && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: `${id}-polyfill`,
+      className: getClassName('bpk-modal-backdrop'),
+      "data-open": isOpen
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("dialog", {
+      id: id,
+      className: classNames,
+      onClose: onClose,
+      "aria-labelledby": ariaLabelledby,
+      "data-open": isOpen,
+      ref: ref,
+      children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: getClassName('bpk-modal__header-title'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: getClassName('bpk-modal__header-title-container'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+            children: title
+          })
+        }), closeButton]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: getClassName('bpk-modal__button-container'),
+        children: closeButton
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: contentClassNames,
+        children: children
+      })]
+    })]
+  }) : null;
+};
+exports.BpkModalV2 = BpkModalV2;

package/bpk-component-rtl-toggle/index.d.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 BpkRtlToggle from './src/BpkRtlToggle';
+import updateOnDirectionChange from './src/updateOnDirectionChange';
+
+export default BpkRtlToggle;
+export { updateOnDirectionChange };

package/bpk-component-rtl-toggle/src/BpkRtlToggle.d.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { Component } from 'react';
+
+type State = {
+  direction: string;
+};
+type Props = {
+  className?: string | null;
+};
+type InteractionEvents = KeyboardEvent | MouseEvent | TouchEvent;
+declare class BpkRtlToggle extends Component<Props, State> {
+  constructor(props: Props);
+
+  componentDidMount(): void;
+
+  componentWillUnmount(): void;
+
+  handleKeyDown: (e: KeyboardEvent) => void;
+
+  toggleRtl: (e: InteractionEvents) => void;
+
+  render(): JSX.Element;
+}
+export default BpkRtlToggle;

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _bpkComponentLink = require("../../bpk-component-link");
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
@@ -28,12 +26,17 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
                                                                                                                                                                                                                                                                                                                                                                                            * 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.
-                                                                                                                                                                                                                                                                                                                                                                                           */
-const getDirection = () => (0, _utils.getHtmlElement)().dir || _utils.DIRECTIONS.LTR;
+                                                                                                                                                                                                                                                                                                                                                                                           */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+const getDirection = () => {
+  const htmlElement = (0, _utils.getHtmlElement)();
+  return htmlElement instanceof HTMLElement ? htmlElement.dir : _utils.DIRECTIONS.LTR;
+};
 const setDirection = direction => {
   const htmlElement = (0, _utils.getHtmlElement)();
-  htmlElement.dir = direction;
-  htmlElement.dispatchEvent(new Event(_utils.DIRECTION_CHANGE_EVENT));
+  if (htmlElement instanceof HTMLElement) {
+    htmlElement.dir = direction;
+    htmlElement.dispatchEvent(new Event(_utils.DIRECTION_CHANGE_EVENT));
+  }
 };
 class BpkRtlToggle extends _react.Component {
   constructor(props) {
@@ -74,11 +77,5 @@ class BpkRtlToggle extends _react.Component {
     });
   }
 }
-BpkRtlToggle.propTypes = {
-  className: _propTypes.default.string
-};
-BpkRtlToggle.defaultProps = {
-  className: null
-};
 var _default = BpkRtlToggle;
 exports.default = _default;

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.d.ts

@@ -0,0 +1,151 @@
+/*
+ * 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 type { ComponentType } from 'react';
+
+declare const updateOnDirectionChange: (
+  EnhancedComponent: ComponentType<any> | string,
+) => {
+  new (props: {} | Readonly<{}>): {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDirectionChange: () => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<{}>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<{}> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    shouldComponentUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  new (props: {}, context: any): {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onDirectionChange: () => void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<{}>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<{}> &
+      Readonly<{
+        children?: import('react').ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: import('react').ReactInstance;
+    };
+    shouldComponentUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentDidCatch?(
+      error: Error,
+      errorInfo: import('react').ErrorInfo,
+    ): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<{}>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(
+      nextProps: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<{}>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  displayName: string;
+  contextType?: import('react').Context<any> | undefined;
+};
+export default updateOnDirectionChange;

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js

@@ -38,15 +38,22 @@ const updateOnDirectionChange = EnhancedComponent => {
       });
     }
     componentDidMount() {
-      (0, _utils.getHtmlElement)().addEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      const htmlElement = (0, _utils.getHtmlElement)();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.addEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      }
     }
     componentWillUnmount() {
-      (0, _utils.getHtmlElement)().removeEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      const htmlElement = (0, _utils.getHtmlElement)();
+      if (htmlElement instanceof HTMLElement) {
+        htmlElement.removeEventListener(_utils.DIRECTION_CHANGE_EVENT, this.onDirectionChange, false);
+      }
     }
     render() {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(EnhancedComponent, _objectSpread({}, this.props));
     }
   }
+  _defineProperty(UpdateOnDirectionChange, "displayName", void 0);
   UpdateOnDirectionChange.displayName = (0, _bpkReactUtils.wrapDisplayName)(EnhancedComponent, 'updateOnDirectionChange');
   return UpdateOnDirectionChange;
 };

package/bpk-component-rtl-toggle/src/utils.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+declare const DIRECTIONS: {
+  readonly LTR: 'ltr';
+  readonly RTL: 'rtl';
+};
+declare const DIRECTION_CHANGE_EVENT = 'bpkchangedirection';
+declare const getHtmlElement: () => HTMLElement | null | {};
+export { DIRECTIONS, DIRECTION_CHANGE_EVENT, getHtmlElement };