@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-e625869e5-20251002

package/dist/cjs/base/ui/color_palette.js

@@ -1,196 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ColorPalette = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _error_utils = require("../../shared/error_utils");
-var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
-var _baymax_utils = require("./baymax_utils");
-var _box = _interopRequireDefault(require("./box"));
-var _icon = _interopRequireDefault(require("./icon"));
-var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
-var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
-var _system = require("./system");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @module @airtable/blocks/ui: ColorPalette */ /** */
-
-const MIN_COLOR_SQUARE_SIZE = 16;
-const DEFAULT_COLOR_SQUARE_SIZE = 24;
-const MAX_COLOR_SQUARE_SIZE = 32;
-
-// TODO: it's confusing that this expects color names, but other components
-// expect a CSS color string.
-
-/**
- * Style props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
-
-/**
- * Props shared between the {@link ColorPalette} and {@link ColorPaletteSynced} components.
- */
-
-/**
- * Props for the {@link ColorPalette} component. Also accepts:
- * * {@link ColorPaletteStyleProps}
- *
- * @docsPath UI/components/ColorPalette
- */
-
-/** @hidden */
-
-/**
- * A color selection component. Accepts a list of `allowedColors` to be displayed
- * as selectable color squares.
- *
- * [[ Story id="colorpalette--example" title="Color palette example" ]]
- *
- * @component
- * @docsPath UI/components/ColorPalette
- */
-class ColorPalette extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    squareMargin: 4,
-    className: '',
-    style: {}
-  };
-  /** @internal */
-
-  /** @internal */
-
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._detectElementResize = (0, _create_detect_element_resize.default)();
-    this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
-    this._setColorSquareSize = this._setColorSquareSize.bind(this);
-    this.state = {
-      squareSize: DEFAULT_COLOR_SQUARE_SIZE
-    };
-  }
-  /** @hidden */
-  componentDidMount() {
-    if (this._colorPaletteContainerRef.current) {
-      this._detectElementResize.addResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-    }
-    this._setColorSquareSize();
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    if (this._colorPaletteContainerRef.current) {
-      this._detectElementResize.removeResizeListener(this._colorPaletteContainerRef.current, this._setColorSquareSize);
-    }
-  }
-  /** @hidden */
-  componentDidUpdate(prevProps) {
-    if (this.props.allowedColors.length !== prevProps.allowedColors.length) {
-      this._setColorSquareSize();
-    }
-  }
-  // Attempts to fit all `allowedColors` onto one line by adjusting color square size.
-  /** @internal */
-  _setColorSquareSize() {
-    const {
-      squareMargin
-    } = this.props;
-    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    (0, _error_utils.invariant)(this._colorPaletteContainerRef.current, 'No container to set color square size');
-
-    // Calculates the size of each square required to fit `numSquares` squares on one line.
-    const calculateSquareSize = numSquares => {
-      return (containerWidth - squareMargin * 2 * numSquares) / numSquares;
-    };
-    const containerWidth = this._colorPaletteContainerRef.current.getBoundingClientRect().width;
-    const numColors = this.props.allowedColors.length;
-    const calculatedSquareSize = calculateSquareSize(numColors);
-    let squareSize;
-    // If we can't fit them all in one line, find the closest square size to the default that
-    // fills the row and let flexbox wrap the remainder
-    if (calculatedSquareSize < MIN_COLOR_SQUARE_SIZE) {
-      const numColorsThatWillFitAsDefaultSize = Math.round((containerWidth + 2 * squareMargin) / (DEFAULT_COLOR_SQUARE_SIZE + 2 * squareMargin));
-      squareSize = squareSize = numColorsThatWillFitAsDefaultSize === 0 ? DEFAULT_COLOR_SQUARE_SIZE : calculateSquareSize(numColorsThatWillFitAsDefaultSize);
-    } else {
-      squareSize = Math.min(MAX_COLOR_SQUARE_SIZE, calculatedSquareSize);
-    }
-    this.setState({
-      squareSize
-    });
-  }
-  /** @internal */
-  _onChange(color) {
-    if (this.props.onChange) {
-      this.props.onChange(color);
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      color,
-      allowedColors,
-      squareMargin,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-      className,
-      style,
-      disabled
-    } = this.props;
-    const {
-      squareSize
-    } = this.state;
-    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    return /*#__PURE__*/React.createElement(_box.default
-    // TODO (stephen): remove tooltip anchor props
-    , {
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      onClick: onClick,
-      className: className,
-      style: style,
-      overflow: "hidden"
-    }, /*#__PURE__*/React.createElement(_box.default, {
-      ref: this._colorPaletteContainerRef,
-      display: "flex",
-      flexWrap: "wrap"
-      // Add a negative margin to offset the margin of each swatch,
-      // so the color swatches are flush with the outer container.
-      ,
-      margin: `${-squareMargin}px`
-    }, allowedColors.map(allowedColor => /*#__PURE__*/React.createElement("label", {
-      key: allowedColor,
-      onClick: disabled ? undefined : () => this._onChange(allowedColor),
-      style: {
-        backgroundColor: _color_utils.default.getHexForColor(allowedColor) || undefined,
-        height: squareSize,
-        width: squareSize,
-        margin: squareMargin
-      },
-      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('rounded flex items-center justify-center'), {
-        [(0, _baymax_utils.baymax)('pointer link-quiet')]: !disabled,
-        [(0, _baymax_utils.baymax)('quieter')]: !!disabled
-      })
-    }, allowedColor === color && /*#__PURE__*/React.createElement(_icon.default, {
-      name: "check",
-      size: squareSize,
-      className: (0, _baymax_utils.baymax)(_color_utils.default.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
-    })))));
-  }
-}
-exports.ColorPalette = ColorPalette;
-var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, {});

