@autoguru/overdrive 4.3.4 → 4.4.0

package/dist/components/OrderedList/OrderedList.js

@@ -1,64 +1,30 @@
-"use strict";
-
 import clsx from 'clsx';
 import * as React from 'react';
-import { createContext, useContext } from 'react';
-import { Box } from "../Box/index.js";
-import { Stack } from "../Stack/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./OrderedList.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const cycles = ['decimal', 'lower-roman', 'lower-alpha', 'upper-alpha', 'lower-roman'];
+import { createContext, useContext, } from 'react';
+import { Box } from '../Box';
+import { Stack } from '../Stack';
+import { useTextStyles } from '../Text';
+import * as styles from './OrderedList.css';
+const cycles = [
+    'decimal',
+    'lower-roman',
+    'lower-alpha',
+    'upper-alpha',
+    'lower-roman',
+];
 const OrderedListContext = createContext(-1);
-export const OrderedList = _ref => {
-  let {
-    children,
-    className = '',
-    type = null,
-    start
-  } = _ref;
-  const cycle = useContext(OrderedListContext);
-  let myCycle;
-
-  if (cycle + 1 > cycles.length) {
-    myCycle = type === null ? 0 : cycles.indexOf(type);
-  } else {
-    myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
-  }
-
-  return _jsx(Box, {
-    is: "ol",
-    paddingLeft: "6",
-    marginTop: myCycle > 0 ? '2' : 'none',
-    className: clsx(styles.root.default, useTextStyles({
-      colour: 'dark'
-    }), {
-      [styles.root.firstOccurrence]: cycle === -1
-    }, className),
-    style: {
-      listStyleType: cycles[myCycle]
-    },
-    start: start,
-    children: _jsx(OrderedListContext.Provider, {
-      value: myCycle,
-      children: _jsx(Stack, {
-        space: "2",
-        children: children
-      })
-    })
-  });
+export const OrderedList = ({ children, className = '', type = null, start }) => {
+    const cycle = useContext(OrderedListContext);
+    let myCycle;
+    if (cycle + 1 > cycles.length) {
+        myCycle = type === null ? 0 : cycles.indexOf(type);
+    }
+    else {
+        myCycle = type === null ? cycle + 1 : cycles.indexOf(type);
+    }
+    return (React.createElement(Box, { is: "ol", paddingLeft: "6", marginTop: myCycle > 0 ? '2' : 'none', className: clsx(styles.root.default, useTextStyles({ colour: 'dark' }), { [styles.root.firstOccurrence]: cycle === -1 }, className), style: { listStyleType: cycles[myCycle] }, start: start },
+        React.createElement(OrderedListContext.Provider, { value: myCycle },
+            React.createElement(Stack, { space: "2" }, children))));
 };
-
-const Item = _ref2 => {
-  let {
-    className = '',
-    children
-  } = _ref2;
-  return _jsx(Box, {
-    is: "li",
-    className: className,
-    children: children
-  });
-};
-
-OrderedList.Item = Item;
+const Item = ({ className = '', children }) => (React.createElement(Box, { is: "li", className: className }, children));
+OrderedList.Item = Item;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OrderedList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/OrderedList/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { OrderedList } from "./OrderedList.js";
+export { OrderedList } from './OrderedList';

package/dist/components/OutsideClick/OutsideClick.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent, ReactElement, RefObject } from 'react';
+export declare const useOutsideClick: (refs: Array<RefObject<HTMLElement>>, onClickAway: () => void) => void;
+export interface Props {
+    children: ReactElement;
+    onOutsideClick?(): void;
+}
+export declare const OutsideClick: FunctionComponent<Props>;
+//# sourceMappingURL=OutsideClick.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OutsideClick.d.ts","sourceRoot":"","sources":["../../../lib/components/OutsideClick/OutsideClick.tsx"],"names":[],"mappings":"AACA,OAAO,EAGN,iBAAiB,EACjB,YAAY,EACZ,SAAS,EAGT,MAAM,OAAO,CAAC;AAIf,eAAO,MAAM,eAAe,SACrB,MAAM,UAAU,WAAW,CAAC,CAAC,eACtB,MAAM,IAAI,SA6BvB,CAAC;AAmBF,MAAM,WAAW,KAAK;IACrB,QAAQ,EAAE,YAAY,CAAC;IAEvB,cAAc,CAAC,IAAI,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CAmBjD,CAAC"}

