@vidispine/vdt-react-timeline 22.4.0-pre.7 → 22.4.0-pre.9

package/dist/index.es.js

@@ -256,7 +256,7 @@ TimelineContext.defaultProps = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css$7 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimeline-root {\n    display: flex;\n    flex-direction: column;\n    padding: 0 8px 8px 8px;\n    background-color: var(--vdt-timeline-palette-background-primary);\n}";
+var css$7 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimeline-root {\n    display: flex;\n    flex-direction: column;\n    padding: 0 8px 8px 8px;\n    background-color: var(--vdt-timeline-palette-background-primary);\n}";
 n(css$7,{});
 
 var _excluded$9 = ["start", "end", "time", "onChangeTime", "children", "className", "perspective", "onChangePerspective", "defaultPerspective", "zoomMultiplier"];
@@ -297,24 +297,59 @@ function Timeline(_ref) {
   });
 }
 Timeline.propTypes = {
+  /**
+   * Start of timeline.
+   */
   start: PropTypes.number.isRequired,
+
+  /**
+   * End of timeline.
+   */
   end: PropTypes.number.isRequired,
+
+  /**
+   * Place of timeline marker.
+   */
   time: PropTypes.number,
+
+  /**
+   * Children components to render inside timeline.
+   */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+
+  /**
+   * Callback to trigger when changing the value of time prop.
+   */
   onChangeTime: PropTypes.func,
+
+  /**
+   * Zoom level of timeline: shows ticks between start and end values (if start and end of timeline are within this range).
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Callback to trigger when changing the value of perspective prop.
+   */
   onChangePerspective: PropTypes.func,
+
+  /**
+   * Set default value for perspective when rendering component.
+   */
   defaultPerspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Multiply by value when zooming in.
+   */
   zoomMultiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
 
   /**
-   * Override styles with className
+   * Override styles with className.
    */
   className: PropTypes.string
 };
