@skbkontur/react-ui 0.0.0-d09e1235b2 → 0.0.0-d4e280859d

package/components/Sticky/Sticky/Sticky.js

@@ -0,0 +1,202 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class, _Sticky;
+import React from 'react';
+import PropTypes from 'prop-types';
+import shallowEqual from 'shallowequal';
+import { globalObject } from '@skbkontur/global-object';
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { isFunction } from "../../../lib/utils";
+import { ZIndex } from "../../../internal/ZIndex";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { styles } from "../Sticky.styles";
+var MAX_REFLOW_RETRIES = 5;
+export var StickyDataTids = {
+  root: 'Sticky__root'
+};
+
+/**
+ * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
+ * Это полезно для создания "прилипающих" элементов, которые остаются видимыми при прокрутке содержимого.
+ */
+export var Sticky = rootNode(_class = (_Sticky = /*#__PURE__*/function (_React$Component) {
+  function Sticky() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Sticky.defaultProps);
+    _this.state = {
+      fixed: false,
+      deltaHeight: 0,
+      stopped: false,
+      relativeTop: 0
+    };
+    _this.layoutSubscription = {
+      remove: null
+    };
+    _this.reflowCounter = 0;
+    _this.refWrapper = function (ref) {
+      return _this.wrapper = ref;
+    };
+    _this.refInner = function (ref) {
+      return _this.inner = ref;
+    };
+
+    /**
+     * Пересчитать габариты и позицию залипшего элемента
+     *
+     * @public
+     */
+    _this.reflow = function () {
+      var _globalObject$documen;
+      if (!((_globalObject$documen = globalObject.document) != null && _globalObject$documen.documentElement)) {
+        throw Error('There is no "documentElement" in document');
+      }
+      var windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;
+      if (!_this.wrapper || !_this.inner) {
+        return;
+      }
+      var _getDOMRect = getDOMRect(_this.wrapper),
+        top = _getDOMRect.top,
+        bottom = _getDOMRect.bottom,
+        left = _getDOMRect.left,
+        width = _getDOMRect.width;
+      var _getDOMRect2 = getDOMRect(_this.inner),
+        height = _getDOMRect2.height;
+      var _this$props = _this.props,
+        getStop = _this$props.getStop,
+        side = _this$props.side;
+      var _this$state = _this.state,
+        prevFixed = _this$state.fixed,
+        _this$state$height = _this$state.height,
+        prevHeight = _this$state$height === void 0 ? height : _this$state$height;
+      var offset = _this.getProps().offset;
+      var fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;
+      _this.setState({
+        fixed: fixed,
+        left: left
+      });
+      if (fixed && !prevFixed) {
+        _this.setState({
+          width: width,
+          height: height
+        });
+      }
+      if (fixed) {
+        _this.setState({
+          width: width
+        });
+        var stop = getStop && getStop();
+        if (stop) {
+          var deltaHeight = prevHeight - height;
+          var stopRect = getDOMRect(stop);
+          var outerHeight = height + offset;
+          var stopped = false;
+          var relativeTop = 0;
+          if (side === 'top') {
+            stopped = stopRect.top - outerHeight < 0;
+            relativeTop = stopRect.top - prevHeight - top;
+          } else {
+            stopped = stopRect.bottom + outerHeight > windowHeight;
+            relativeTop = stopRect.bottom - top;
+          }
+          _this.setState({
+            relativeTop: relativeTop,
+            deltaHeight: deltaHeight,
+            stopped: stopped
+          });
+        }
+      }
+    };
+    return _this;
+  }
+  _inheritsLoose(Sticky, _React$Component);
+  var _proto = Sticky.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.reflow();
+    this.layoutSubscription = LayoutEvents.addListener(this.reflow);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.layoutSubscription.remove) {
+      this.layoutSubscription.remove();
+    }
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {
+      if (this.reflowCounter < MAX_REFLOW_RETRIES) {
+        LayoutEvents.emit();
+        this.reflowCounter += 1;
+        return;
+      }
+    }
+    this.reflowCounter = 0;
+  };
+  _proto.render = function render() {
+    var _cx;
+    var children = this.props.children;
+    var side = this.props.side;
+    var offset = this.getProps().offset;
+    var _this$state2 = this.state,
+      fixed = _this$state2.fixed,
+      stopped = _this$state2.stopped,
+      relativeTop = _this$state2.relativeTop,
+      deltaHeight = _this$state2.deltaHeight,
+      width = _this$state2.width,
+      height = _this$state2.height,
+      left = _this$state2.left;
+    var innerStyle = {};
+    if (fixed) {
+      if (stopped) {
+        innerStyle.top = relativeTop;
+        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;
+      } else {
+        innerStyle.width = width;
+        innerStyle[side] = offset;
+        innerStyle.left = left;
+      }
+    }
+    if (isFunction(children)) {
+      children = children(fixed);
+    }
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": StickyDataTids.root,
+      ref: this.refWrapper,
+      className: styles.wrapper()
+    }, /*#__PURE__*/React.createElement(ZIndex, {
+      priority: "Sticky",
+      applyZIndex: fixed,
+      className: cx(styles.inner(), (_cx = {}, _cx[styles.fixed()] = fixed && !stopped, _cx[styles.stopped()] = stopped, _cx)),
+      style: innerStyle,
+      wrapperRef: this.refInner
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.container()
+    }, children)), fixed && !stopped ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: width,
+        height: height
+      }
+    }) : null));
+  };
+  return Sticky;
+}(React.Component), _Sticky.__KONTUR_REACT_UI__ = 'Sticky', _Sticky.displayName = 'Sticky', _Sticky.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /**
+  * Функция, которая возвращает DOM-элемент, который нельзя пересекать.
+  */
+  getStop: PropTypes.func,
+  /**
+  * Отступ от границы в пикселях
+  */
+  offset: PropTypes.number,
+  side: PropTypes.oneOf(['top', 'bottom']).isRequired
+}, _Sticky.defaultProps = {
+  offset: 0
+}, _Sticky)) || _class;