package/dist/components/OutsideClick/OutsideClick.js

@@ -1,45 +1,40 @@
-"use strict";
-
 import { warning } from '@autoguru/utilities';
-import { Children, cloneElement, useEffect, useRef } from 'react';
-import { noop } from "../../utils/index.js";
+import { Children, cloneElement, useEffect, useRef, } from 'react';
+import { noop } from '../../utils';
 export const useOutsideClick = (refs, onClickAway) => {
-  const callbackRef = useRef(onClickAway);
-  useEffect(() => {
-    callbackRef.current = onClickAway;
-  }, [onClickAway]);
-  useEffect(() => {
-    if (typeof document === 'undefined' || typeof onClickAway !== 'function') return undefined;
-    return bindEvent(document, 'mouseup', event => {
-      const shouldClose = refs.map(item => item.current).every(element => !(element !== null && element !== void 0 && element.contains(event.target)));
-
-      if (shouldClose) {
-        callbackRef.current();
-      }
-    });
-  }, [refs]);
+    const callbackRef = useRef(onClickAway);
+    useEffect(() => {
+        callbackRef.current = onClickAway;
+    }, [onClickAway]);
+    useEffect(() => {
+        if (typeof document === 'undefined' ||
+            typeof onClickAway !== 'function')
+            return undefined;
+        return bindEvent(document, 'mouseup', (event) => {
+            const shouldClose = refs
+                .map((item) => item.current)
+                .every((element) => !element?.contains(event.target));
+            if (shouldClose) {
+                callbackRef.current();
+            }
+        });
+    }, [refs]);
 };
-
 const bindEvent = (node, event, callback) => {
-  node.addEventListener(event, callback, {
-    passive: true
-  });
-  return () => {
-    node.removeEventListener(event, callback);
-  };
+    node.addEventListener(event, callback, {
+        passive: true,
+    });
+    return () => {
+        node.removeEventListener(event, callback);
+    };
+};
+export const OutsideClick = ({ children, onOutsideClick = noop, }) => {
+    const child = Children.only(children);
+    const rootClickRef = useRef(null);
+    const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
+    warning(!hasRef, 'This component overrides the child ref, use with caution.');
+    useOutsideClick([rootClickRef], onOutsideClick);
+    return cloneElement(child, {
+        ref: rootClickRef,
+    });
 };
-
-export const OutsideClick = _ref => {
-  let {
-    children,
-    onOutsideClick = noop
-  } = _ref;
-  const child = Children.only(children);
-  const rootClickRef = useRef(null);
-  const hasRef = Object.prototype.hasOwnProperty.call(child.props, 'ref');
-  process.env.NODE_ENV !== "production" ? warning(!hasRef, 'This component overrides the child ref, use with caution.') : void 0;
-  useOutsideClick([rootClickRef], onOutsideClick);
-  return cloneElement(child, {
-    ref: rootClickRef
-  });
-};

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

@@ -0,0 +1,2 @@
+export { useOutsideClick, OutsideClick } from './OutsideClick';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OutsideClick/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/OutsideClick/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { useOutsideClick, OutsideClick } from "./OutsideClick.js";
+export { useOutsideClick, OutsideClick } from './OutsideClick';

package/dist/components/OverdriveProvider/OverdriveProvider.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+export interface Props extends ComponentProps<typeof ThemeProvider> {
+    noBodyLevelTheming: boolean;
+    children?: ReactNode;
+}
+export declare const OverdriveProvider: FunctionComponent<Props>;
+//# sourceMappingURL=OverdriveProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverdriveProvider.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/OverdriveProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAGhF,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE/D,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,aAAa,CAAC;IAIlE,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,KAAK,CA8BtD,CAAC"}

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -1,36 +1,20 @@
-"use strict";
-
 import * as React from 'react';
 import { useEffect } from 'react';
