@autoguru/overdrive 4.13.0 → 4.14.0

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.css.d.ts

@@ -0,0 +1,7 @@
+export declare const controllerBtn: string;
+export declare const controllerCol: string;
+export declare const prevBtn: string;
+export declare const nextBtn: string;
+export declare const item: string;
+export declare const active: string;
+//# sourceMappingURL=HorizontalAutoScroller.css.d.ts.map

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalAutoScroller.css.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,QAKxB,CAAC;AACH,eAAO,MAAM,aAAa,QAExB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AACH,eAAO,MAAM,MAAM,QAGjB,CAAC"}

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.css.js

@@ -0,0 +1,36 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/HorizontalAutoScroller/HorizontalAutoScroller.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+const actionWidth = 50;
+export const controllerBtn = style({
+  top: 0,
+  height: '100%',
+  width: actionWidth,
+  zIndex: 9
+}, "controllerBtn");
+export const controllerCol = style({
+  width: actionWidth
+}, "controllerCol");
+export const prevBtn = style({
+  left: 0,
+  background: 'linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6769301470588236) 70%, rgba(255,255,255,0) 100%)'
+}, "prevBtn");
+export const nextBtn = style({
+  right: 0,
+  background: 'linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6769301470588236) 70%, rgba(255,255,255,0) 100%)'
+}, "nextBtn");
+export const item = style({
+  userSelect: 'none',
+  willChange: 'transform',
+  transition: "opacity 0.3s ".concat(vars.animation.easing.standard, " 0s, transform 0.3s ").concat(vars.animation.easing.standard, " 0s"),
+  transform: 'scale(0.9)',
+  opacity: 0.6
+}, "item");
+export const active = style({
+  transform: 'scale(1)',
+  opacity: 1
+}, "active");
+__vanilla_filescope__.endFileScope();

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import { SliderProgress } from '..';
+import { Column, Columns } from '../Columns';
+import { UseHorizontalAutoScrollerProps } from './useHorizontalAutoScroller';
+export interface Props extends Pick<ComponentProps<typeof Columns>, 'space'>, Omit<UseHorizontalAutoScrollerProps, 'itemsRef'> {
+    durationSeconds?: number;
+    className?: string;
+    columnWidth?: ComponentProps<typeof Column>['width'];
+    sliderProgressColour?: ComponentProps<typeof SliderProgress>['backgroundColour'];
+    noControls?: boolean;
+    children: ReactNode | ReactNode[];
+}
+export declare const HorizontalAutoScroller: FunctionComponent<Props>;
+export default HorizontalAutoScroller;
+//# sourceMappingURL=HorizontalAutoScroller.d.ts.map

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/HorizontalAutoScroller.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,cAAc,EACd,iBAAiB,EACjB,SAAS,EAGT,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAGpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAM7C,OAAO,EAEN,8BAA8B,EAC9B,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,OAAO,CAAC,EACpD,IAAI,CAAC,8BAA8B,EAAE,UAAU,CAAC;IACjD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACrD,oBAAoB,CAAC,EAAE,cAAc,CACpC,OAAO,cAAc,CACrB,CAAC,kBAAkB,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAClC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAiB,CAAC,KAAK,CA0J3D,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/HorizontalAutoScroller/HorizontalAutoScroller.js