package/components/Sticky/Sticky/Sticky.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PropTypes","shallowEqual","globalObject","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","getDOMRect","createPropsGetter","styles","MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","_class","_Sticky","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","_globalObject$documen","document","documentElement","Error","windowHeight","innerHeight","clientHeight","_getDOMRect","top","bottom","left","width","_getDOMRect2","height","_this$props","props","getStop","side","_this$state","prevFixed","_this$state$height","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","_inheritsLoose","_proto","prototype","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","_cx","children","_this$state2","innerStyle","createElement","_extends","rootNodeRef","setRootNode","className","priority","applyZIndex","style","wrapperRef","container","Component","__KONTUR_REACT_UI__","displayName","propTypes","oneOfType","node","func","number","oneOf","isRequired"],"sources":["Sticky.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  /** Задает сторону залипания. */\n  side: 'top' | 'bottom';\n\n  /** Задает отступ от края экрана в пикселях, на который сдвигается элемент в залипшем состоянии.\n   * @default 0 */\n  offset?: number;\n\n  /** Задает функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n  getStop?: () => Nullable<HTMLElement>;\n\n  /** @ignore */\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания \"прилипающих\" элементов, которые остаются видимыми при прокрутке содержимого.\n */\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n  public static displayName = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    if (!globalObject.document?.documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Sticky/Sticky/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Sticky/Sticky.js",
+  "module": "Sticky",
+  "types": "../Sticky.d.ts",
+  "sideEffects": false
+}

package/components/Sticky/Sticky.d.ts

@@ -1,20 +1,17 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
-export interface StickyProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface StickyProps extends Omit<CommonProps, 'children'> {
+    /** Задает сторону залипания. */
     side: 'top' | 'bottom';
-    /**
-     * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии
-     * @default 0
-     */
-    offset: number;
+    /** Задает отступ от края экрана в пикселях, на который сдвигается элемент в залипшем состоянии.
+     * @default 0 */
+    offset?: number;
+    /** Задает функцию, которая возвращает DOM-элемент, который нельзя пересекать. */
     getStop?: () => Nullable<HTMLElement>;
+    /** @ignore */
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
-    /**
-     * @deprecated работа с margin у детей возможна без указания этого флага
-     * @default false
-     */
-    allowChildWithMargins?: boolean;
 }
 export interface StickyState {
     fixed: boolean;
@@ -25,10 +22,19 @@ export interface StickyState {
     stopped: boolean;
     relativeTop: number;
 }
-export default class Sticky extends React.Component<StickyProps, StickyState> {
+export declare const StickyDataTids: {
+    readonly root: "Sticky__root";
+};
+type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
+/**
+ * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
+ * Это полезно для создания "прилипающих" элементов, которые остаются видимыми при прокрутке содержимого.
+ */
+export declare class Sticky extends React.Component<StickyProps, StickyState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
         /**
          * Функция, которая возвращает DOM-элемент, который нельзя пересекать.
          */
@@ -38,21 +44,26 @@ export default class Sticky extends React.Component<StickyProps, StickyState> {
          */
         offset: PropTypes.Requireable<number>;
         side: PropTypes.Validator<string>;
-        allowChildWithMargins: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        offset: number;
     };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: StickyState;
     private wrapper;
     private inner;
     private layoutSubscription;
     private reflowCounter;
+    private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: StickyProps, prevState: StickyState): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private refWrapper;
     private refInner;
-    private reflow;
+    /**
+     * Пересчитать габариты и позицию залипшего элемента
+     *
+     * @public
+     */
+    reflow: () => void;
 }
