+` props
+ */
+const ScrollbarContainer = styled.div.attrs({
+ 'data-garden-id': COMPONENT_ID,
+ 'data-garden-version': PACKAGE_VERSION,
+ className: props =>
+ classNames('c-scrollbar', {
+ 'c-scrollbar--dark': props.dark,
+ 'is-rtl': isRtl(props)
+ })
+})`
+ ${props => retrieveTheme(COMPONENT_ID, props)};
+`;
+
+export default class Scrollbar extends Component {
+ static propTypes = {
+ /** Apply dark mode styling */
+ dark: PropTypes.bool,
+ /** Customizations provided to [perfect-scrollbars](https://github.com/utatti/perfect-scrollbar) */
+ perfectScrollbarOptions: PropTypes.object,
+ /** Container ref */
+ innerRef: PropTypes.func,
+ /** Custom tag for the containing element */
+ tagName: PropTypes.any,
+ onScrollY: PropTypes.func,
+ onScrollX: PropTypes.func,
+ onScrollUp: PropTypes.func,
+ onScrollDown: PropTypes.func,
+ onScrollLeft: PropTypes.func,
+ onScrollRight: PropTypes.func,
+ onReachStartY: PropTypes.func,
+ onReachEndY: PropTypes.func,
+ onReachStartX: PropTypes.func,
+ onReachEndX: PropTypes.func
+ };
+
+ static defaultProps = {
+ tagName: 'div',
+ dark: false
+ };
+
+ componentDidMount() {
+ const { perfectScrollbarOptions } = this.props;
+
+ if (this.scrollbarContainerRef) {
+ this.perfectScrollbar = new PerfectScrollbar(
+ this.scrollbarContainerRef,
+ perfectScrollbarOptions
+ );
+
+ for (const eventKey in EVENT_KEYS) {
+ if (Object.prototype.hasOwnProperty.call(EVENT_KEYS, eventKey)) {
+ this.scrollbarContainerRef.addEventListener(
+ EVENT_KEYS[eventKey],
+ this.onCustomEvent(EVENT_KEYS[eventKey])
+ );
+ }
+ }
+ }
+ }
+
+ componentDidUpdate() {
+ if (this.perfectScrollbar) {
+ this.perfectScrollbar.update();
+ }
+ }
+
+ componentWillUnmount() {
+ this.perfectScrollbar.destroy();
+ this.perfectScrollbar = null;
+
+ for (const eventKey in EVENT_KEYS) {
+ if (Object.prototype.hasOwnProperty.call(EVENT_KEYS, eventKey)) {
+ this.scrollbarContainerRef.removeEventListener(
+ EVENT_KEYS[eventKey],
+ this.onCustomEvent(EVENT_KEYS[eventKey])
+ );
+ }
+ }
+ }
+
+ onCustomEvent = eventKey => {
+ const {
+ onScrollY,
+ onScrollX,
+ onScrollUp,
+ onScrollDown,
+ onScrollLeft,
+ onScrollRight,
+ onReachStartY,
+ onReachEndY,
+ onReachStartX,
+ onReachEndX
+ } = this.props;
+
+ const EVENTS = {
+ [EVENT_KEYS.SCROLL_Y]: onScrollY,
+ [EVENT_KEYS.SCROLL_X]: onScrollX,
+ [EVENT_KEYS.SCROLL_UP]: onScrollUp,
+ [EVENT_KEYS.SCROLL_DOWN]: onScrollDown,
+ [EVENT_KEYS.SCROLL_LEFT]: onScrollLeft,
+ [EVENT_KEYS.SCROLL_RIGHT]: onScrollRight,
+ [EVENT_KEYS.REACH_START_Y]: onReachStartY,
+ [EVENT_KEYS.REACH_END_Y]: onReachEndY,
+ [EVENT_KEYS.REACH_START_X]: onReachStartX,
+ [EVENT_KEYS.REACH_END_X]: onReachEndX
+ };
+
+ return (...args) => EVENTS[eventKey] && EVENTS[eventKey](...args);
+ };
+
+ render() {
+ const { children, innerRef, tagName, ...other } = this.props;
+
+ const CustomScrollbarContainer = ScrollbarContainer.withComponent(tagName);
+
+ return (
+ {
+ this.scrollbarContainerRef = ref;
+ innerRef && innerRef(ref);
+ }}
+ >
+ {children}
+
+ );
+ }
+}
diff --git a/packages/scrollbars/src/index.js b/packages/scrollbars/src/index.js
new file mode 100644
index 00000000000..9dc64607337
--- /dev/null
+++ b/packages/scrollbars/src/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+export { default as Scrollbar } from './Scrollbar';
diff --git a/packages/scrollbars/styleguide.config.js b/packages/scrollbars/styleguide.config.js
new file mode 100644
index 00000000000..54e214cd90e
--- /dev/null
+++ b/packages/scrollbars/styleguide.config.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+/**
+ * Package specific styleguide configuration
+ * https://github.com/styleguidist/react-styleguidist/blob/master/docs/Configuration.md
+ */
+module.exports = {
+ sections: [
+ {
+ name: '',
+ content: '../../packages/scrollbars/README.md'
+ },
+ {
+ name: 'Components',
+ components: '../../packages/scrollbars/src/[A-Z]*.js'
+ }
+ ]
+};
diff --git a/utils/build/webpack.base.js b/utils/build/webpack.base.js
index 12adcf726d4..3d6ec559d1d 100644
--- a/utils/build/webpack.base.js
+++ b/utils/build/webpack.base.js
@@ -73,12 +73,12 @@ found at http://www.apache.org/licenses/LICENSE-2.0
},
{
test: /\.css?$/u,
- exclude: /@zendeskgarden\/css/u,
+ exclude: /@zendeskgarden\/css-(?!scrollbars)/u,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{
test: /\.css?$/u,
- include: /@zendeskgarden\/css/u,
+ include: /@zendeskgarden\/css-(?!scrollbars)/u,
use: [
MiniCssExtractPlugin.loader,
{
diff --git a/utils/styleguide/public/images/beach-dark.jpg b/utils/styleguide/public/images/beach-dark.jpg
new file mode 100644
index 00000000000..0feeffa5967
Binary files /dev/null and b/utils/styleguide/public/images/beach-dark.jpg differ
diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js
index 06c167728bf..e49c62f921e 100644
--- a/utils/styleguide/styleguide.base.config.js
+++ b/utils/styleguide/styleguide.base.config.js
@@ -138,12 +138,12 @@ const defaultStyleguideConfig = {
},
{
test: /\.css$/u,
- exclude: /@zendeskgarden\/css-/u,
+ exclude: /@zendeskgarden\/css-(?!scrollbars)/u,
loader: 'style-loader!css-loader'
},
{
test: /\.css$/u,
- include: /@zendeskgarden\/css-/u,
+ include: /@zendeskgarden\/css-(?!scrollbars)/u,
loader:
'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
@@ -188,6 +188,7 @@ const defaultStyleguideConfig = {
'@zendeskgarden/react-pagination': path.resolve('..', 'pagination'),
'@zendeskgarden/react-radios': path.resolve('..', 'radios'),
'@zendeskgarden/react-ranges': path.resolve('..', 'ranges'),
+ '@zendeskgarden/react-scrollbars': path.resolve('..', 'scrollbars'),
'@zendeskgarden/react-select': path.resolve('..', 'select'),
'@zendeskgarden/react-selection': path.resolve('..', 'selection'),
'@zendeskgarden/react-tables': path.resolve('..', 'tables'),