@@ -0,0 +1,157 @@
+"use strict";
+
+import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
+import clsx from 'clsx';
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import { SliderProgress } from "../index.js";
+import { Box } from "../Box/index.js";
+import { Button } from "../Button/index.js";
+import { Column, Columns } from "../Columns/index.js";
+import { Icon } from "../Icon/index.js";
+import Section from "../Section/Section.js";
+import { Stack } from "../Stack/index.js";
+import * as styles from "./HorizontalAutoScroller.css.js";
+import { useHorizontalAutoScroller } from "./useHorizontalAutoScroller.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const HorizontalAutoScroller = _ref => {
+  let {
+    sliderProgressColour = 'primary',
+    noControls = false,
+    space = '5',
+    durationSeconds = 10,
+    children,
+    itemsPerPage: incomingItemsPerPage,
+    paused: incomingIsPaused,
+    activePage: incomingActivePage,
+    columnWidth = '1/2',
+    className
+  } = _ref;
+  const incomingItems = useMemo(() => flattenChildren(children), [children]);
+  const [activeIndex, setActiveIndex] = useState(incomingActivePage);
+  const [itemsRef, setItemsRef] = useState();
+  const items = useMemo(() => {
+    const itemsRef = [];
+    const list = incomingItems.map((item, index) => _jsx(Column, {
+      ref: el => {
+        if (el) itemsRef.push(el);
+      },
+      noShrink: true,
+      width: columnWidth,
+      justifyContent: "stretch",
+      alignSelf: "stretch",
+      children: _jsx(Box, {
+        width: "full",
+        className: clsx(styles.item, {
+          [styles.active]: index === activeIndex
+        }),
+        children: item
+      })
+    }, index));
+    setItemsRef(itemsRef);
+    return list;
+  }, [incomingItems, activeIndex, columnWidth]);
+  const {
+    containerRef,
+    pageCount,
+    activePage,
+    paused,
+    next,
+    prev,
+    onClick,
+    pause,
+    resume
+  } = useHorizontalAutoScroller({
+    itemsRef,
+    itemsPerPage: incomingItemsPerPage,
+    paused: incomingIsPaused,
+    activePage: incomingActivePage,
+    onChange: setActiveIndex
+  });
+  if (items.length < 2) {
+    return _jsx(_Fragment, {
+      children: items
+    });
+  }
+  return _jsxs(Stack, {
+    className: className,
+    space: "5",
+    children: [_jsxs(Box, {
+      overflow: "hidden",
+      position: "relative",
+      onContextMenu: event => {
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onTouchStart: pause,
+      onTouchEnd: resume,
+      onClick: onClick,
+      children: [noControls ? null : _jsx(Box, {
+        className: [styles.controllerBtn, styles.prevBtn],
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flexStart",
+        position: "absolute",
+        children: _jsx(Button, {
+          rounded: true,
+          onClick: event => {
+            event.stopPropagation();
+            event.preventDefault();
+            prev();
+          },
+          variant: "secondary",
+          children: _jsx(Icon, {
+            icon: ChevronLeftIcon
+          })
+        })
+      }), _jsxs(Columns, {
+        ref: containerRef,
+        overflow: "hidden",
+        noWrap: true,
+        width: "full",
+        space: space,
+        children: [noControls ? null : _jsx(Column, {
+          noShrink: true,
+          className: styles.controllerCol,
+          children: _jsx("span", {})
+        }), items, noControls ? null : _jsx(Column, {
+          noShrink: true,
+          className: styles.controllerCol,
+          children: _jsx("span", {})
+        })]
+      }), noControls ? null : _jsx(Box, {
+        className: [styles.controllerBtn, styles.nextBtn],
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flexEnd",
+        position: "absolute",
+        children: _jsx(Button, {
+          rounded: true,
+          onClick: event => {
+            event.stopPropagation();
+            event.preventDefault();
+            next();
+          },
+          variant: "secondary",
+          children: _jsx(Icon, {
+            icon: ChevronRightIcon
+          })
+        })
+      })]
+    }), _jsx(Section, {
+      width: "small",
+      children: _jsx(SliderProgress, {
+        backgroundColour: sliderProgressColour,
+        duration: "".concat(durationSeconds, "s"),
+        paused: paused,
+        onRequestNext: next,
+        totalCount: pageCount,
+        activeIndex: activePage || 0
+      })
+    })]
+  });
+};
+export default HorizontalAutoScroller;

package/dist/components/HorizontalAutoScroller/index.d.ts

@@ -0,0 +1,3 @@
+export { HorizontalAutoScroller } from './HorizontalAutoScroller';
+export { useHorizontalAutoScroller } from './useHorizontalAutoScroller';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/HorizontalAutoScroller/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC"}