@@ -332,7 +367,7 @@ Timeline.defaultProps = {
 var DEFAULT_EVENT_HEIGHT = 15;
 var DEFAULT_PLAYHEAD_ZINDEX = 100;
 
-var css$6 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelinePlayhead-root {\n    background-color: var(--vdt-timeline-palette-secondary);\n    position: absolute;\n}\n\n\n.VdtTimelinePlayhead-root:hover {\n    cursor: ew-resize;\n}";
+var css$6 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelinePlayhead-root {\n    background-color: var(--vdt-timeline-palette-secondary);\n    position: absolute;\n}\n\n\n.VdtTimelinePlayhead-root:hover {\n    cursor: ew-resize;\n}";
 n(css$6,{});
 
 var _excluded$8 = ["className", "perspective", "time", "lineWidth", "headWidth", "headHeight", "style", "onDrag", "HeadProps"];
@@ -460,16 +495,43 @@ function TimelinePlayhead(_ref) {
   }));
 }
 TimelinePlayhead.propTypes = {
+  /**
+   * Apply inline CSS styling
+   */
   style: PropTypes.instanceOf(Object),
+
+  /**
+   * Height of marker head in px
+   */
   headHeight: PropTypes.number,
+
+  /**
+   * Width of marker head in px
+   */
   headWidth: PropTypes.number,
+
+  /**
+   * Width/thickness of marker line in px
+   */
   lineWidth: PropTypes.number,
+
+  /**
+   * Zoom level when looking at playhead.
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Timeline placement of marker
+   */
   time: PropTypes.number,
   onDrag: PropTypes.func,
+
+  /**
+   * Additional props for marker head
+   */
   HeadProps: PropTypes.instanceOf(Object),
 
   /**
@@ -521,7 +583,7 @@ function useResizeObserver(ref) {
   return rect;
 }
 
-var css$5 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}";
+var css$5 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}";
 n(css$5,{});
 
 var css$4 = ".VdtTimelineWaveform-root {\n    height: 40px;\n}";
@@ -638,16 +700,47 @@ function TimelineWaveform(_ref3) {
   }));
 }
 TimelineWaveform.propTypes = {
+  /**
+   * Array of integers to form the wave.
+   */
   waveform: PropTypes.arrayOf(PropTypes.number),
+
+  /**
+   * Set starting point of the waveform. The value provided is the value of the respective data point in passed data.
+   */
   start: PropTypes.number,
+
+  /**
+   * Set ending point of the waveform. The value provided is the value of the respective data point in passed data.
+   */
   end: PropTypes.number,
+
+  /**
+   * Zoom level when looking at waveform.
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
   StageProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
   LayerProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
   RectProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
   WaveRectProps: PropTypes.instanceOf(Object),
 
   /**
@@ -867,21 +960,85 @@ function TimelineEvent(_ref) {
   });
 }
 TimelineEvent.propTypes = {
+  /**
+   * Callback to trigger on clicking on timeline event component.
+   */
   onClick: PropTypes.func,
+
+  /**
+   * Callback to trigger on hovering over timeline event component.
+   */
   onHover: PropTypes.func,
+
+  /**
+   * Callback to trigger on moving a timeline event component (when mousedown and dragging).
+   */
   onMove: PropTypes.func,
+
+  /**
+   * Callback to trigger on moving a timeline event component only when mousedown and dragging.
+   */
   onMoveStart: PropTypes.func,
+
+  /**
+   * Callback to trigger on moving a timeline event component only when mouseup and not dragging.
+   */
   onMoveEnd: PropTypes.func,
+
+  /**
+   * Callback to trigger on resizing a timeline event component.
+   */
   onResize: PropTypes.func,
+
+  /**
+   * Callback to trigger on resizing a timeline event component only when mousedown and dragging.
+   */
   onResizeStart: PropTypes.func,
+
+  /**
+   * Callback to trigger on resizing a timeline event component only when mouseup and not dragging.
+   */
   onResizeEnd: PropTypes.func,
+
+  /**
+   * Position of event bar in x-axis (px)
+   */
   x: PropTypes.number,
+
+  /**
+   * Width of event bar in px
+   */
   width: PropTypes.number,
+
+  /**
+   * Position of event bar in y-axis (px)
+   */
   y: PropTypes.number,
+
+  /**
+   * Height of event bar in px
+   */
   height: PropTypes.number,
+
+  /**
+   * Padding of event bar in px
+   */
   padding: PropTypes.number,
+
+  /**
+   * Start of timeline event
+   */
   start: PropTypes.number.isRequired,
-  end: PropTypes.number.isRequired
+
+  /**
+   * End of timeline event
+   */
+  end: PropTypes.number.isRequired,
+
+  /**
+   * Override styles with className
+   */
+  className: PropTypes.string
 };
 TimelineEvent.defaultProps = {
   onClick: undefined,
@@ -896,7 +1053,8 @@ TimelineEvent.defaultProps = {
   width: undefined,
   y: 0,
   height: DEFAULT_EVENT_HEIGHT,
-  padding: 1
+  padding: 1,
+  className: undefined
 };
 
 var _excluded$5 = ["className", "children", "perspective", "onClick", "style", "onHover", "StageProps", "LayerProps", "GroupProps", "RectProps"],
@@ -1020,8 +1178,6 @@ function TimelineTrack(_ref) {
   }));
 }
 TimelineTrack.propTypes = {
-  style: PropTypes.instanceOf(Object),
-
   /**
    * children are positioned within the track according to 'start' and 'end' props passed to them
    */
@@ -1041,21 +1197,54 @@ TimelineTrack.propTypes = {
     });
     return err;
   },
+
+  /**
+   * Start and end of timeline scroll, unzoomed
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Callback to trigger on timeline track component click.
+   */
   onClick: PropTypes.func,