package/dist/cjs/base/ui/color_palette_synced.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _error_utils = require("../../shared/error_utils");
-var _synced = _interopRequireDefault(require("./synced"));
-var _color_palette = _interopRequireDefault(require("./color_palette"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: ColorPalette */ /** */
-/**
- * Props for the {@link ColorPaletteSynced} component. Also accepts:
- * * {@link ColorPaletteStyleProps}
- *
- * @docsPath UI/components/ColorPaletteSynced
- * @groupPath UI/components/ColorPalette
- */
-
-/**
- * A wrapper around the {@link ColorPalette} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="colorpalette--synced-example" title="Synced color palette example" ]]
- *
- * @component
- * @docsPath UI/components/ColorPaletteSynced
- * @groupPath UI/components/ColorPalette
- */
-class ColorPaletteSynced extends React.Component {
-  /** @hidden */
-  render() {
-    const {
-      globalConfigKey,
-      disabled,
-      onChange,
-      ...restOfProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(_synced.default, {
-      globalConfigKey: globalConfigKey,
-      render: _ref => {
-        let {
-          value,
-          canSetValue,
-          setValue
-        } = _ref;
-        let currentColor;
-        if (typeof value === 'string' || value === null || value === undefined) {
-          currentColor = value;
-        } else {
-          (0, _error_utils.spawnError)('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
-        }
-        return /*#__PURE__*/React.createElement(_color_palette.default, _extends({}, restOfProps, {
-          color: currentColor,
-          onChange: newValue => {
-            setValue(newValue);
-            if (onChange) {
-              onChange(newValue);
-            }
-          },
-          disabled: disabled || !canSetValue
-        }));
-      }
-    });
-  }
-}
-var _default = exports.default = ColorPaletteSynced;

package/dist/cjs/base/ui/confirmation_dialog.js

@@ -1,103 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _dialog = _interopRequireDefault(require("./dialog"));
-var _heading = _interopRequireDefault(require("./heading"));
-var _text = _interopRequireDefault(require("./text"));
-var _button = _interopRequireDefault(require("./button"));
-var _box = _interopRequireDefault(require("./box"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: Dialog */ /** */
-/**
- * Props for the {@link ConfirmationDialog} component. Also accepts:
- * * {@link DialogStyleProps}
- *
- * @noInheritDoc
- * @docsPath UI/components/ConfirmationDialog
- */
-
-/**
- * A styled modal dialog component that prompts the user to confirm or cancel an action.
- *
- * [[ Story id="confirmationdialog--example" title="Confirmation dialog example" ]]
- *
- * By default, this component will focus the "Confirm" button on mount, so that pressing
- * the Enter key will confirm the action.
- *
- * @component
- * @docsPath UI/components/ConfirmationDialog
- */
-class ConfirmationDialog extends React.Component {
-  /** @hidden */
-  static defaultProps = {
-    cancelButtonText: 'Cancel',
-    confirmButtonText: 'Confirm',
-    isConfirmActionDangerous: false,
-    isCancelButtonDisabled: false,
-    isConfirmButtonDisabled: false,
-    width: '400px'
-  };
-  /** @internal */
-  _confirmButtonRef = /*#__PURE__*/React.createRef();
-  /** @hidden */
-  componentDidMount() {
-    if (this._confirmButtonRef.current !== null) {
-      this._confirmButtonRef.current.focus();
-    }
-  }
-  /** @hidden */
-  render() {
-    const {
-      title,
-      body,
-      cancelButtonText,
-      confirmButtonText,
-      isConfirmActionDangerous,
-      className,
-      style,
-      backgroundClassName,
-      backgroundStyle,
-      onCancel,
-      onConfirm,
-      isCancelButtonDisabled,
-      isConfirmButtonDisabled,
-      ...restOfProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(_dialog.default, _extends({
-      onClose: onCancel,
-      className: className,
-      style: style,
-      backgroundClassName: backgroundClassName,
-      backgroundStyle: backgroundStyle
-    }, restOfProps), /*#__PURE__*/React.createElement(_dialog.default.CloseButton, null), /*#__PURE__*/React.createElement(_heading.default, {
-      size: "small"
-    }, title), typeof body === 'string' ? /*#__PURE__*/React.createElement(_text.default, {
-      variant: "paragraph"
-    }, body) : body, /*#__PURE__*/React.createElement(_box.default, {
-      display: "flex",
-      flexDirection: "row-reverse",
-      alignItems: "center",
-      justifyContent: "start",
-      width: "100%",
-      marginTop: 3
-    }, /*#__PURE__*/React.createElement(_button.default, {
-      ref: this._confirmButtonRef,
-      onClick: onConfirm,
-      variant: isConfirmActionDangerous ? 'danger' : 'primary',
-      disabled: isConfirmButtonDisabled
-    }, confirmButtonText), /*#__PURE__*/React.createElement(_button.default, {
-      onClick: onCancel,
-      variant: "secondary",
-      alignSelf: "end",
-      marginRight: 2,
-      disabled: isCancelButtonDisabled
-    }, cancelButtonText)));
-  }
-}
-var _default = exports.default = ConfirmationDialog;

package/dist/cjs/base/ui/control_sizes.js

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ControlSize = void 0;
-exports.useButtonSize = useButtonSize;
-exports.useInputSize = useInputSize;
-exports.useSelectButtonsSize = useSelectButtonsSize;
-exports.useSelectSize = useSelectSize;
-exports.useSwitchSize = useSwitchSize;
-var _core = require("@styled-system/core");
-var _private_utils = require("../../shared/private_utils");
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _get_style_props_for_responsive_prop = _interopRequireDefault(require("./system/utils/get_style_props_for_responsive_prop"));
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _system = require("./system");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** @module @airtable/blocks/ui/system: Control sizes */ /** */
-
-/**
- * Sizes for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
- */
-
-const ControlSize = exports.ControlSize = (0, _private_utils.createEnum)('small', 'default', 'large');
-
-/**
- * Size prop for the {@link Button}, {@link Input}, {@link Select}, {@link SelectButtons}, and {@link Switch} components.
- */
-
-/** @internal */
-function useButtonSize(controlSizeProp) {
-  const {
-    buttonSizes
-  } = (0, _use_theme.default)();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = buttonSizes[controlSizeProp];
-  } else {
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, buttonSizes);
-  }
-  return (0, _use_styled_system.default)(styleProps);
-}
-
-// For selects we create a custom style parser that includes `backgroundPosition`.
-const selectSizeStyleParser = (0, _core.compose)(_system.allStylesParser, (0, _core.system)({
-  backgroundPosition: true
-}));
-
-/** @internal */
-function useSelectSize(controlSizeProp) {
-  const {
-    selectSizes
-  } = (0, _use_theme.default)();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = selectSizes[controlSizeProp];
-  } else {
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, selectSizes);
-  }
-  return (0, _use_styled_system.default)(styleProps, selectSizeStyleParser);
-}
-
-/** @internal */
-function useInputSize(controlSizeProp) {
-  const {
-    inputSizes
-  } = (0, _use_theme.default)();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = inputSizes[controlSizeProp];
-  } else {
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, inputSizes);
-  }
-  return (0, _use_styled_system.default)(styleProps);
-}
-
-/** @internal */
-function useSelectButtonsSize(controlSizeProp) {
-  const {
-    selectButtonsSizes
-  } = (0, _use_theme.default)();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = selectButtonsSizes[controlSizeProp];
-  } else {
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, selectButtonsSizes);
-  }
-  return (0, _use_styled_system.default)(styleProps);
-}
-
-/** @internal */
-function useSwitchSize(controlSizeProp) {
-  const {
-    switchSizes
-  } = (0, _use_theme.default)();
-  let styleProps;
-  if (typeof controlSizeProp === 'string') {
-    styleProps = switchSizes[controlSizeProp];
-  } else {
-    styleProps = (0, _get_style_props_for_responsive_prop.default)(controlSizeProp, switchSizes);
-  }
-  return (0, _use_styled_system.default)(styleProps);
-}