package/dist/components/HorizontalAutoScroller/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { HorizontalAutoScroller } from "./HorizontalAutoScroller.js";
+export { useHorizontalAutoScroller } from "./useHorizontalAutoScroller.js";

package/dist/components/HorizontalAutoScroller/stories.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["childrenNum"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as React from 'react';
+import { Box } from "../Box/index.js";
+import { boxArgTypes, scaleOptions } from "../Box/argTypes.js";
+import { HorizontalAutoScroller } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Components/HorizontalAutoScroller',
+  component: HorizontalAutoScroller,
+  argTypes: {
+    sliderProgressColour: boxArgTypes.backgroundColour,
+    space: {
+      options: scaleOptions,
+      control: {
+        type: 'select'
+      }
+    },
+    paused: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    noControls: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+const template = _ref => {
+  let {
+      childrenNum
+    } = _ref,
+    args = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(HorizontalAutoScroller, _objectSpread(_objectSpread({}, args), {}, {
+    children: Array.from({
+      length: childrenNum
+    }).map((_, index) => _jsx(Box, {
+      backgroundColour: "gray200",
+      padding: "3",
+      display: "flex",
+      width: "full",
+      height: "full",
+      alignItems: "center",
+      justifyContent: "center",
+      children: _jsx(Box, {
+        style: {
+          width: '100%',
+          height: 20 + Math.ceil(Math.random() * 300)
+        },
+        backgroundColour: "gray900"
+      })
+    }, index))
+  }));
+};
+const standardProps = {
+  paused: false,
+  activePage: 0,
+  childrenNum: 9
+};
+export const standard = template.bind(standardProps);
+standard.args = standardProps;
+const widthStartPageProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  activePage: 3
+});
+export const widthStartPage = template.bind(widthStartPageProps);
+widthStartPage.args = widthStartPageProps;
+const withCustomDurationProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  durationSeconds: 1
+});
+export const withCustomDuration = template.bind(withCustomDurationProps);
+withCustomDuration.args = withCustomDurationProps;
+const withProgressColourProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  sliderProgressColour: 'yellow500'
+});
+export const withProgressColour = template.bind(withProgressColourProps);
+withProgressColour.args = withProgressColourProps;
+const withManySlidesProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  childrenNum: 50
+});
+export const withManySlides = template.bind(withManySlidesProps);
+withManySlides.args = withManySlidesProps;

package/dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.d.ts

@@ -0,0 +1,23 @@
+import { useInView } from 'react-intersection-observer';
+interface State {
+    pageCount: number;
+    activePage?: number | null;
+    paused: boolean;
+}
+export interface UseHorizontalAutoScrollerProps extends Partial<Omit<State, 'pageCount'>> {
+    itemsRef?: Array<HTMLElement>;
+    itemsPerPage?: number;
+    onChange?(page: number): void;
+}
+interface Returns extends State {
+    containerRef: ReturnType<typeof useInView>[0];
+    next(): void;
+    prev(): void;
+    pause(): void;
+    resume(): void;
+    onClick(): void;
+    goToPage(page: number): void;
+}
+export declare const useHorizontalAutoScroller: ({ itemsRef, itemsPerPage, paused: incomingIsPaused, activePage: incomingActivePage, onChange, }: UseHorizontalAutoScrollerProps) => Returns;
+export {};
+//# sourceMappingURL=useHorizontalAutoScroller.d.ts.map

package/dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHorizontalAutoScroller.d.ts","sourceRoot":"","sources":["../../../lib/components/HorizontalAutoScroller/useHorizontalAutoScroller.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,UAAU,KAAK;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,8BAChB,SAAQ,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,QAAQ,CAAC,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,UAAU,OAAQ,SAAQ,KAAK;IAC9B,YAAY,EAAE,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9C,IAAI,IAAI,IAAI,CAAC;IAEb,IAAI,IAAI,IAAI,CAAC;IAEb,KAAK,IAAI,IAAI,CAAC;IAEd,MAAM,IAAI,IAAI,CAAC;IAEf,OAAO,IAAI,IAAI,CAAC;IAEhB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAmGD,eAAO,MAAM,yBAAyB,oGAMnC,8BAA8B,KAAG,OA8FnC,CAAC"}