+export {};

package/components/Sticky/Sticky.md

@@ -0,0 +1,28 @@
+### Базовый пример
+```jsx harmony
+const style = {
+  padding: 10,
+  background: '#f99',
+};
+
+let stop = null;
+
+<div>
+  <Sticky side="top" getStop={() => stop}>
+    {fixed => (
+      <div style={style}>
+        Small loan of a million dollars
+        {fixed ? ' fixed' : <div>not fixed</div>}
+      </div>
+    )}
+  </Sticky>
+  Great
+  <div style={{ height: 1000 }} />
+  <div ref={el => (stop = el)} style={{ borderTop: '1px solid' }} />
+  <div style={{ height: 1000 }} />
+  <Sticky side="bottom" getStop={() => stop} offset={20}>
+    <div style={style}>Make America Great Again</div>
+  </Sticky>
+  <div style={{ height: 100 }} />
+</div>;
+```

package/components/Sticky/Sticky.styles/Sticky.styles.js

@@ -0,0 +1,20 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  wrapper: function wrapper() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: flex;\n    "])));
+  },
+  inner: function inner() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      width: 100%;\n    "])));
+  },
+  fixed: function fixed() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n    "])));
+  },
+  stopped: function stopped() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+  },
+  container: function container() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      flex: auto;\n      width: 100%;\n    "])));
+  }
+});

package/components/Sticky/Sticky.styles/Sticky.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","memoizeStyle","styles","wrapper","_templateObject","_taggedTemplateLiteralLoose","inner","_templateObject2","fixed","_templateObject3","stopped","_templateObject4","container","_templateObject5"],"sources":["Sticky.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;EACDC,KAAK,WAAAA,MAAA,EAAG;IACN,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;;EAEDG,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;EAGZ,CAAC;;EAEDK,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;EAGZ,CAAC;;EAEDO,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;;EAIZ;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Sticky/Sticky.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Sticky/Sticky.styles.js",
+  "module": "Sticky.styles",
+  "types": "../Sticky.styles.d.ts",
+  "sideEffects": false
+}

package/components/Sticky/Sticky.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: {
+    wrapper(): string;
+    inner(): string;
+    fixed(): string;
+    stopped(): string;
+    container(): string;
+};

package/components/Sticky/__creevey__/Sticky.creevey/Sticky.creevey.js