package/dist/cjs/base/ui/create_detect_element_resize.js

@@ -1,203 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createDetectElementResize;
-// @ts-nocheck
-
-// Detect Element Resize.
-// https://github.com/sdecima/javascript-detect-element-resize
-// Sebastian Decima
-//
-// Forked from version 0.5.3; includes the following modifications:
-// 1) Guard against unsafe 'window' and 'document' references (to support SSR).
-// 2) Defer initialization code via a top-level function wrapper (to support SSR).
-// 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
-// 4) Add nonce for style element.
-//
-// NOTE (jb): ported from react-virtualized to conform to our eslint rules.
-// https://github.com/bvaughn/react-virtualized/blob/master/source/vendor/detectElementResize.js
-//
-// TODO: make this file conform to our styleguide.
-/**
- * @internal
- */
-function createDetectElementResize(nonce) {
-  // Check `document` and `window` in case of server-side rendering
-  var _window;
-  if (typeof window !== 'undefined') {
-    _window = window;
-  } else if (typeof self !== 'undefined') {
-    _window = self;
-  } else {
-    _window = this; // eslint-disable-line consistent-this
-  }
-  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
-  var animationName;
-  var animationKeyframes;
-  var animationStyle;
-  var resetTriggers;
-  var checkTriggers;
-  var scrollListener;
-  var animation;
-  var keyframeprefix;
-  var animationstartevent;
-  var domPrefixes;
-  var startEvents;
-  var pfx;
-  if (!attachEvent) {
-    var requestFrame = function () {
-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
-        return _window.setTimeout(fn, 20);
-      };
-      return function (fn) {
-        return raf(fn);
-      };
-    }();
-    var cancelFrame = function () {
-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
-      return function (id) {
-        return cancel(id);
-      };
-    }();
-    resetTriggers = function (element) {
-      var triggers = element.__resizeTriggers__,
-        expand = triggers.firstElementChild,
-        contract = triggers.lastElementChild,
-        expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + 'px';
-      expandChild.style.height = expand.offsetHeight + 1 + 'px';
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
-    checkTriggers = function (element) {
-      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
-    };
-    scrollListener = function (e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
-        return;
-      }
-      var element = this; // eslint-disable-line consistent-this
-      resetTriggers(this);
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
-      }
-      this.__resizeRAF__ = requestFrame(function () {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-          element.__resizeListeners__.forEach(function (fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
-
-    /* Detect CSS Animations support to detect element display/re-attach */
-    animation = false;
-    keyframeprefix = '';
-    animationstartevent = 'animationstart';
-    domPrefixes = 'Webkit Moz O ms'.split(' ');
-    startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' ');
-    pfx = '';
-
-    // eslint-disable-next-line no-lone-blocks
-    {
-      var elm = document.createElement('fakeelement');
-      if (elm.style.animationName !== undefined) {
-        animation = true;
-      }
-      if (animation === false) {
-        for (var i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-            pfx = domPrefixes[i];
-            keyframeprefix = '-' + pfx.toLowerCase() + '-';
-            animationstartevent = startEvents[i];
-            animation = true;
-            break;
-          }
-        }
-      }
-    }
-    animationName = 'resizeanim';
-    animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-    animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
-  }
-  var createStyles = function () {
-    if (!document.getElementById('detectElementResize')) {
-      // opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-        head = document.head || document.getElementsByTagName('head')[0],
-        style = document.createElement('style');
-      style.id = 'detectElementResize';
-      style.type = 'text/css';
-      if (nonce !== null) {
-        style.setAttribute('nonce', nonce);
-      }
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-      head.appendChild(style);
-    }
-  };
-  var addResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.attachEvent('onresize', fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        var elementStyle = _window.getComputedStyle(element);
-        if (elementStyle && elementStyle.position === 'static') {
-          element.style.position = 'relative';
-        }
-        createStyles();
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = document.createElement('div')).className = 'resize-triggers';
-        element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener('scroll', scrollListener, true);
-
-        /* Listen for a css animation to detect element display/re-attach */
-        if (animationstartevent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName === animationName) {
-              resetTriggers(element);
-            }
-          };
-          element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-        }
-      }
-      element.__resizeListeners__.push(fn);
-    }
-  };
-  var removeResizeListener = function (element, fn) {
-    if (attachEvent) {
-      element.detachEvent('onresize', fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener('scroll', scrollListener, true);
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {
-          // Preact compat; see developit/preact-compat/issues/228
-        }
-      }
-    }
-  };
-  return {
-    addResizeListener,
-    removeResizeListener
-  };
-}