package/dist/components/HorizontalAutoScroller/useHorizontalAutoScroller.js

@@ -0,0 +1,159 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { startTransition, useCallback, useEffect, useMemo, useReducer } from 'react';
+import { useInView } from 'react-intersection-observer';
+const getNextPge = prevState => {
+  if (typeof prevState.activePage === 'number' && prevState.activePage + 1 < prevState.pageCount) {
+    return prevState.activePage + 1;
+  }
+  return 0;
+};
+const getPrevPage = prevState => {
+  if (typeof prevState.activePage === 'number' && prevState.activePage - 1 >= 0) {
+    return prevState.activePage - 1;
+  }
+  return prevState.pageCount - 1;
+};
+const stateReducer = (prevState, action) => {
+  switch (action.type) {
+    case 'GO_TO_PAGE':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          activePage: action.payload
+        });
+      }
+    case 'SET_PAGE_COUNT':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          pageCount: action.payload
+        });
+      }
+    case 'NEXT_PAGE':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          paused: false,
+          activePage: getNextPge(prevState)
+        });
+      }
+    case 'CLICK_NEXT':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          paused: false,
+          activePage: getNextPge(prevState)
+        });
+      }
+    case 'PREV_PAGE':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          paused: false,
+          activePage: getPrevPage(prevState)
+        });
+      }
+    case 'PAUSE':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          paused: true
+        });
+      }
+    case 'RESUME':
+      {
+        return _objectSpread(_objectSpread({}, prevState), {}, {
+          paused: false
+        });
+      }
+    default:
+      return prevState;
+  }
+};
+export const useHorizontalAutoScroller = _ref => {
+  let {
+    itemsRef,
+    itemsPerPage = 1,
+    paused: incomingIsPaused = false,
+    activePage: incomingActivePage = null,
+    onChange = () => void 0
+  } = _ref;
+  const [{
+    pageCount,
+    activePage,
+    paused
+  }, dispatch] = useReducer(stateReducer, {
+    paused: incomingIsPaused,
+    activePage: void 0,
+    pageCount: itemsRef !== null && itemsRef !== void 0 && itemsRef.length ? Math.ceil(itemsRef.length / itemsPerPage) : 1
+  });
+  useEffect(() => {
+    dispatch({
+      type: 'SET_PAGE_COUNT',
+      payload: itemsRef !== null && itemsRef !== void 0 && itemsRef.length ? Math.ceil(itemsRef.length / itemsPerPage) : 1
+    });
+  }, [itemsRef === null || itemsRef === void 0 ? void 0 : itemsRef.length, itemsPerPage]);
+  const onViewChange = useCallback(inView => {
+    if (inView && typeof activePage !== 'number') dispatch({
+      type: 'GO_TO_PAGE',
+      payload: typeof incomingActivePage === 'number' ? incomingActivePage : 0
+    });
+  }, [incomingActivePage, activePage]);
+  const [containerRef, inView, entry] = useInView({
+    triggerOnce: false,
+    rootMargin: '0px',
+    onChange: onViewChange
+  });
+  const next = useCallback(() => {
+    dispatch({
+      type: 'NEXT_PAGE'
+    });
+  }, []);
+  const prev = useCallback(() => {
+    dispatch({
+      type: 'PREV_PAGE'
+    });
+  }, []);
+  const goToPage = useCallback(page => {
+    dispatch({
+      type: 'GO_TO_PAGE',
+      payload: page
+    });
+  }, []);
+  const onClick = useCallback(() => {
+    dispatch({
+      type: 'CLICK_NEXT'
+    });
+  }, []);
+  const pause = useCallback(() => {
+    dispatch({
+      type: 'PAUSE'
+    });
+  }, []);
+  const resume = useCallback(() => {
+    dispatch({
+      type: 'RESUME'
+    });
+  }, []);
+  useEffect(() => {
+    if (typeof activePage !== 'number' || !(itemsRef !== null && itemsRef !== void 0 && itemsRef.length)) return;
+    onChange(activePage);
+    startTransition(() => {
+      entry === null || entry === void 0 ? void 0 : entry.target.scrollTo({
+        top: 0,
+        left: itemsRef[activePage].getBoundingClientRect().left - itemsRef[0].getBoundingClientRect().left,
+        behavior: 'smooth'
+      });
+    });
+  }, [itemsRef, activePage, entry === null || entry === void 0 ? void 0 : entry.target, onChange]);
+  return useMemo(() => ({
+    containerRef,
+    paused: paused || !inView,
+    pageCount,
+    activePage,
+    next,
+    prev,
+    goToPage,
+    onClick,
+    pause,
+    resume
+  }), [containerRef, pageCount, activePage, paused, inView]);
+};

