\n
\n {!!numItems && scrollBarWidth !== '100%' && !!showFlipper && (\n \n {leftFlipperText}\n \n )}\n {children}\n {!!numItems && scrollBarWidth !== '100%' && !!showFlipper && (\n \n {rightFlipperText}\n \n )}\n {!!numItems && scrollBarWidth !== '100%' && !!showScrollBar && }\n
\n {!!numItems && scrollBarWidth !== '100%' && !!showDots &&
}\n
\n );\n};\n\n// TODO: Move from styleSet to styleSheet.\n\nBasicFilm.defaultProps = {\n children: undefined,\n className: undefined\n};\n\nBasicFilm.propTypes = {\n children: PropTypes.any,\n className: PropTypes.string\n};\n\nexport default BasicFilm;\n","import { useCallback } from 'react';\n\nimport useScrolling from '../useScrolling';\nimport useScrollTo from '../useScrollTo';\nimport useStyleOptions from '../useStyleOptions';\nimport useTimeout from './useTimeout';\n\nexport default function useAutoCenter() {\n const [{ autoCenter }] = useStyleOptions();\n const [scrolling] = useScrolling();\n const scrollTo = useScrollTo();\n\n const handleTrigger = useCallback(() => scrollTo(({ index }) => index), [scrollTo]);\n\n useTimeout(!autoCenter || scrolling ? undefined : handleTrigger, 0);\n}\n","import { useEffect } from 'react';\n\nexport default function useTimeout(onTrigger, duration) {\n useEffect(() => {\n if (onTrigger) {\n const timeout = setTimeout(onTrigger, duration);\n\n return () => clearTimeout(timeout);\n }\n }, [duration, onTrigger]);\n}\n","import useAutoCenter from './hooks/internal/useAutoCenter';\n\nconst AutoCenter = () => {\n useAutoCenter();\n\n return false;\n};\n\nexport default AutoCenter;\n","const DOT_BOX_SIZE = 20;\nconst DOT_SIZE = 6;\n\nconst FLIPPER_BOX_WIDTH = 60;\nconst FLIPPER_SIZE = 40;\n\nconst SCROLL_BAR_HEIGHT = 8;\nconst SCROLL_BAR_MARGIN = 4;\n\nexport default function normalizeStyleOptions({\n autoCenter,\n autoHide,\n autoHideFlipperOnEdge,\n cursor,\n dir,\n dotBoxSize,\n dotSize,\n flipperBlurFocusOnClick,\n flipperBoxWidth,\n flipperSize,\n leftFlipperAriaLabel,\n leftFlipperText,\n rightFlipperAriaLabel,\n rightFlipperText,\n scrollBarHeight,\n scrollBarMargin,\n showDots,\n showFlipper,\n showScrollBar\n} = {}) {\n const rtl = dir === 'rtl';\n\n return {\n autoCenter: autoCenter !== false,\n autoHide: autoHide !== false,\n autoHideFlipperOnEdge: autoHideFlipperOnEdge !== false,\n cursor: typeof cursor === 'undefined' ? 'pointer' : cursor,\n dotBoxSize: typeof dotBoxSize === 'number' ? dotBoxSize : DOT_BOX_SIZE,\n dotSize: typeof dotSize === 'number' ? dotSize : DOT_SIZE,\n flipperBlurFocusOnClick: flipperBlurFocusOnClick === true,\n flipperBoxWidth: typeof flipperBoxWidth === 'number' ? flipperBoxWidth : FLIPPER_BOX_WIDTH,\n flipperSize: typeof flipperSize === 'number' ? flipperSize : FLIPPER_SIZE,\n leftFlipperAriaLabel: leftFlipperAriaLabel || 'left',\n leftFlipperText: leftFlipperText || (rtl ? '>' : '<'),\n rightFlipperAriaLabel: rightFlipperAriaLabel || 'right',\n rightFlipperText: rightFlipperText || (rtl ? '<' : '>'),\n scrollBarHeight: typeof scrollBarHeight === 'number' ? scrollBarHeight : SCROLL_BAR_HEIGHT,\n scrollBarMargin: typeof scrollBarMargin === 'number' ? scrollBarMargin : SCROLL_BAR_MARGIN,\n showDots: showDots !== false,\n showFlipper: showFlipper !== false,\n showScrollBar: showScrollBar !== false\n };\n}\n","/* eslint no-magic-numbers: \"off\" */\n\nimport patchStyleOptions from './patchStyleOptions';\n\nconst createDotsStyle = ({ dotBoxSize }) => ({\n '& .react-film__dots': {\n alignItems: 'center',\n bottom: 0,\n display: 'flex',\n height: dotBoxSize,\n justifyContent: 'center',\n listStyleType: 'none',\n margin: 0,\n padding: 0,\n width: '100%'\n }\n});\n\nconst createDotStyle = ({ cursor, dotBoxSize, dotSize }) => ({\n '& .react-film__dot': {\n alignItems: 'center',\n display: 'flex',\n height: dotBoxSize,\n justifyContent: 'center',\n position: 'relative',\n width: dotBoxSize,\n\n '& .react-film__dot__input': {\n ...(cursor ? { cursor } : {}),\n\n height: '100%',\n left: 0,\n margin: 0,\n opacity: 0,\n position: 'absolute',\n top: 0,\n touchAction: 'none',\n userSelect: 'none',\n width: '100%'\n },\n\n '& .react-film__dot__handle': {\n background: 'rgba(0, 0, 0, .2)',\n borderRadius: dotSize / 2,\n height: dotSize,\n width: dotSize\n },\n\n '&:hover .react-film__dot__handle, & .react-film__dot__input:focus + .react-film__dot__handle': {\n background: 'rgba(0, 0, 0, .4)'\n },\n\n '& .react-film__dot__input:active + .react-film__dot__handle': {\n background: 'rgba(0, 0, 0, .8)'\n },\n\n '& .react-film__dot__input:checked:not(:active) + .react-film__dot__handle': {\n background: 'rgba(0, 0, 0, .6)'\n }\n }\n});\n\nconst createFlipperStyle = ({ cursor, flipperBoxWidth, flipperSize }) => ({\n '& .react-film__flipper': {\n ...(cursor ? { cursor } : {}),\n\n background: 'Transparent',\n border: 0,\n height: '100%',\n outline: 0,\n overflow: 'hidden',\n position: 'absolute',\n top: 0,\n touchAction: 'none',\n userSelect: 'none',\n width: flipperBoxWidth,\n zIndex: 1,\n\n '&.react-film__flipper--left': {\n left: 0,\n\n '& .react-film__flipper__slider': {\n left: 0\n }\n },\n\n '&.react-film__flipper--right': {\n right: 0,\n\n '& .react-film__flipper__slider': {\n right: 0\n }\n },\n\n '& .react-film__flipper__slider': {\n alignItems: 'center',\n display: 'flex',\n height: '100%',\n justifyContent: 'center',\n position: 'absolute',\n top: 0,\n width: '100%'\n },\n\n '& .react-film__flipper__body': {\n backgroundColor: 'rgba(0, 0, 0, .6)',\n borderRadius: '50%',\n color: 'rgba(255, 255, 255, .6)',\n fontFamily: ['Consolas', 'monospace'].map(font => `'${font}'`).join(', '),\n fontSize: 16,\n height: flipperSize,\n lineHeight: `${flipperSize}px`,\n overflow: 'hidden',\n position: 'relative',\n transitionDuration: '100ms',\n transitionProperty: 'background-color',\n width: flipperSize\n },\n\n '&:hover, &:focus': {\n '& .react-film__flipper__body': {\n backgroundColor: 'rgba(0, 0, 0, .8)',\n color: 'rgba(255, 255, 255, .8)',\n transitionDuration: 0\n }\n },\n\n '&:active .react-film__flipper__body': {\n backgroundColor: 'Black',\n color: 'White',\n transitionDuration: 0\n }\n }\n});\n\nconst createFilmstripStyle = () => ({\n '& .react-film__filmstrip': {\n MsOverflowStyle: 'none',\n overflowX: 'scroll',\n overflowY: 'hidden',\n overscrollBehaviorX: 'contain',\n position: 'relative',\n touchAction: 'manipulation',\n zIndex: 0,\n\n '&::-webkit-scrollbar': {\n display: 'none'\n },\n\n '& .react-film__filmstrip__list': {\n display: 'flex',\n listStyleType: 'none',\n margin: 0,\n padding: 0\n }\n }\n});\n\nconst createScrollBarStyle = ({ autoHide, scrollBarHeight, scrollBarMargin }) => ({\n '& .react-film__scroll-bar': {\n bottom: autoHide ? -30 : 0,\n boxSizing: 'border-box',\n padding: scrollBarMargin,\n position: 'absolute',\n transitionDelay: '1s',\n transitionDuration: '300ms',\n transitionProperty: 'bottom',\n width: '100%',\n\n '& .react-film__scroll-bar__handle': {\n backdropFilter: 'blur(4px)',\n background: 'rgba(255, 255, 255, .4)',\n borderRadius: scrollBarHeight / 2,\n height: scrollBarHeight\n }\n }\n});\n\nconst createRootStyle = ({ autoHide, autoHideFlipperOnEdge, flipperBoxWidth, flipperSize }) => ({\n '& .react-film__main': {\n overflow: 'hidden',\n position: 'relative',\n\n ...(autoHide\n ? {\n '&:hover, &.react-film__main--scrolling': {\n '& .react-film__main__slider': {\n transitionDelay: '0s',\n\n '&.react-film__main__slider--bottom': {\n bottom: 0\n },\n\n '&.react-film__main__slider--left': {\n [autoHideFlipperOnEdge ? '&:not(.react-film__main__slider--hide)' : '&']: {\n left: 0\n }\n },\n\n '&.react-film__main__slider--right': {\n [autoHideFlipperOnEdge ? '&:not(.react-film__main__slider--hide)' : '&']: {\n right: 0\n }\n }\n }\n },\n\n '& .react-film__main__overlay:focus .react-film__main__slider:not(.react-film__main__slider--hide)': {\n transitionDelay: '0s',\n\n '&.react-film__main__slider--left': {\n left: 0\n },\n\n '&.react-film__main__slider--right': {\n right: 0\n }\n },\n\n '& .react-film__main__slider': {\n transitionDelay: '1s',\n transitionDuration: '300ms',\n\n '&.react-film__main__slider--left': {\n left: (flipperBoxWidth + flipperSize) / -2,\n transitionProperty: 'left'\n },\n\n '&.react-film__main__slider--right': {\n right: (flipperBoxWidth + flipperSize) / -2,\n transitionProperty: 'right'\n }\n }\n }\n : {})\n }\n});\n\nexport default function createBasicStyleSet(styleOptions) {\n styleOptions = patchStyleOptions(styleOptions);\n\n return {\n root: {\n ...createDotsStyle(styleOptions),\n ...createDotStyle(styleOptions),\n ...createFilmstripStyle(styleOptions),\n ...createFlipperStyle(styleOptions),\n ...createRootStyle(styleOptions),\n ...createScrollBarStyle(styleOptions)\n }\n };\n}\n","/* eslint no-magic-numbers: \"off\" */\n\nimport * as browser from './browser';\nimport best from './util/best';\n\nexport default function getView(dir, scrollable, itemContainer, scrollingTo) {\n const rtl = dir === 'rtl';\n\n if (itemContainer && scrollable) {\n const scrollLeft = scrollingTo || scrollable.scrollLeft;\n const trueScrollLeft = rtl && (browser.edgeUWP || browser.internetExplorer) ? -scrollLeft : scrollLeft;\n const items = itemContainer.children; // This will enumerate