-import { isBrowser } from "../../utils/index.js";
-import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const OverdriveProvider = _ref => {
-  let {
-    noBodyLevelTheming = false,
-    vars,
-    themeClass,
-    tokens,
-    breakpoints,
-    children
-  } = _ref;
-  useEffect(() => {
-    if (!isBrowser) return;
-
-    if (!noBodyLevelTheming) {
-      document.body.classList.add(themeClass);
-      document.body.style.backgroundColor = vars.body.backgroundColour;
-      document.body.style.color = vars.body.colour;
-    } else {
-      document.body.style.backgroundColor = tokens.body.backgroundColour;
-      document.body.style.color = tokens.body.colour;
-    }
-  }, [vars]);
-  return _jsx(ThemeProvider, {
-    vars: vars,
-    themeClass: themeClass,
-    tokens: tokens,
-    breakpoints: breakpoints,
-    children: children
-  });
-};
+import { isBrowser } from '../../utils';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
+export const OverdriveProvider = ({ noBodyLevelTheming = false, vars, themeClass, tokens, breakpoints, children, }) => {
+    useEffect(() => {
+        if (!isBrowser)
+            return;
+        if (!noBodyLevelTheming) {
+            document.body.classList.add(themeClass);
+            document.body.style.backgroundColor = vars.body.backgroundColour;
+            document.body.style.color = vars.body.colour;
+        }
+        else {
+            document.body.style.backgroundColor = tokens.body.backgroundColour;
+            document.body.style.color = tokens.body.colour;
+        }
+    }, [vars]);
+    return (React.createElement(ThemeProvider, { vars: vars, themeClass: themeClass, tokens: tokens, breakpoints: breakpoints }, children));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/OverdriveProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/OverdriveProvider/index.js

@@ -1,3 +1 @@
-"use strict";
-
-export { OverdriveProvider } from "./OverdriveProvider.js";
+export { OverdriveProvider } from './OverdriveProvider';

package/dist/components/Pagination/Bubble.d.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent, MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
+export interface Props {
+    selected?: boolean;
+    disabled?: boolean;
+    gap?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const Bubble: FunctionComponent<Props>;
+//# sourceMappingURL=Bubble.d.ts.map

package/dist/components/Pagination/Bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bubble.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Bubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,iBAAiB,EACjB,iBAAiB,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,WAAW,KAAK;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAyC3C,CAAC"}

package/dist/components/Pagination/Bubble.js

@@ -1,43 +1,21 @@
-"use strict";
-
 import clsx from 'clsx';
 import * as React from 'react';
-import { Box } from "../Box/index.js";
-import { useTextStyles } from "../Text/index.js";
-import * as styles from "./Pagination.css.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Bubble = _ref => {
-  let {
-    className = '',
-    selected = false,
-    gap = false,
-    children,
-    disabled,
-    onClick
-  } = _ref;
-  let backgroundColour = 'transparent';
-  if (selected) backgroundColour = 'green900';else if (disabled) backgroundColour = 'gray200';
-  return _jsx(Box, {
-    is: "button",
-    backgroundColour: backgroundColour,
-    display: "flex",
-    overflow: "hidden",
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "center",
-    textAlign: "center",
-    borderRadius: "pill",
-    pointerEvents: disabled ? 'none' : void 0,
-    className: clsx(className, useTextStyles({
-      fontWeight: 'bold',
-      colour: selected ? 'white' : 'light',
-      size: '3'
-    }), {
-      [styles.selectedItem]: selected,
-      [styles.disabled]: gap,
-      [styles.activeItem]: !gap
-    }),
-    onClick: onClick,
-    children: gap ? '...' : children
-  });
-};
+import { Box } from '../Box';
+import { useTextStyles } from '../Text';
+import * as styles from './Pagination.css';
+export const Bubble = ({ className = '', selected = false, gap = false, children, disabled, onClick, }) => {
+    let backgroundColour = 'transparent';
+    if (selected)
+        backgroundColour = 'green900';
+    else if (disabled)
+        backgroundColour = 'gray200';
+    return (React.createElement(Box, { is: "button", backgroundColour: backgroundColour, display: "flex", overflow: "hidden", alignItems: "center", flexDirection: "row", justifyContent: "center", textAlign: "center", borderRadius: "pill", pointerEvents: disabled ? 'none' : void 0, className: clsx(className, useTextStyles({
+            fontWeight: 'bold',
+            colour: selected ? 'white' : 'light',
+            size: '3',
+        }), {
+            [styles.selectedItem]: selected,
+            [styles.disabled]: gap,
+            [styles.activeItem]: !gap,
+        }), onClick: onClick }, gap ? '...' : children));
+};

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

@@ -0,0 +1,4 @@
+export declare const disabled: string;
+export declare const selectedItem: string;
+export declare const activeItem: string;
+//# sourceMappingURL=Pagination.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Pagination.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,QAEnB,CAAC;AAEH,eAAO,MAAM,YAAY,QAEvB,CAAC;AAEH,eAAO,MAAM,UAAU,QAiBrB,CAAC"}

package/dist/components/Pagination/Pagination.css.js

@@ -1,34 +1,26 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-
-__vanilla_filescope__.setFileScope("lib/components/Pagination/Pagination.css.ts", "@autoguru/overdrive");
-
 import { style } from '@vanilla-extract/css';
-import { vars } from "../../themes/base/vars.css.js";
+import { vars } from '../../themes/base/vars.css';
 const paginationBubbleSize = '36px';
 export const disabled = style({
-  color: vars.colours.background.neutral
-}, "disabled");
+    color: vars.colours.background.neutral,
+});
 export const selectedItem = style({
-  transition: 'none'
-}, "selectedItem");
+    transition: 'none',
+});
 export const activeItem = style({
-  lineHeight: "calc(".concat(paginationBubbleSize, " - 3px)"),
-  width: paginationBubbleSize,
-  height: paginationBubbleSize,
-  cursor: 'pointer',
-  transition: "background-color 0.2s ".concat(vars.animation.easing.decelerate, " 0s, box-shadow 0.2s ").concat(vars.animation.easing.decelerate, " 0s"),
-  selectors: {
-    ["&:not(".concat(selectedItem, "):hover")]: {
-      backgroundColor: vars.colours.background.body,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['1'])
+    lineHeight: `calc(${paginationBubbleSize} - 3px)`,
+    width: paginationBubbleSize,
+    height: paginationBubbleSize,
+    cursor: 'pointer',
+    transition: `background-color 0.2s ${vars.animation.easing.decelerate} 0s, box-shadow 0.2s ${vars.animation.easing.decelerate} 0s`,
+    selectors: {
+        [`&:not(${selectedItem}):hover`]: {
+            backgroundColor: vars.colours.background.body,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`,
+        },
+        [`&:not(${selectedItem}):active`]: {
+            backgroundColor: vars.colours.background.body,
+            boxShadow: `inset 0 0 0 1px ${vars.colours.intent.primary.background.strong}, ${vars.elevation['1']}`,
+        },
     },
-    ["&:not(".concat(selectedItem, "):active")]: {
-      backgroundColor: vars.colours.background.body,
-      boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.background.strong, ", ").concat(vars.elevation['1'])
-    }
-  }
-}, "activeItem");
-
-__vanilla_filescope__.endFileScope();
+});

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+import { FunctionComponent } from 'react';
+interface OnChangeObject {
+    pageNumber: number;
+}
+export declare type TOnChangeEventHandler = (event: OnChangeObject) => void;
+export interface Props {
+    numPagesDisplayed?: number;
+    activePage: number;
+    total: number;
+    pageSize: number;
+    loading?: boolean;
+    onChange?: TOnChangeEventHandler;
+}
+export declare const Pagination: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../lib/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAGA,OAAO,EACN,iBAAiB,EAIjB,MAAM,OAAO,CAAC;AAWf,UAAU,cAAc;IACvB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,qBAAqB,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAEpE,MAAM,WAAW,KAAK;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CACjC;AA8DD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CA2D/C,CAAC"}