package/dist/components/SliderProgress/ProgressStep.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAoDpD,CAAC"}
+{"version":3,"file":"ProgressStep.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/ProgressStep.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAe,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,UAAU,IAAI,IAAI,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CA+CpD,CAAC"}

package/dist/components/SliderProgress/SliderProgress.d.ts

@@ -1,11 +1,10 @@
 import { ComponentProps, NamedExoticComponent } from 'react';
 import { Box } from '../Box';
-interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'> {
+import { ProgressStep } from './ProgressStep';
+interface Props extends Pick<ComponentProps<typeof Box>, 'backgroundColour'>, Pick<ComponentProps<typeof ProgressStep>, 'paused' | 'duration'> {
     className?: string;
-    paused: boolean;
     totalCount: number;
     activeIndex: number;
-    duration: string;
     onRequestNext(): void;
 }
 export declare const SliderProgress: NamedExoticComponent<Props>;

package/dist/components/SliderProgress/SliderProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAK7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IAEjB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgCtD,CAAC"}
+{"version":3,"file":"SliderProgress.d.ts","sourceRoot":"","sources":["../../../lib/components/SliderProgress/SliderProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAQ,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,UAAU,KACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,kBAAkB,CAAC,EAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,IAAI,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgCtD,CAAC"}

package/dist/components/index.d.ts

@@ -56,4 +56,5 @@ export * from './ColourInput';
 export * from './DividerLine';
 export * from './ThemeOverrideProvider';
 export * from './SliderProgress';
+export * from './HorizontalAutoScroller';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC"}

package/dist/components/index.js

@@ -57,4 +57,5 @@ export * from "./TextBubble/index.js";
 export * from "./ColourInput/index.js";
 export * from "./DividerLine/index.js";
 export * from "./ThemeOverrideProvider/index.js";
-export * from "./SliderProgress/index.js";
+export * from "./SliderProgress/index.js";
+export * from "./HorizontalAutoScroller/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.13.0",
+	"version": "4.14.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -49,9 +49,11 @@
 		"csstype": "3.1.1",
 		"deepmerge": "^4.2.2",
 		"eslint-plugin-jest": "26.2.2",
+		"intersection-observer": "^0.12.2",
 		"react": "^18.1.0",
 		"react-dom": "^18.1.0",
 		"react-focus-lock": "2.8.1",
+		"react-intersection-observer": "^9.4.3",
 		"react-keyed-flatten-children": "1.3.0",
 		"webpack": "5.74.0"
 	},
@@ -66,6 +68,7 @@
 		"react": ">=16.8",
 		"react-dom": ">=16.8",
 		"react-focus-lock": "^2.5.0",
+		"react-intersection-observer": ">=9.4.3",
 		"react-keyed-flatten-children": "^1.3.0",
 		"webpack": "*"
 	}