@@ -0,0 +1,215 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { story, kind, test } from 'creevey';
+import { delay } from "../../../../lib/utils";
+kind('Sticky', function () {
+  story('WideContainer', function () {
+    test('fixed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return this.browser.executeScript(function () {
+              var stickyContent = window.document.querySelector('[data-tid="stickyContent"]');
+              var nonStickyText = window.document.querySelector('[data-tid="nonStickyText"]');
+              var scrollXOffset = nonStickyText.getBoundingClientRect().width / 2;
+              var scrollYOffset = stickyContent.getBoundingClientRect().height / 2;
+              window.scrollTo(scrollXOffset, scrollYOffset);
+            });
+          case 2:
+            _context.next = 4;
+            return delay(1000);
+          case 4:
+            _context.t0 = this;
+            _context.next = 7;
+            return this.browser.takeScreenshot();
+          case 7:
+            _context.t1 = _context.sent;
+            _context.next = 10;
+            return _context.t0.expect.call(_context.t0, _context.t1).to.matchImage('fixed');
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, this);
+    })));
+  });
+  story('Top', function () {
+    test('top', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return delay(1000);
+          case 2:
+            _context2.t0 = this;
+            _context2.next = 5;
+            return this.browser.takeScreenshot();
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return _context2.t0.expect.call(_context2.t0, _context2.t1).to.matchImage('top');
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, this);
+    })));
+    test('fixed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return this.browser.executeScript(function () {
+              var stickyStop = window.document.querySelector('[data-tid="stickyStop"]');
+              var scrollOffset = stickyStop.getBoundingClientRect().top - window.innerHeight / 2;
+              window.scrollTo(0, scrollOffset);
+            });
+          case 2:
+            _context3.next = 4;
+            return delay(1000);
+          case 4:
+            _context3.t0 = this;
+            _context3.next = 7;
+            return this.browser.takeScreenshot();
+          case 7:
+            _context3.t1 = _context3.sent;
+            _context3.next = 10;
+            return _context3.t0.expect.call(_context3.t0, _context3.t1).to.matchImage('fixed');
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, this);
+    })));
+    test('stoped', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return this.browser.executeScript(function () {
+              var stickyStop = window.document.querySelector('[data-tid="stickyStop"]');
+              stickyStop.scrollIntoView();
+            });
+          case 2:
+            _context4.next = 4;
+            return this.browser.executeScript(function () {
+              var stickyContent = window.document.querySelector('[data-tid="stickyContent"]');
+              var scrollOffset = pageYOffset - stickyContent.getBoundingClientRect().height / 2;
+              window.scrollTo(0, scrollOffset);
+            });
+          case 4:
+            _context4.next = 6;
+            return delay(1000);
+          case 6:
+            _context4.t0 = this;
+            _context4.next = 9;
+            return this.browser.takeScreenshot();
+          case 9:
+            _context4.t1 = _context4.sent;
+            _context4.next = 12;
+            return _context4.t0.expect.call(_context4.t0, _context4.t1).to.matchImage('stoped');
+          case 12:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4, this);
+    })));
+  });
+  story('Bottom', function (_ref5) {
+    var setStoryParameters = _ref5.setStoryParameters;
+    setStoryParameters({
+      skip: {
+        'flacky stopped position': {
+          "in": ['firefox', 'firefox8px', 'firefoxDark'],
+          tests: 'stoped'
+        }
+      }
+    });
+    test('bottom', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            _context5.next = 2;
+            return this.browser.executeScript(function () {
+              window.scrollTo(0, 9999);
+            });
+          case 2:
+            _context5.next = 4;
+            return delay(1000);
+          case 4:
+            _context5.t0 = this;
+            _context5.next = 7;
+            return this.browser.takeScreenshot();
+          case 7:
+            _context5.t1 = _context5.sent;
+            _context5.next = 10;
+            return _context5.t0.expect.call(_context5.t0, _context5.t1).to.matchImage('bottom');
+          case 10:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5, this);
+    })));
+    test('fixed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _context6.next = 2;
+            return this.browser.executeScript(function () {
+              var sticky = window.document.querySelector('[data-comp-name~="Sticky"]');
+              var scrollOffset = sticky.getBoundingClientRect().top - window.innerHeight;
+              window.scrollTo(0, scrollOffset);
+            });
+          case 2:
+            _context6.next = 4;
+            return delay(1000);
+          case 4:
+            _context6.t0 = this;
+            _context6.next = 7;
+            return this.browser.takeScreenshot();
+          case 7:
+            _context6.t1 = _context6.sent;
+            _context6.next = 10;
+            return _context6.t0.expect.call(_context6.t0, _context6.t1).to.matchImage('fixed');
+          case 10:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6, this);
+    })));
+    test('stoped', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            _context7.next = 2;
+            return this.browser.executeScript(function () {
+              var stickyStop = window.document.querySelector('[data-tid="stickyStop"]');
+              stickyStop.scrollIntoView(false);
+            });
+          case 2:
+            _context7.next = 4;
+            return this.browser.executeScript(function () {
+              var stickyContent = window.document.querySelector('[data-tid="stickyContent"]');
+              var scrollOffset = pageYOffset + stickyContent.getBoundingClientRect().height / 2;
+              window.scrollTo(0, scrollOffset);
+            });
+          case 4:
+            _context7.next = 6;
+            return delay(1000);
+          case 6:
+            _context7.t0 = this;
+            _context7.next = 9;
+            return this.browser.takeScreenshot();
+          case 9:
+            _context7.t1 = _context7.sent;
+            _context7.next = 12;
+            return _context7.t0.expect.call(_context7.t0, _context7.t1).to.matchImage('fixed');
+          case 12:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7, this);
+    })));
+  });
+});