+
+  /**
+   * Callback to trigger on mouse hover over timeline track component.
+   */
   onHover: PropTypes.func,
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
   StageProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
   LayerProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
   GroupProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Rect component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
   RectProps: PropTypes.instanceOf(Object),
 
   /**
    * Override styles with className
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /**
+   * Apply inline CSS styling
+   */
+  style: PropTypes.instanceOf(Object)
 };
 TimelineTrack.defaultProps = {
   style: {},
@@ -1070,7 +1259,7 @@ TimelineTrack.defaultProps = {
   className: undefined
 };
 
-var css$3 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineRow-root {\n    display: flex;\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel:hover {\n    background-color: var(--vdt-timeline-palette-background-hover);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel {\n    border-width: 2px 0 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel > :first-child {\n    width: 100px;\n    padding: 0 8px;\n    border-width: 0 2px 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root > :not(.VdtTimelineRow-label) {\n    flex-grow: 1;\n    margin: 4px 0;\n}\n\n.VdtTimelineRow-root:not(.VdtTimelineRow-hasLabel) > :first-child {\n    margin-left: 100px;\n}\n\n.VdtTimelineRow-label {\n    display: flex;\n    align-items: center;\n}\n\n.VdtTimelineRow-labelText {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n}";
+var css$3 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineRow-root {\n    display: flex;\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel:hover {\n    background-color: var(--vdt-timeline-palette-background-hover);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel {\n    border-width: 2px 0 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel > :first-child {\n    width: 98px;\n    border-width: 0 2px 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root > :not(.VdtTimelineRow-label) {\n    flex-grow: 1;\n    margin: 4px 0;\n}\n\n.VdtTimelineRow-root:not(.VdtTimelineRow-hasLabel) > :first-child {\n    margin-left: 100px;\n}\n\n.VdtTimelineRow-label {\n    display: flex;\n    align-items: center;\n    flex-basis: 98px;\n}\n\n.VdtTimelineRow-labelText {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    padding: 0 8px;\n}";
 n(css$3,{});
 
 var _excluded$4 = ["className", "children", "label", "LabelProps", "LabelTextProps"];
@@ -1103,22 +1292,43 @@ function TimelineRow(_ref) {
   }));
 }
 TimelineRow.propTypes = {
+  /**
+   * Children components to render inside row content container.
+   */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+
+  /**
+   * Custom row label
+   */
   label: PropTypes.node,
+
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
+   */
   LabelProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
+   */
   LabelTextProps: PropTypes.instanceOf(Object),
 
   /**
    * Override styles with className
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /**
+   * Apply inline CSS styling
+   */
+  style: PropTypes.instanceOf(Object)
 };
 TimelineRow.defaultProps = {
   children: undefined,
   label: undefined,
   LabelProps: {},
   LabelTextProps: {},
-  className: undefined
+  className: undefined,
+  style: {}
 };
 
 var css$2 = "\n.VdtTimelinePlayheadTrack-root {\n    height: 40px;\n    position: relative;\n}";
@@ -1429,36 +1639,108 @@ function TimelinePlayheadTrack(_ref4) {
   }));
 }
 TimelinePlayheadTrack.propTypes = {
+  /**
+   * Callback to trigger on clicking on playhead track component.
+   */
   onClick: PropTypes.func,
+
+  /**
+   * Callback to trigger on mouse hover over playhead track component.
+   */
   onHover: PropTypes.func,
+
+  /**
+   * Array of (large) timeline tick objects. Set time and label.
+   */
   ticks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
     time: PropTypes.number,
     label: PropTypes.string
   })), PropTypes.func]),
+
+  /**
+   * Callback to trigger on using the mouse wheel.
+   */
   onWheel: PropTypes.func,
+
+  /**
+   * Callback to trigger on dragging playhead track component
+   */
   onDrag: PropTypes.func,
+
+  /**
+   * Children components to render before/above the playhead track, according to top and height props passed to playhead track.
+   */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+
+  /**
+   * Start of playhead track.
+   */
   start: PropTypes.number,
+
+  /**
+   * End of playhead track.
+   */
   end: PropTypes.number,
+
+  /**
+   * Zoom level when looking at track.
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Ref object to track timeline events.
+   */
   timelineRef: PropTypes.shape({
     current: PropTypes.instanceOf(Element)
   }),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
   StageProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
   LayerProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
   GroupProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for React component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
   RectProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
   TickGroupProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Text.html
+   */
   TickTextProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Line.html
+   */
   TickLineProps: PropTypes.instanceOf(Object),
 
   /**
    * Override styles with className
    */
