@autoguru/overdrive 4.7.1 → 4.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAIxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,oBAAY,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,aAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAEtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAwGD,eAAO,MAAM,WAAW;UAqFS,IAAI,gBAAgB,CAAC;MACjD,YAAY,CAAC;AAmiBlB,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAIxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,oBAAY,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,aAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAEtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAwGD,eAAO,MAAM,WAAW;UA2FS,IAAI,gBAAgB,CAAC;MACjD,YAAY,CAAC;AAmiBlB,eAAe,WAAW,CAAC"}

package/dist/components/AutoSuggest/AutoSuggest.js

@@ -96,15 +96,25 @@ const inputReducerFactory = (suggestions) => (prevState, action) => {
         }
     }
 };
-export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false, autoWidth = false, inlineOptions = false, fieldIcon, suggestions, value, onChange: incomingOnChange, onEnter, itemRenderer = defaultItemRenderer, onBlur: incomingOnBlur, onFocus: incomingOnFocus, onKeyDown, onClick, ...textInputProps }, ref) {
+export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false, autoWidth = false, inlineOptions = false, fieldIcon, suggestions, value: incomingValue, onChange: incomingOnChange, onEnter, itemRenderer = defaultItemRenderer, onBlur: incomingOnBlur, onFocus: incomingOnFocus, onKeyDown, onClick, ...textInputProps }, ref) {
     const inputRef = useRef();
+    const valueRef = useRef(incomingValue);
     useImperativeHandle(ref, () => inputRef.current);
     const [isDesktop] = useMedia(['desktop'], false);
     const [isFocused, setIsFocused] = useState(false);
     const [showModal, setShowModal] = useState(false);
+    const closeModal = useCallback(() => {
+        setShowModal(false);
+        setIsFocused(false);
+    }, [setShowModal]);
+    if (incomingValue && incomingValue !== valueRef.current) {
+        valueRef.current = incomingValue;
+        if (incomingValue.payload)
+            closeModal();
+    }
     const props = {
         suggestions,
-        value,
+        value: valueRef.current,
         onChange: (value) => {
             if (typeof value.payload !== 'undefined' &&
                 value.payload !== null) {
@@ -120,7 +130,7 @@ export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false,
                 setShowModal(false);
                 setIsFocused(false);
                 inputRef.current?.blur();
-                onEnter(value);
+                onEnter(valueRef.current);
             }
         },
         itemRenderer,
@@ -133,10 +143,6 @@ export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false,
         onBlur: wrapEvent(() => setIsFocused(false), incomingOnBlur),
         ...textInputProps,
     };
-    const closeModal = useCallback(() => {
-        setShowModal(false);
-        setIsFocused(false);
-    }, [setShowModal]);
     return !inlineOptions && !isDesktop && showModal ? (React.createElement(AutoSuggestFullscreenInput, { ...props, isFocused: isFocused, inlineOptions: true, fieldIcon: fieldIcon, autoFocus: autoFocus, closeModal: closeModal })) : (React.createElement(AutoSuggestInput, { ref: inputRef, ...props, isFocused: isFocused, inlineOptions: inlineOptions, fieldIcon: fieldIcon, autoFocus: autoFocus, autoWidth: autoWidth }));
 });
 const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInput({ closeModal, ...props }, ref) {

package/dist/components/Button/Button.d.ts

@@ -14,6 +14,7 @@ export interface Props extends Pick<ButtonPrimitive, 'id' | 'onClick' | 'type' |
     rounded?: boolean;
     size?: keyof typeof styles.size;
     variant?: keyof typeof styles.variant;
+    withDoubleClicks?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAGX,YAAY,EAEZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;CACtC;AAqBD,eAAO,MAAM,MAAM,iFAsJlB,CAAC;AAqCF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAIX,YAAY,EAKZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqBD,eAAO,MAAM,MAAM,iFA+KlB,CAAC;AAqCF,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -1,11 +1,12 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { cloneElement, createElement, forwardRef, isValidElement, useMemo, } from 'react';
+import { cloneElement, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
 import { Box, useBoxStyles } from '../Box';
 import { Icon } from '../Icon';
 import { ProgressSpinner } from '../ProgressSpinner';
 import { useTextStyles } from '../Text';
 import * as styles from './Button.css';
+const DOUBLE_CLICK_DETECTION_PERIOD = 700;
 const getSpinnerColour = (variant, minimal) => minimal || variant === 'secondary' ? 'secondary' : 'light';
 const getBorderRadius = (rounded) => rounded ? 'pill' : '1';
 const getPadding = (size, loading) => {
@@ -13,7 +14,7 @@ const getPadding = (size, loading) => {
         return 'none';
     return size === 'small' ? '3' : '4';
 };
-export const Button = forwardRef(({ children, className = '', disabled = false, id, is: Component = 'button', isLoading = false, isFullWidth = false, minimal = false, onClick, rounded = false, size = 'medium', type = 'button', variant = 'secondary', 'aria-label': ariaLabel, }, ref) => {
+export const Button = forwardRef(({ children, className = '', disabled = false, id, is: Component = 'button', withDoubleClicks = false, isLoading = false, isFullWidth = false, minimal = false, onClick: incomingOnClick, rounded = false, size = 'medium', type = 'button', variant = 'secondary', 'aria-label': ariaLabel, }, ref) => {
     const { isSingleIconChild, props: maybeIconProps } = useMemo(() => {
         const maybeIcon = isValidElement(children) && children.type === Icon;
         const maybeProps = children;
@@ -24,6 +25,13 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
             }
             : { isSingleIconChild: false };
     }, [children]);
+    const [functionallyDisabled, setFunctionallyDisabled] = useState(false);
+    const onClick = useCallback((event) => {
+        if (!withDoubleClicks)
+            setFunctionallyDisabled(true);
+        if (typeof incomingOnClick === 'function')
+            incomingOnClick(event);
+    }, [withDoubleClicks, incomingOnClick]);
     const props = {
         type: Component === 'button' ? type : undefined,
         id,
@@ -40,6 +48,7 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
             paddingY: 'none',
             paddingX: getPadding(size, isLoading),
             width: isFullWidth ? 'full' : void 0,
+            pointerEvents: functionallyDisabled ? 'none' : void 0,
         }), useTextStyles({
             colour: 'white',
             fontWeight: 'semiBold',
@@ -54,6 +63,12 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
     const buttonContents = useMemo(() => (React.createElement(React.Fragment, null, isSingleIconChild && maybeIconProps ? (React.createElement(Icon, { size: maybeIconProps.size ?? size === 'small'
             ? 'small'
             : 'medium', ...maybeIconProps })) : (children))), [maybeIconProps, isSingleIconChild, children, size]);
+    useEffect(() => {
+        let timeout;
+        if (functionallyDisabled)
+            timeout = setTimeout(() => setFunctionallyDisabled(false), DOUBLE_CLICK_DETECTION_PERIOD);
+        return () => (timeout ? clearTimeout(timeout) : void 0);
+    }, [functionallyDisabled]);
     const child = isLoading ? (React.createElement(Box, { display: "flex", justifyContent: "center", position: "relative", alignItems: "center", width: "full", height: "full" },
         React.createElement(Box, { position: "absolute", alignItems: "center", justifyContent: "center", display: "flex", width: "full", height: "full" },
             React.createElement(ProgressSpinner, { className: styles.spinner, colour: getSpinnerColour(variant, minimal) })),

package/dist/components/Button/stories.js

@@ -7,6 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { AccountBoxIcon } from '@autoguru/icons';
+import { action } from '@storybook/addon-actions';
 import * as React from 'react';
 import { Column, Columns } from "../Columns/index.js";
 import { Icon } from "../Icon/index.js";
@@ -14,6 +15,7 @@ import { Button } from "./index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const onClick = action('onClick');
 export default {
   title: 'Components/Buttons',
   component: Button,
@@ -204,67 +206,78 @@ const standardProps = {
   isFullWidth: void 0,
   size: void 0,
   variant: void 0,
-  children: 'Login'
+  children: 'Login',
+  onClick
 };
 export const standard = Template.bind(standardProps);
 standard.args = standardProps;
 const primarySmallProps = {
   size: 'small',
-  variant: 'primary'
+  variant: 'primary',
+  onClick
 };
 export const primarySmall = TemplateMulti.bind(primarySmallProps);
 primarySmall.args = primarySmallProps;
 const primaryMediumProps = {
   size: 'medium',
-  variant: 'primary'
+  variant: 'primary',
+  onClick
 };
 export const primaryMedium = TemplateMulti.bind(primaryMediumProps);
 primaryMedium.args = primaryMediumProps;
 const secondarySmallProps = {
   size: 'small',
-  variant: 'secondary'
+  variant: 'secondary',
+  onClick
 };
 export const secondarySmall = TemplateMulti.bind(secondarySmallProps);
 secondarySmall.args = secondarySmallProps;
 const secondaryMediumProps = {
   size: 'medium',
-  variant: 'secondary'
+  variant: 'secondary',
+  onClick
 };
 export const secondaryMedium = TemplateMulti.bind(secondaryMediumProps);
 secondaryMedium.args = secondaryMediumProps;
 const informationSmallProps = {
   size: 'small',
-  variant: 'information'
+  variant: 'information',
+  onClick
 };
 export const informationSmall = TemplateMulti.bind(informationSmallProps);
 informationSmall.args = informationSmallProps;
 const informationMediumProps = {
   size: 'medium',
-  variant: 'information'
+  variant: 'information',
+  onClick
 };
 export const informationMedium = TemplateMulti.bind(informationMediumProps);
 informationMedium.args = informationMediumProps;
 const warningSmallProps = {
   size: 'small',
-  variant: 'warning'
+  variant: 'warning',
+  onClick
 };
 export const warningSmall = TemplateMulti.bind(warningSmallProps);
 warningSmall.args = warningSmallProps;
 const warningMediumProps = {
   size: 'medium',
-  variant: 'warning'
+  variant: 'warning',
+  onClick
 };
 export const warningMedium = TemplateMulti.bind(warningMediumProps);
 warningMedium.args = warningMediumProps;
 const successSmallProps = {
   size: 'small',
-  variant: 'success'
+  variant: 'success',
+  onClick
 };
 export const successSmall = TemplateMulti.bind(successSmallProps);
 successSmall.args = successSmallProps;
 const successMediumProps = {
   size: 'medium',
-  variant: 'success'
+  variant: 'success',
+  onClick
 };
 export const successMedium = TemplateMulti.bind(successMediumProps);
 successMedium.args = successMediumProps;

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

@@ -1 +1 @@
-{"version":3,"file":"SimplePagination.d.ts","sourceRoot":"","sources":["../../../lib/components/SimplePagination/SimplePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,oBAAY,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,IAAI,SAAS;CACb;AAED,aAAK,qBAAqB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAuCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SimplePagination.d.ts","sourceRoot":"","sources":["../../../lib/components/SimplePagination/SimplePagination.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO1C,oBAAY,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,IAAI,SAAS;CACb;AAED,aAAK,qBAAqB,GAAG,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAE/D,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,KAAK,CAyCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/SimplePagination/SimplePagination.js

@@ -14,9 +14,9 @@ export const SimplePagination = ({ hasNext = false, hasPrevious = false, onChang
         onChange(direction);
     };
     return (React.createElement(Inline, { is: "nav", space: "6", "aria-label": "pagination", alignX: "center", alignY: "center" },
-        React.createElement(Button, { rounded: true, disabled: !hasPrevious, size: "small", variant: "secondary", "aria-label": "previous page", onClick: handleClick(EChangeDirection.Previous) },
+        React.createElement(Button, { rounded: true, withDoubleClicks: true, disabled: !hasPrevious, size: "small", variant: "secondary", "aria-label": "previous page", onClick: handleClick(EChangeDirection.Previous) },
             React.createElement(Icon, { size: "medium", icon: ChevronLeftIcon })),
-        React.createElement(Button, { rounded: true, disabled: !hasNext, size: "small", variant: "secondary", "aria-label": "next page", onClick: handleClick(EChangeDirection.Next) },
+        React.createElement(Button, { rounded: true, withDoubleClicks: true, disabled: !hasNext, size: "small", variant: "secondary", "aria-label": "next page", onClick: handleClick(EChangeDirection.Next) },
             React.createElement(Icon, { size: "medium", icon: ChevronRightIcon }))));
 };
 export default SimplePagination;

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAOjE,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAgE3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAOvD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAqD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Switch/Switch.js

@@ -1,12 +1,10 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { Box, useBoxStyles } from '../Box';
 import { useTextStyles } from '../Text';
 import * as styles from './Switch.css';
-export const Switch = ({ className = '', disabled = false, toggled: incomingToggled = false, onChange, }) => {
-    const [toggled, setToggled] = useState(incomingToggled);
-    const [prevValue, setPrevValue] = useState(incomingToggled);
+export const Switch = ({ className = '', disabled = false, toggled = false, onChange, }) => {
     const onToggle = useCallback(() => {
         if (disabled) {
             return;
@@ -14,12 +12,7 @@ export const Switch = ({ className = '', disabled = false, toggled: incomingTogg
         if (typeof onChange === 'function') {
             onChange(!toggled);
         }
-        setToggled(!toggled);
-    }, [incomingToggled, disabled, toggled]);
-    if (prevValue !== incomingToggled) {
-        setToggled(incomingToggled);
-        setPrevValue(incomingToggled);
-    }
+    }, [disabled, toggled]);
     return (React.createElement(Box, { is: "button", className: clsx(styles.root, useTextStyles({ size: '5' }), {
             [styles.toggled]: toggled,
             [styles.disabled.default]: disabled,

package/dist/components/Switch/stories.js

@@ -1,6 +1,8 @@
 "use strict";
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onChange", "value"];
 
 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; }
 
@@ -15,7 +17,21 @@ export default {
   component: Switch
 };
 
-const Template = args => _jsx(Switch, _objectSpread({}, args));
+const Template = _ref => {
+  let {
+    onChange: incomingOnChange,
+    value
+  } = _ref,
+      args = _objectWithoutProperties(_ref, _excluded);
+
+  return _jsx(Switch, _objectSpread({
+    onChange: stepValue => {
+      setValue(stepValue);
+      incomingOnChange(stepValue);
+    },
+    value: value
+  }, args));
+};
 
 const standardProps = {
   disabled: false,
@@ -23,4 +39,26 @@ const standardProps = {
   onChange: action('onChange')
 };
 export const untoggled = Template.bind(standardProps);
-untoggled.args = standardProps;
+untoggled.args = standardProps;
+
+const untoggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  disabled: true
+});
+
+export const untoggledDisabled = Template.bind(untoggledDisabledProps);
+untoggledDisabled.args = untoggledDisabledProps;
+
+const toggledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  toggled: true
+});
+
+export const toggled = Template.bind(toggledProps);
+toggled.args = toggledProps;
+
+const toggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  toggled: true,
+  disabled: true
+});
+
+export const toggledDisabled = Template.bind(toggledDisabledProps);
+toggledDisabled.args = toggledDisabledProps;

package/dist/components/Tabs/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIN,SAAS,EAKT,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,uBAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAqI5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../lib/components/Tabs/TabList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIN,SAAS,EAKT,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,KAAK;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,uBAAqC,CAAC;AAEjE,eAAO,MAAM,OAAO,EAAE,iBAAiB,CAAC,KAAK,CAuI5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Tabs/TabList.js

@@ -66,11 +66,11 @@ export const TabList = ({ children, stretch = false, scrollable = false, }) => {
             styles.root.default,
             shouldShowScrollButtons && styles.root.scroll,
         ] },
-        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.start, onClick: handleStartButton },
+        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, withDoubleClicks: true, size: "small", disabled: !displayScroll.start, onClick: handleStartButton },
             React.createElement(Icon, { icon: ArrowLeftIcon }))) : null,
         React.createElement(Box, { ref: wrapperRef, className: [scrollable && styles.listWrapperScroll], onScroll: handleOnScroll },
             React.createElement(Box, { ref: innerRef, display: stretch ? 'flex' : 'block', flexWrap: "nowrap", width: "full", role: "tablist", "aria-orientation": "horizontal", className: useTextStyles({ noWrap: true }) }, tabs)),
-        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, size: "small", disabled: !displayScroll.end, onClick: handleEndButton },
+        shouldShowScrollButtons ? (React.createElement(Button, { minimal: true, rounded: true, withDoubleClicks: true, size: "small", disabled: !displayScroll.end, onClick: handleEndButton },
             React.createElement(Icon, { icon: ArrowRightIcon }))) : null));
 };
 export default TabList;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.7.1",
+	"version": "4.8.0",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",