` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: _propTypes.default.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: _propTypes.default.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: _propTypes.default.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: _propTypes.default.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: _propTypes.default.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: _propTypes.default.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\n\nvar _default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);\n\nexports.default = _default;\nmodule.exports = exports[\"default\"];","export function get(element) {\n return getComputedStyle(element);\n}\n\nexport function set(element, obj) {\n for (const key in obj) {\n let val = obj[key];\n if (typeof val === 'number') {\n val = `${val}px`;\n }\n element.style[key] = val;\n }\n return element;\n}\n","export function div(className) {\n const div = document.createElement('div');\n div.className = className;\n return div;\n}\n\nconst elMatches =\n typeof Element !== 'undefined' &&\n (Element.prototype.matches ||\n Element.prototype.webkitMatchesSelector ||\n Element.prototype.mozMatchesSelector ||\n Element.prototype.msMatchesSelector);\n\nexport function matches(element, query) {\n if (!elMatches) {\n throw new Error('No element matching method supported');\n }\n\n return elMatches.call(element, query);\n}\n\nexport function remove(element) {\n if (element.remove) {\n element.remove();\n } else {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }\n}\n\nexport function queryChildren(element, selector) {\n return Array.prototype.filter.call(element.children, child =>\n matches(child, selector)\n );\n}\n","const cls = {\n main: 'ps',\n rtl: 'ps__rtl',\n element: {\n thumb: x => `ps__thumb-${x}`,\n rail: x => `ps__rail-${x}`,\n consuming: 'ps__child--consume',\n },\n state: {\n focus: 'ps--focus',\n clicking: 'ps--clicking',\n active: x => `ps--active-${x}`,\n scrolling: x => `ps--scrolling-${x}`,\n },\n};\n\nexport default cls;\n\n/*\n * Helper methods\n */\nconst scrollingClassTimeout = { x: null, y: null };\n\nexport function addScrollingClass(i, x) {\n const classList = i.element.classList;\n const className = cls.state.scrolling(x);\n\n if (classList.contains(className)) {\n clearTimeout(scrollingClassTimeout[x]);\n } else {\n classList.add(className);\n }\n}\n\nexport function removeScrollingClass(i, x) {\n scrollingClassTimeout[x] = setTimeout(\n () => i.isAlive && i.element.classList.remove(cls.state.scrolling(x)),\n i.settings.scrollingThreshold\n );\n}\n\nexport function setScrollingClassInstantly(i, x) {\n addScrollingClass(i, x);\n removeScrollingClass(i, x);\n}\n","class EventElement {\n constructor(element) {\n this.element = element;\n this.handlers = {};\n }\n\n bind(eventName, handler) {\n if (typeof this.handlers[eventName] === 'undefined') {\n this.handlers[eventName] = [];\n }\n this.handlers[eventName].push(handler);\n this.element.addEventListener(eventName, handler, false);\n }\n\n unbind(eventName, target) {\n this.handlers[eventName] = this.handlers[eventName].filter(handler => {\n if (target && handler !== target) {\n return true;\n }\n this.element.removeEventListener(eventName, handler, false);\n return false;\n });\n }\n\n unbindAll() {\n for (const name in this.handlers) {\n this.unbind(name);\n }\n }\n\n get isEmpty() {\n return Object.keys(this.handlers).every(\n key => this.handlers[key].length === 0\n );\n }\n}\n\nexport default class EventManager {\n constructor() {\n this.eventElements = [];\n }\n\n eventElement(element) {\n let ee = this.eventElements.filter(ee => ee.element === element)[0];\n if (!ee) {\n ee = new EventElement(element);\n this.eventElements.push(ee);\n }\n return ee;\n }\n\n bind(element, eventName, handler) {\n this.eventElement(element).bind(eventName, handler);\n }\n\n unbind(element, eventName, handler) {\n const ee = this.eventElement(element);\n ee.unbind(eventName, handler);\n\n if (ee.isEmpty) {\n // remove\n this.eventElements.splice(this.eventElements.indexOf(ee), 1);\n }\n }\n\n unbindAll() {\n this.eventElements.forEach(e => e.unbindAll());\n this.eventElements = [];\n }\n\n once(element, eventName, handler) {\n const ee = this.eventElement(element);\n const onceHandler = evt => {\n ee.unbind(eventName, onceHandler);\n handler(evt);\n };\n ee.bind(eventName, onceHandler);\n }\n}\n","import { setScrollingClassInstantly } from './lib/class-names';\n\nfunction createEvent(name) {\n if (typeof window.CustomEvent === 'function') {\n return new CustomEvent(name);\n } else {\n const evt = document.createEvent('CustomEvent');\n evt.initCustomEvent(name, false, false, undefined);\n return evt;\n }\n}\n\nexport default function(\n i,\n axis,\n diff,\n useScrollingClass = true,\n forceFireReachEvent = false\n) {\n let fields;\n if (axis === 'top') {\n fields = [\n 'contentHeight',\n 'containerHeight',\n 'scrollTop',\n 'y',\n 'up',\n 'down',\n ];\n } else if (axis === 'left') {\n fields = [\n 'contentWidth',\n 'containerWidth',\n 'scrollLeft',\n 'x',\n 'left',\n 'right',\n ];\n } else {\n throw new Error('A proper axis should be provided');\n }\n\n processScrollDiff(i, diff, fields, useScrollingClass, forceFireReachEvent);\n}\n\nfunction processScrollDiff(\n i,\n diff,\n [contentHeight, containerHeight, scrollTop, y, up, down],\n useScrollingClass = true,\n forceFireReachEvent = false\n) {\n const element = i.element;\n\n // reset reach\n i.reach[y] = null;\n\n // 1 for subpixel rounding\n if (element[scrollTop] < 1) {\n i.reach[y] = 'start';\n }\n\n // 1 for subpixel rounding\n if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {\n i.reach[y] = 'end';\n }\n\n if (diff) {\n element.dispatchEvent(createEvent(`ps-scroll-${y}`));\n\n if (diff < 0) {\n element.dispatchEvent(createEvent(`ps-scroll-${up}`));\n } else if (diff > 0) {\n element.dispatchEvent(createEvent(`ps-scroll-${down}`));\n }\n\n if (useScrollingClass) {\n setScrollingClassInstantly(i, y);\n }\n }\n\n if (i.reach[y] && (diff || forceFireReachEvent)) {\n element.dispatchEvent(createEvent(`ps-${y}-reach-${i.reach[y]}`));\n }\n}\n","import * as CSS from './css';\nimport * as DOM from './dom';\n\nexport function toInt(x) {\n return parseInt(x, 10) || 0;\n}\n\nexport function isEditable(el) {\n return (\n DOM.matches(el, 'input,[contenteditable]') ||\n DOM.matches(el, 'select,[contenteditable]') ||\n DOM.matches(el, 'textarea,[contenteditable]') ||\n DOM.matches(el, 'button,[contenteditable]')\n );\n}\n\nexport function outerWidth(element) {\n const styles = CSS.get(element);\n return (\n toInt(styles.width) +\n toInt(styles.paddingLeft) +\n toInt(styles.paddingRight) +\n toInt(styles.borderLeftWidth) +\n toInt(styles.borderRightWidth)\n );\n}\n\nexport const env = {\n isWebKit:\n typeof document !== 'undefined' &&\n 'WebkitAppearance' in document.documentElement.style,\n supportsTouch:\n typeof window !== 'undefined' &&\n ('ontouchstart' in window ||\n ('maxTouchPoints' in window.navigator &&\n window.navigator.maxTouchPoints > 0) ||\n (window.DocumentTouch && document instanceof window.DocumentTouch)),\n supportsIePointer:\n typeof navigator !== 'undefined' && navigator.msMaxTouchPoints,\n isChrome:\n typeof navigator !== 'undefined' &&\n /Chrome/i.test(navigator && navigator.userAgent),\n};\n","import * as CSS from './lib/css';\nimport * as DOM from './lib/dom';\nimport cls from './lib/class-names';\nimport { toInt } from './lib/util';\n\nexport default function(i) {\n const element = i.element;\n const roundedScrollTop = Math.floor(element.scrollTop);\n const rect = element.getBoundingClientRect();\n\n i.containerWidth = Math.round(rect.width);\n i.containerHeight = Math.round(rect.height);\n\n i.contentWidth = element.scrollWidth;\n i.contentHeight = element.scrollHeight;\n\n if (!element.contains(i.scrollbarXRail)) {\n // clean up and append\n DOM.queryChildren(element, cls.element.rail('x')).forEach(el =>\n DOM.remove(el)\n );\n element.appendChild(i.scrollbarXRail);\n }\n if (!element.contains(i.scrollbarYRail)) {\n // clean up and append\n DOM.queryChildren(element, cls.element.rail('y')).forEach(el =>\n DOM.remove(el)\n );\n element.appendChild(i.scrollbarYRail);\n }\n\n if (\n !i.settings.suppressScrollX &&\n i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth\n ) {\n i.scrollbarXActive = true;\n i.railXWidth = i.containerWidth - i.railXMarginWidth;\n i.railXRatio = i.containerWidth / i.railXWidth;\n i.scrollbarXWidth = getThumbSize(\n i,\n toInt((i.railXWidth * i.containerWidth) / i.contentWidth)\n );\n i.scrollbarXLeft = toInt(\n ((i.negativeScrollAdjustment + element.scrollLeft) *\n (i.railXWidth - i.scrollbarXWidth)) /\n (i.contentWidth - i.containerWidth)\n );\n } else {\n i.scrollbarXActive = false;\n }\n\n if (\n !i.settings.suppressScrollY &&\n i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight\n ) {\n i.scrollbarYActive = true;\n i.railYHeight = i.containerHeight - i.railYMarginHeight;\n i.railYRatio = i.containerHeight / i.railYHeight;\n i.scrollbarYHeight = getThumbSize(\n i,\n toInt((i.railYHeight * i.containerHeight) / i.contentHeight)\n );\n i.scrollbarYTop = toInt(\n (roundedScrollTop * (i.railYHeight - i.scrollbarYHeight)) /\n (i.contentHeight - i.containerHeight)\n );\n } else {\n i.scrollbarYActive = false;\n }\n\n if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {\n i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;\n }\n if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {\n i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;\n }\n\n updateCss(element, i);\n\n if (i.scrollbarXActive) {\n element.classList.add(cls.state.active('x'));\n } else {\n element.classList.remove(cls.state.active('x'));\n i.scrollbarXWidth = 0;\n i.scrollbarXLeft = 0;\n element.scrollLeft = i.isRtl === true ? i.contentWidth : 0;\n }\n if (i.scrollbarYActive) {\n element.classList.add(cls.state.active('y'));\n } else {\n element.classList.remove(cls.state.active('y'));\n i.scrollbarYHeight = 0;\n i.scrollbarYTop = 0;\n element.scrollTop = 0;\n }\n}\n\nfunction getThumbSize(i, thumbSize) {\n if (i.settings.minScrollbarLength) {\n thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);\n }\n if (i.settings.maxScrollbarLength) {\n thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);\n }\n return thumbSize;\n}\n\nfunction updateCss(element, i) {\n const xRailOffset = { width: i.railXWidth };\n const roundedScrollTop = Math.floor(element.scrollTop);\n\n if (i.isRtl) {\n xRailOffset.left =\n i.negativeScrollAdjustment +\n element.scrollLeft +\n i.containerWidth -\n i.contentWidth;\n } else {\n xRailOffset.left = element.scrollLeft;\n }\n if (i.isScrollbarXUsingBottom) {\n xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;\n } else {\n xRailOffset.top = i.scrollbarXTop + roundedScrollTop;\n }\n CSS.set(i.scrollbarXRail, xRailOffset);\n\n const yRailOffset = { top: roundedScrollTop, height: i.railYHeight };\n if (i.isScrollbarYUsingRight) {\n if (i.isRtl) {\n yRailOffset.right =\n i.contentWidth -\n (i.negativeScrollAdjustment + element.scrollLeft) -\n i.scrollbarYRight -\n i.scrollbarYOuterWidth -\n 9;\n } else {\n yRailOffset.right = i.scrollbarYRight - element.scrollLeft;\n }\n } else {\n if (i.isRtl) {\n yRailOffset.left =\n i.negativeScrollAdjustment +\n element.scrollLeft +\n i.containerWidth * 2 -\n i.contentWidth -\n i.scrollbarYLeft -\n i.scrollbarYOuterWidth;\n } else {\n yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;\n }\n }\n CSS.set(i.scrollbarYRail, yRailOffset);\n\n CSS.set(i.scrollbarX, {\n left: i.scrollbarXLeft,\n width: i.scrollbarXWidth - i.railBorderXWidth,\n });\n CSS.set(i.scrollbarY, {\n top: i.scrollbarYTop,\n height: i.scrollbarYHeight - i.railBorderYWidth,\n });\n}\n","import * as CSS from '../lib/css';\nimport * as DOM from '../lib/dom';\nimport cls, {\n addScrollingClass,\n removeScrollingClass,\n} from '../lib/class-names';\nimport updateGeometry from '../update-geometry';\nimport { toInt } from '../lib/util';\n\nexport default function(i) {\n bindMouseScrollHandler(i, [\n 'containerWidth',\n 'contentWidth',\n 'pageX',\n 'railXWidth',\n 'scrollbarX',\n 'scrollbarXWidth',\n 'scrollLeft',\n 'x',\n 'scrollbarXRail',\n ]);\n bindMouseScrollHandler(i, [\n 'containerHeight',\n 'contentHeight',\n 'pageY',\n 'railYHeight',\n 'scrollbarY',\n 'scrollbarYHeight',\n 'scrollTop',\n 'y',\n 'scrollbarYRail',\n ]);\n}\n\nfunction bindMouseScrollHandler(\n i,\n [\n containerHeight,\n contentHeight,\n pageY,\n railYHeight,\n scrollbarY,\n scrollbarYHeight,\n scrollTop,\n y,\n scrollbarYRail,\n ]\n) {\n const element = i.element;\n\n let startingScrollTop = null;\n let startingMousePageY = null;\n let scrollBy = null;\n\n function mouseMoveHandler(e) {\n if (e.touches && e.touches[0]) {\n e[pageY] = e.touches[0].pageY;\n }\n element[scrollTop] =\n startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);\n addScrollingClass(i, y);\n updateGeometry(i);\n\n e.stopPropagation();\n if (e.type.startsWith('touch') && e.changedTouches.length > 1) {\n e.preventDefault();\n }\n }\n\n function mouseUpHandler() {\n removeScrollingClass(i, y);\n i[scrollbarYRail].classList.remove(cls.state.clicking);\n i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);\n }\n\n function bindMoves(e, touchMode) {\n startingScrollTop = element[scrollTop];\n if (touchMode && e.touches) {\n e[pageY] = e.touches[0].pageY;\n }\n startingMousePageY = e[pageY];\n scrollBy =\n (i[contentHeight] - i[containerHeight]) /\n (i[railYHeight] - i[scrollbarYHeight]);\n if (!touchMode) {\n i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);\n i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);\n e.preventDefault();\n } else {\n i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);\n }\n\n i[scrollbarYRail].classList.add(cls.state.clicking);\n\n e.stopPropagation();\n }\n\n i.event.bind(i[scrollbarY], 'mousedown', e => {\n bindMoves(e);\n });\n i.event.bind(i[scrollbarY], 'touchstart', e => {\n bindMoves(e, true);\n });\n}\n","import * as CSS from './lib/css';\nimport * as DOM from './lib/dom';\nimport cls from './lib/class-names';\nimport EventManager from './lib/event-manager';\nimport processScrollDiff from './process-scroll-diff';\nimport updateGeometry from './update-geometry';\nimport { toInt, outerWidth } from './lib/util';\n\nimport clickRail from './handlers/click-rail';\nimport dragThumb from './handlers/drag-thumb';\nimport keyboard from './handlers/keyboard';\nimport wheel from './handlers/mouse-wheel';\nimport touch from './handlers/touch';\n\nconst defaultSettings = () => ({\n handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],\n maxScrollbarLength: null,\n minScrollbarLength: null,\n scrollingThreshold: 1000,\n scrollXMarginOffset: 0,\n scrollYMarginOffset: 0,\n suppressScrollX: false,\n suppressScrollY: false,\n swipeEasing: true,\n useBothWheelAxes: false,\n wheelPropagation: true,\n wheelSpeed: 1,\n});\n\nconst handlers = {\n 'click-rail': clickRail,\n 'drag-thumb': dragThumb,\n keyboard,\n wheel,\n touch,\n};\n\nexport default class PerfectScrollbar {\n constructor(element, userSettings = {}) {\n if (typeof element === 'string') {\n element = document.querySelector(element);\n }\n\n if (!element || !element.nodeName) {\n throw new Error('no element is specified to initialize PerfectScrollbar');\n }\n\n this.element = element;\n\n element.classList.add(cls.main);\n\n this.settings = defaultSettings();\n for (const key in userSettings) {\n this.settings[key] = userSettings[key];\n }\n\n this.containerWidth = null;\n this.containerHeight = null;\n this.contentWidth = null;\n this.contentHeight = null;\n\n const focus = () => element.classList.add(cls.state.focus);\n const blur = () => element.classList.remove(cls.state.focus);\n\n this.isRtl = CSS.get(element).direction === 'rtl';\n if (this.isRtl === true) {\n element.classList.add(cls.rtl);\n }\n this.isNegativeScroll = (() => {\n const originalScrollLeft = element.scrollLeft;\n let result = null;\n element.scrollLeft = -1;\n result = element.scrollLeft < 0;\n element.scrollLeft = originalScrollLeft;\n return result;\n })();\n this.negativeScrollAdjustment = this.isNegativeScroll\n ? element.scrollWidth - element.clientWidth\n : 0;\n this.event = new EventManager();\n this.ownerDocument = element.ownerDocument || document;\n\n this.scrollbarXRail = DOM.div(cls.element.rail('x'));\n element.appendChild(this.scrollbarXRail);\n this.scrollbarX = DOM.div(cls.element.thumb('x'));\n this.scrollbarXRail.appendChild(this.scrollbarX);\n this.scrollbarX.setAttribute('tabindex', 0);\n this.event.bind(this.scrollbarX, 'focus', focus);\n this.event.bind(this.scrollbarX, 'blur', blur);\n this.scrollbarXActive = null;\n this.scrollbarXWidth = null;\n this.scrollbarXLeft = null;\n const railXStyle = CSS.get(this.scrollbarXRail);\n this.scrollbarXBottom = parseInt(railXStyle.bottom, 10);\n if (isNaN(this.scrollbarXBottom)) {\n this.isScrollbarXUsingBottom = false;\n this.scrollbarXTop = toInt(railXStyle.top);\n } else {\n this.isScrollbarXUsingBottom = true;\n }\n this.railBorderXWidth =\n toInt(railXStyle.borderLeftWidth) + toInt(railXStyle.borderRightWidth);\n // Set rail to display:block to calculate margins\n CSS.set(this.scrollbarXRail, { display: 'block' });\n this.railXMarginWidth =\n toInt(railXStyle.marginLeft) + toInt(railXStyle.marginRight);\n CSS.set(this.scrollbarXRail, { display: '' });\n this.railXWidth = null;\n this.railXRatio = null;\n\n this.scrollbarYRail = DOM.div(cls.element.rail('y'));\n element.appendChild(this.scrollbarYRail);\n this.scrollbarY = DOM.div(cls.element.thumb('y'));\n this.scrollbarYRail.appendChild(this.scrollbarY);\n this.scrollbarY.setAttribute('tabindex', 0);\n this.event.bind(this.scrollbarY, 'focus', focus);\n this.event.bind(this.scrollbarY, 'blur', blur);\n this.scrollbarYActive = null;\n this.scrollbarYHeight = null;\n this.scrollbarYTop = null;\n const railYStyle = CSS.get(this.scrollbarYRail);\n this.scrollbarYRight = parseInt(railYStyle.right, 10);\n if (isNaN(this.scrollbarYRight)) {\n this.isScrollbarYUsingRight = false;\n this.scrollbarYLeft = toInt(railYStyle.left);\n } else {\n this.isScrollbarYUsingRight = true;\n }\n this.scrollbarYOuterWidth = this.isRtl ? outerWidth(this.scrollbarY) : null;\n this.railBorderYWidth =\n toInt(railYStyle.borderTopWidth) + toInt(railYStyle.borderBottomWidth);\n CSS.set(this.scrollbarYRail, { display: 'block' });\n this.railYMarginHeight =\n toInt(railYStyle.marginTop) + toInt(railYStyle.marginBottom);\n CSS.set(this.scrollbarYRail, { display: '' });\n this.railYHeight = null;\n this.railYRatio = null;\n\n this.reach = {\n x:\n element.scrollLeft <= 0\n ? 'start'\n : element.scrollLeft >= this.contentWidth - this.containerWidth\n ? 'end'\n : null,\n y:\n element.scrollTop <= 0\n ? 'start'\n : element.scrollTop >= this.contentHeight - this.containerHeight\n ? 'end'\n : null,\n };\n\n this.isAlive = true;\n\n this.settings.handlers.forEach(handlerName => handlers[handlerName](this));\n\n this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only\n this.lastScrollLeft = element.scrollLeft; // for onScroll only\n this.event.bind(this.element, 'scroll', e => this.onScroll(e));\n updateGeometry(this);\n }\n\n update() {\n if (!this.isAlive) {\n return;\n }\n\n // Recalcuate negative scrollLeft adjustment\n this.negativeScrollAdjustment = this.isNegativeScroll\n ? this.element.scrollWidth - this.element.clientWidth\n : 0;\n\n // Recalculate rail margins\n CSS.set(this.scrollbarXRail, { display: 'block' });\n CSS.set(this.scrollbarYRail, { display: 'block' });\n this.railXMarginWidth =\n toInt(CSS.get(this.scrollbarXRail).marginLeft) +\n toInt(CSS.get(this.scrollbarXRail).marginRight);\n this.railYMarginHeight =\n toInt(CSS.get(this.scrollbarYRail).marginTop) +\n toInt(CSS.get(this.scrollbarYRail).marginBottom);\n\n // Hide scrollbars not to affect scrollWidth and scrollHeight\n CSS.set(this.scrollbarXRail, { display: 'none' });\n CSS.set(this.scrollbarYRail, { display: 'none' });\n\n updateGeometry(this);\n\n processScrollDiff(this, 'top', 0, false, true);\n processScrollDiff(this, 'left', 0, false, true);\n\n CSS.set(this.scrollbarXRail, { display: '' });\n CSS.set(this.scrollbarYRail, { display: '' });\n }\n\n onScroll(e) {\n if (!this.isAlive) {\n return;\n }\n\n updateGeometry(this);\n processScrollDiff(this, 'top', this.element.scrollTop - this.lastScrollTop);\n processScrollDiff(\n this,\n 'left',\n this.element.scrollLeft - this.lastScrollLeft\n );\n\n this.lastScrollTop = Math.floor(this.element.scrollTop);\n this.lastScrollLeft = this.element.scrollLeft;\n }\n\n destroy() {\n if (!this.isAlive) {\n return;\n }\n\n this.event.unbindAll();\n DOM.remove(this.scrollbarX);\n DOM.remove(this.scrollbarY);\n DOM.remove(this.scrollbarXRail);\n DOM.remove(this.scrollbarYRail);\n this.removePsClasses();\n\n // unset elements\n this.element = null;\n this.scrollbarX = null;\n this.scrollbarY = null;\n this.scrollbarXRail = null;\n this.scrollbarYRail = null;\n\n this.isAlive = false;\n }\n\n removePsClasses() {\n this.element.className = this.element.className\n .split(' ')\n .filter(name => !name.match(/^ps([-_].+|)$/))\n .join(' ');\n }\n}\n","import updateGeometry from '../update-geometry';\n\nexport default function(i) {\n const element = i.element;\n\n i.event.bind(i.scrollbarY, 'mousedown', e => e.stopPropagation());\n i.event.bind(i.scrollbarYRail, 'mousedown', e => {\n const positionTop =\n e.pageY -\n window.pageYOffset -\n i.scrollbarYRail.getBoundingClientRect().top;\n const direction = positionTop > i.scrollbarYTop ? 1 : -1;\n\n i.element.scrollTop += direction * i.containerHeight;\n updateGeometry(i);\n\n e.stopPropagation();\n });\n\n i.event.bind(i.scrollbarX, 'mousedown', e => e.stopPropagation());\n i.event.bind(i.scrollbarXRail, 'mousedown', e => {\n const positionLeft =\n e.pageX -\n window.pageXOffset -\n i.scrollbarXRail.getBoundingClientRect().left;\n const direction = positionLeft > i.scrollbarXLeft ? 1 : -1;\n\n i.element.scrollLeft += direction * i.containerWidth;\n updateGeometry(i);\n\n e.stopPropagation();\n });\n}\n","import * as DOM from '../lib/dom';\nimport updateGeometry from '../update-geometry';\nimport { isEditable } from '../lib/util';\n\nexport default function(i) {\n const element = i.element;\n\n const elementHovered = () => DOM.matches(element, ':hover');\n const scrollbarFocused = () =>\n DOM.matches(i.scrollbarX, ':focus') || DOM.matches(i.scrollbarY, ':focus');\n\n function shouldPreventDefault(deltaX, deltaY) {\n const scrollTop = Math.floor(element.scrollTop);\n if (deltaX === 0) {\n if (!i.scrollbarYActive) {\n return false;\n }\n if (\n (scrollTop === 0 && deltaY > 0) ||\n (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)\n ) {\n return !i.settings.wheelPropagation;\n }\n }\n\n const scrollLeft = element.scrollLeft;\n if (deltaY === 0) {\n if (!i.scrollbarXActive) {\n return false;\n }\n if (\n (scrollLeft === 0 && deltaX < 0) ||\n (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)\n ) {\n return !i.settings.wheelPropagation;\n }\n }\n return true;\n }\n\n i.event.bind(i.ownerDocument, 'keydown', e => {\n if (\n (e.isDefaultPrevented && e.isDefaultPrevented()) ||\n e.defaultPrevented\n ) {\n return;\n }\n\n if (!elementHovered() && !scrollbarFocused()) {\n return;\n }\n\n let activeElement = document.activeElement\n ? document.activeElement\n : i.ownerDocument.activeElement;\n if (activeElement) {\n if (activeElement.tagName === 'IFRAME') {\n activeElement = activeElement.contentDocument.activeElement;\n } else {\n // go deeper if element is a webcomponent\n while (activeElement.shadowRoot) {\n activeElement = activeElement.shadowRoot.activeElement;\n }\n }\n if (isEditable(activeElement)) {\n return;\n }\n }\n\n let deltaX = 0;\n let deltaY = 0;\n\n switch (e.which) {\n case 37: // left\n if (e.metaKey) {\n deltaX = -i.contentWidth;\n } else if (e.altKey) {\n deltaX = -i.containerWidth;\n } else {\n deltaX = -30;\n }\n break;\n case 38: // up\n if (e.metaKey) {\n deltaY = i.contentHeight;\n } else if (e.altKey) {\n deltaY = i.containerHeight;\n } else {\n deltaY = 30;\n }\n break;\n case 39: // right\n if (e.metaKey) {\n deltaX = i.contentWidth;\n } else if (e.altKey) {\n deltaX = i.containerWidth;\n } else {\n deltaX = 30;\n }\n break;\n case 40: // down\n if (e.metaKey) {\n deltaY = -i.contentHeight;\n } else if (e.altKey) {\n deltaY = -i.containerHeight;\n } else {\n deltaY = -30;\n }\n break;\n case 32: // space bar\n if (e.shiftKey) {\n deltaY = i.containerHeight;\n } else {\n deltaY = -i.containerHeight;\n }\n break;\n case 33: // page up\n deltaY = i.containerHeight;\n break;\n case 34: // page down\n deltaY = -i.containerHeight;\n break;\n case 36: // home\n deltaY = i.contentHeight;\n break;\n case 35: // end\n deltaY = -i.contentHeight;\n break;\n default:\n return;\n }\n\n if (i.settings.suppressScrollX && deltaX !== 0) {\n return;\n }\n if (i.settings.suppressScrollY && deltaY !== 0) {\n return;\n }\n\n element.scrollTop -= deltaY;\n element.scrollLeft += deltaX;\n updateGeometry(i);\n\n if (shouldPreventDefault(deltaX, deltaY)) {\n e.preventDefault();\n }\n });\n}\n","import * as CSS from '../lib/css';\nimport cls from '../lib/class-names';\nimport updateGeometry from '../update-geometry';\nimport { env } from '../lib/util';\n\nexport default function(i) {\n const element = i.element;\n\n let shouldPrevent = false;\n\n function shouldPreventDefault(deltaX, deltaY) {\n const roundedScrollTop = Math.floor(element.scrollTop);\n const isTop = element.scrollTop === 0;\n const isBottom =\n roundedScrollTop + element.offsetHeight === element.scrollHeight;\n const isLeft = element.scrollLeft === 0;\n const isRight =\n element.scrollLeft + element.offsetWidth === element.scrollWidth;\n\n let hitsBound;\n\n // pick axis with primary direction\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n hitsBound = isTop || isBottom;\n } else {\n hitsBound = isLeft || isRight;\n }\n\n return hitsBound ? !i.settings.wheelPropagation : true;\n }\n\n function getDeltaFromEvent(e) {\n let deltaX = e.deltaX;\n let deltaY = -1 * e.deltaY;\n\n if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {\n // OS X Safari\n deltaX = (-1 * e.wheelDeltaX) / 6;\n deltaY = e.wheelDeltaY / 6;\n }\n\n if (e.deltaMode && e.deltaMode === 1) {\n // Firefox in deltaMode 1: Line scrolling\n deltaX *= 10;\n deltaY *= 10;\n }\n\n if (deltaX !== deltaX && deltaY !== deltaY /* NaN checks */) {\n // IE in some mouse drivers\n deltaX = 0;\n deltaY = e.wheelDelta;\n }\n\n if (e.shiftKey) {\n // reverse axis with shift key\n return [-deltaY, -deltaX];\n }\n return [deltaX, deltaY];\n }\n\n function shouldBeConsumedByChild(target, deltaX, deltaY) {\n // FIXME: this is a workaround for