-  className: PropTypes.string
+  className: PropTypes.string,
+
+  /**
+   * Apply inline CSS styling
+   */
+  style: PropTypes.instanceOf(Object)
 };
 TimelinePlayheadTrack.defaultProps = {
   onClick: undefined,
@@ -1478,7 +1760,8 @@ TimelinePlayheadTrack.defaultProps = {
   TickGroupProps: {},
   TickTextProps: {},
   TickLineProps: {},
-  className: undefined
+  className: undefined,
+  style: {}
 };
 
 var _excluded$2 = ["index"];
@@ -1546,7 +1829,7 @@ var getStackOverlappingEventProps = function getStackOverlappingEventProps(event
   });
 };
 
-var css$1 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineScroll-root {\n    height: 4px;\n    background-color: var(--vdt-timeline-palette-background-secondary);\n}";
+var css$1 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineScroll-root {\n    height: 4px;\n    background-color: var(--vdt-timeline-palette-background-secondary);\n}";
 n(css$1,{});
 
 var _excluded$1 = ["className", "onScroll", "onClick", "start", "end", "perspective", "style", "StageProps", "LayerProps", "RectProps"];
@@ -1675,17 +1958,52 @@ function TimelineScroll(_ref) {
   }));
 }
 TimelineScroll.propTypes = {
+  /**
+   * Callback to trigger on timeline component scroll.
+   */
   onScroll: PropTypes.func,
+
+  /**
+   * Callback to trigger on timeline component click.
+   */
   onClick: PropTypes.func,
+
+  /**
+   * Start time of timeline scroll.
+   */
   start: PropTypes.number,
+
+  /**
+   * End time of timeline scroll
+   */
   end: PropTypes.number,
+
+  /**
+   * Zoom level of timeline scroll.
+   */
   perspective: PropTypes.shape({
     start: PropTypes.number,
     end: PropTypes.number
   }),
+
+  /**
+   * Apply inline CSS styling
+   */
   style: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
   StageProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
   LayerProps: PropTypes.instanceOf(Object),
+
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
   RectProps: PropTypes.instanceOf(Object),
 
   /**
@@ -1766,15 +2084,30 @@ function TimelineScrollContainer(_ref2) {
   }));
 }
 TimelineScrollContainer.propTypes = {
+  /**
+   * Override styles with className
+   */
   className: PropTypes.string,
+
+  /**
+   * Children components to render
+   */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+
+  /**
+   * Get distance of scrolling
+   */
   getScrollDistance: PropTypes.func,
-  RowProps: PropTypes.instanceOf(Object),
-  ScrollProps: PropTypes.instanceOf(Object)
+
   /**
-   * Override styles with className
+   * Additional props for row component
    */
+  RowProps: PropTypes.instanceOf(Object),
 
+  /**
+   * Additional props for scroll component
+   */
+  ScrollProps: PropTypes.instanceOf(Object)
 };
 TimelineScrollContainer.defaultProps = {
   children: undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-react-timeline",
-  "version": "22.4.0-pre.7",
+  "version": "22.4.0-pre.9",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@vidispine/vdt-js": "22.4.0-pre.7",
+    "@vidispine/vdt-js": "22.4.0-pre.9",
     "clsx": "^1.2.1",
     "konva": "^8.3.11",
     "lodash.clamp": "^4.0.3",
@@ -46,10 +46,10 @@
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@vidispine/eslint-config-mdx": "22.4.0-pre.7",
-    "@vidispine/eslint-config-react": "22.4.0-pre.7",
-    "@vidispine/eslint-config-storybook": "22.4.0-pre.7",
-    "@vidispine/prettier-config": "22.4.0-pre.7",
+    "@vidispine/eslint-config-mdx": "22.4.0-pre.9",
+    "@vidispine/eslint-config-react": "22.4.0-pre.9",
+    "@vidispine/eslint-config-storybook": "22.4.0-pre.9",
+    "@vidispine/prettier-config": "22.4.0-pre.9",
     "eslint": "8.23.1",
     "prettier": "2.7.1",
     "rimraf": "3.0.2",