package/components/Sticky/__creevey__/Sticky.creevey/Sticky.creevey.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["story","kind","test","delay","_asyncToGenerator","_regeneratorRuntime","mark","_callee","wrap","_callee$","_context","prev","next","browser","executeScript","stickyContent","window","document","querySelector","nonStickyText","scrollXOffset","getBoundingClientRect","width","scrollYOffset","height","scrollTo","t0","takeScreenshot","t1","sent","expect","call","to","matchImage","stop","_callee2","_callee2$","_context2","_callee3","_callee3$","_context3","stickyStop","scrollOffset","top","innerHeight","_callee4","_callee4$","_context4","scrollIntoView","pageYOffset","_ref5","setStoryParameters","skip","tests","_callee5","_callee5$","_context5","_callee6","_callee6$","_context6","sticky","_callee7","_callee7$","_context7"],"sources":["Sticky.creevey.ts"],"sourcesContent":["import { story, kind, test } from 'creevey';\n\nimport { delay } from '../../../lib/utils';\n\nkind('Sticky', () => {\n  story('WideContainer', () => {\n    test('fixed', async function () {\n      await this.browser.executeScript(function () {\n        const stickyContent = window.document.querySelector('[data-tid=\"stickyContent\"]') as HTMLElement;\n        const nonStickyText = window.document.querySelector('[data-tid=\"nonStickyText\"]') as HTMLElement;\n        const scrollXOffset = nonStickyText.getBoundingClientRect().width / 2;\n        const scrollYOffset = stickyContent.getBoundingClientRect().height / 2;\n\n        window.scrollTo(scrollXOffset, scrollYOffset);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('fixed');\n    });\n  });\n\n  story('Top', () => {\n    test('top', async function () {\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('top');\n    });\n\n    test('fixed', async function () {\n      await this.browser.executeScript(function () {\n        const stickyStop = window.document.querySelector('[data-tid=\"stickyStop\"]') as HTMLElement;\n        const scrollOffset = stickyStop.getBoundingClientRect().top - window.innerHeight / 2;\n\n        window.scrollTo(0, scrollOffset);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('fixed');\n    });\n\n    test('stoped', async function () {\n      await this.browser.executeScript(function () {\n        const stickyStop = window.document.querySelector('[data-tid=\"stickyStop\"]') as HTMLElement;\n        stickyStop.scrollIntoView();\n      });\n      await this.browser.executeScript(function () {\n        const stickyContent = window.document.querySelector('[data-tid=\"stickyContent\"]') as HTMLElement;\n        const scrollOffset = pageYOffset - stickyContent.getBoundingClientRect().height / 2;\n\n        window.scrollTo(0, scrollOffset);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('stoped');\n    });\n  });\n\n  story('Bottom', ({ setStoryParameters }) => {\n    setStoryParameters({\n      skip: {\n        'flacky stopped position': {\n          in: ['firefox', 'firefox8px', 'firefoxDark'],\n          tests: 'stoped',\n        },\n      },\n    });\n\n    test('bottom', async function () {\n      await this.browser.executeScript(function () {\n        window.scrollTo(0, 9999);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('bottom');\n    });\n\n    test('fixed', async function () {\n      await this.browser.executeScript(function () {\n        const sticky = window.document.querySelector('[data-comp-name~=\"Sticky\"]') as HTMLElement;\n        const scrollOffset = sticky.getBoundingClientRect().top - window.innerHeight;\n\n        window.scrollTo(0, scrollOffset);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('fixed');\n    });\n\n    test('stoped', async function () {\n      await this.browser.executeScript(function () {\n        const stickyStop = window.document.querySelector('[data-tid=\"stickyStop\"]') as HTMLElement;\n        stickyStop.scrollIntoView(false);\n      });\n      await this.browser.executeScript(function () {\n        const stickyContent = window.document.querySelector('[data-tid=\"stickyContent\"]') as HTMLElement;\n        const scrollOffset = pageYOffset + stickyContent.getBoundingClientRect().height / 2;\n\n        window.scrollTo(0, scrollOffset);\n      });\n      await delay(1000);\n      await this.expect(await this.browser.takeScreenshot()).to.matchImage('fixed');\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/components/Sticky/__creevey__/Sticky.creevey/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../../cjs/components/Sticky/__creevey__/Sticky.creevey.js",
+  "module": "Sticky.creevey",
+  "types": "../Sticky.creevey.d.ts",
+  "sideEffects": false
+}

package/components/Sticky/__creevey__/Sticky.creevey.d.ts

@@ -0,0 +1 @@
+export {};