@autoguru/overdrive 4.10.1 → 4.11.0

package/dist/components/OutsideClick/index.js

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

package/dist/components/OverdriveProvider/OverdriveProvider.js

@@ -1,22 +1,36 @@
+"use strict";
+
 import * as React from 'react';
 import { useEffect } from 'react';
-import { tokens } from '../../themes/base/tokens';
-import { isBrowser } from '../../utils';
-import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
-export const OverdriveProvider = ({ noBodyLevelTheming = false, vars, themeClass, 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, themeClass]);
-    return (React.createElement(ThemeProvider, { vars: vars, themeClass: themeClass, breakpoints: breakpoints }, children));
+import { tokens } from "../../themes/base/tokens.js";
+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,
+    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, themeClass]);
+  return _jsx(ThemeProvider, {
+    vars: vars,
+    themeClass: themeClass,
+    breakpoints: breakpoints,
+    children: children
+  });
 };
-export default OverdriveProvider;
+export default OverdriveProvider;

package/dist/components/OverdriveProvider/index.js

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

package/dist/components/Pagination/Bubble.js

@@ -1,22 +1,44 @@
+"use strict";
+
 import clsx from 'clsx';
 import * as React from 'react';
-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));
+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
+  });
 };
-export default Bubble;
+export default Bubble;

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

@@ -1,26 +1,34 @@
+"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 { themeContractVars as vars } from '../../themes/theme.css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
 const paginationBubbleSize = '36px';
 export const disabled = style({
-    color: vars.colours.background.neutral,
-});
+  color: vars.colours.background.neutral
+}, "disabled");
 export const selectedItem = style({
-    transition: 'none',
-});
+  transition: 'none'
+}, "selectedItem");
 export const activeItem = style({
-    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']}`,
-        },
+  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'])
     },
-});
+    ["&: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.js

@@ -1,85 +1,184 @@
+"use strict";
+
 import { ChevronLeftIcon, ChevronRightIcon } from '@autoguru/icons';
 import clsx from 'clsx';
 import * as React from 'react';
-import { useCallback, useMemo, } from 'react';
-import { noop } from '../../utils';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Inline } from '../Inline';
-import { useTextStyles } from '../Text';
-import { Bubble } from './Bubble';
-import * as styles from './Pagination.css';
-const NavButton = ({ icon, disabled, label = '', onClick = noop, }) => (React.createElement(Box, { is: "button", "aria-disabled": disabled, "aria-label": label, display: "flex", overflow: "hidden", alignItems: "center", flexDirection: "row", justifyContent: "center", textAlign: "center", borderRadius: "pill", padding: "2", userSelect: "none", pointerEvents: disabled ? 'none' : void 0, className: clsx(useTextStyles({ colour: 'light' }), {
-        [styles.disabled]: disabled,
-    }), onClick: onClick },
-    React.createElement(Icon, { size: "medium", icon: icon })));
-const Loading = ({ placeholderBubblesNum = 3, }) => (React.createElement(Inline, { is: "span", space: "3" },
-    React.createElement(NavButton, { disabled: true, icon: ChevronLeftIcon }),
-    Array.from({ length: placeholderBubblesNum })
-        .fill('')
-        .map((_, index) => (React.createElement(Bubble, { key: index, children: "", disabled: true, className: styles.disabled }))),
-    React.createElement(NavButton, { disabled: true, icon: ChevronRightIcon })));
-export const Pagination = ({ total, pageSize, activePage, numPagesDisplayed = 5, loading = false, onChange = noop, }) => {
-    const numPages = useMemo(() => calcPagesNum(total, pageSize), [total, pageSize]);
-    const handleClick = useCallback((num) => () => {
-        onChange({ pageNumber: withinBoundaries(num, numPages) });
-    }, [numPages]);
-    const allowedActive = useMemo(() => withinBoundaries(activePage, numPages), [activePage, numPages]);
-    return !loading && total && pageSize && activePage && numPagesDisplayed ? (React.createElement(Inline, { is: "nav", space: "3", "aria-label": "pagination" },
-        React.createElement(NavButton, { disabled: activePage <= 1, label: "navigate back", icon: ChevronLeftIcon, onClick: handleClick(activePage - 1) }),
-        buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map((num) => (React.createElement(Bubble, { key: num, gap: num < 0, selected: allowedActive === num, "aria-current": allowedActive === num ? 'page' : 'false', onClick: handleClick(num) }, num))),
-        React.createElement(NavButton, { disabled: activePage >= numPages, label: "navigate forward", icon: ChevronRightIcon, onClick: handleClick(allowedActive + 1) }))) : (React.createElement(Loading, { placeholderBubblesNum: 3 }));
+import { useCallback, useMemo } from 'react';
+import { noop } from "../../utils/index.js";
+import { Box } from "../Box/index.js";
+import { Icon } from "../Icon/index.js";
+import { Inline } from "../Inline/index.js";
+import { useTextStyles } from "../Text/index.js";
+import { Bubble } from "./Bubble.js";
+import * as styles from "./Pagination.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const NavButton = _ref => {
+  let {
+    icon,
+    disabled,
+    label = '',
+    onClick = noop
+  } = _ref;
+  return _jsx(Box, {
+    is: "button",
+    "aria-disabled": disabled,
+    "aria-label": label,
+    display: "flex",
+    overflow: "hidden",
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+    textAlign: "center",
+    borderRadius: "pill",
+    padding: "2",
+    userSelect: "none",
+    pointerEvents: disabled ? 'none' : void 0,
+    className: clsx(useTextStyles({
+      colour: 'light'
+    }), {
+      [styles.disabled]: disabled
+    }),
+    onClick: onClick,
+    children: _jsx(Icon, {
+      size: "medium",
+      icon: icon
+    })
+  });
 };
+
+const Loading = _ref2 => {
+  let {
+    placeholderBubblesNum = 3
+  } = _ref2;
+  return _jsxs(Inline, {
+    is: "span",
+    space: "3",
+    children: [_jsx(NavButton, {
+      disabled: true,
+      icon: ChevronLeftIcon
+    }), Array.from({
+      length: placeholderBubblesNum
+    }).fill('').map((_, index) => _jsx(Bubble, {
+      children: "",
+      disabled: true,
+      className: styles.disabled
+    }, index)), _jsx(NavButton, {
+      disabled: true,
+      icon: ChevronRightIcon
+    })]
+  });
+};
+
+export const Pagination = _ref3 => {
+  let {
+    total,
+    pageSize,
+    activePage,
+    numPagesDisplayed = 5,
+    loading = false,
+    onChange = noop
+  } = _ref3;
+  const numPages = useMemo(() => calcPagesNum(total, pageSize), [total, pageSize]);
+  const handleClick = useCallback(num => () => {
+    onChange({
+      pageNumber: withinBoundaries(num, numPages)
+    });
+  }, [numPages]);
+  const allowedActive = useMemo(() => withinBoundaries(activePage, numPages), [activePage, numPages]);
+  return !loading && total && pageSize && activePage && numPagesDisplayed ? _jsxs(Inline, {
+    is: "nav",
+    space: "3",
+    "aria-label": "pagination",
+    children: [_jsx(NavButton, {
+      disabled: activePage <= 1,
+      label: "navigate back",
+      icon: ChevronLeftIcon,
+      onClick: handleClick(activePage - 1)
+    }), buildPagesList(numPages, allowedActive, numPagesDisplayed, numPages - numPagesDisplayed).map(num => _jsx(Bubble, {
+      gap: num < 0,
+      selected: allowedActive === num,
+      "aria-current": allowedActive === num ? 'page' : 'false',
+      onClick: handleClick(num),
+      children: num
+    }, num)), _jsx(NavButton, {
+      disabled: activePage >= numPages,
+      label: "navigate forward",
+      icon: ChevronRightIcon,
+      onClick: handleClick(allowedActive + 1)
+    })]
+  }) : _jsx(Loading, {
+    placeholderBubblesNum: 3
+  });
+};
+
 function calcPagesNum(total, pageSize) {
-    return Math.ceil(total / pageSize);
+  return Math.ceil(total / pageSize);
 }
+
 function withinBoundaries(activePage, numPages) {
-    return Math.min(Math.max(1, activePage), numPages);
+  return Math.min(Math.max(1, activePage), numPages);
 }
+
 function generateDefaultArray(numPages) {
-    return Array.from({ length: numPages })
-        .fill(-1)
-        .map((_, index) => index + 1);
+  return Array.from({
+    length: numPages
+  }).fill(-1).map((_, index) => index + 1);
 }
+
 function generateJumpForwardArray(numPages, activePage, numPagesDisplayed) {
-    return generateDefaultArray(numPagesDisplayed).map((_, index) => {
-        const num = index + 1;
-        const gapIndex = numPagesDisplayed - 1;
-        if (num < gapIndex) {
-            return activePage + index;
-        }
-        if (num === gapIndex) {
-            return -1;
-        }
-        return numPages;
-    });
+  return generateDefaultArray(numPagesDisplayed).map((_, index) => {
+    const num = index + 1;
+    const gapIndex = numPagesDisplayed - 1;
+
+    if (num < gapIndex) {
+      return activePage + index;
+    }
+
+    if (num === gapIndex) {
+      return -1;
+    }
+
+    return numPages;
+  });
 }
+
 function generateNoJumpArray(numPagesDisplayed, rightBoundary) {
-    return generateDefaultArray(numPagesDisplayed).map((_, index) => rightBoundary + index + 1);
+  return generateDefaultArray(numPagesDisplayed).map((_, index) => rightBoundary + index + 1);
 }
+
 function generateJumpBackwardArray(numPages, numPagesDisplayed) {
-    return generateDefaultArray(numPagesDisplayed).map((_, index) => {
-        const num = index + 1;
-        const gapIndex = 2;
-        if (num === 1) {
-            return 1;
-        }
-        if (num === gapIndex) {
-            return -1;
-        }
-        return numPages - 4 + index;
-    });
-}
-function buildPagesList(numPages, activePage, numPagesDisplayed, rightBoundary) {
-    if (numPages <= numPagesDisplayed) {
-        return generateDefaultArray(numPages);
+  return generateDefaultArray(numPagesDisplayed).map((_, index) => {
+    const num = index + 1;
+    const gapIndex = 2;
+
+    if (num === 1) {
+      return 1;
     }
-    if (activePage <= rightBoundary) {
-        return generateJumpForwardArray(numPages, activePage, numPagesDisplayed);
+
+    if (num === gapIndex) {
+      return -1;
     }
-    if (activePage > rightBoundary && activePage <= rightBoundary + 2) {
-        return generateNoJumpArray(numPagesDisplayed, rightBoundary);
-    }
-    return generateJumpBackwardArray(numPages, numPagesDisplayed);
+
+    return numPages - 4 + index;
+  });
+}
+
+function buildPagesList(numPages, activePage, numPagesDisplayed, rightBoundary) {
+  if (numPages <= numPagesDisplayed) {
+    return generateDefaultArray(numPages);
+  }
+
+  if (activePage <= rightBoundary) {
+    return generateJumpForwardArray(numPages, activePage, numPagesDisplayed);
+  }
+
+  if (activePage > rightBoundary && activePage <= rightBoundary + 2) {
+    return generateNoJumpArray(numPagesDisplayed, rightBoundary);
+  }
+
+  return generateJumpBackwardArray(numPages, numPagesDisplayed);
 }
-export default Pagination;
+
+export default Pagination;

package/dist/components/Pagination/index.js

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

package/dist/components/Portal/Portal.js

@@ -1,30 +1,46 @@
+"use strict";
+
 import * as React from 'react';
 import { forwardRef, useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { isBrowser, isHtmlElement, setRef } from '../../utils';
-import { useTheme } from '../ThemeProvider';
-function Portal({ children, container, noThemedWrapper }, ref) {
-    const themeClass = useTheme()?.themeClass;
-    const [mountNode, setMountNode] = useState(null);
-    if (isBrowser) {
-        useLayoutEffect(() => {
-            setMountNode(isHtmlElement(container) ? container : document.body);
-        }, [container]);
-        useLayoutEffect(() => {
-            if (mountNode) {
-                setRef(ref, mountNode);
-            }
-            return () => {
-                void setRef(ref, null);
-            };
-        }, [ref, mountNode]);
-    }
-    if (!mountNode)
-        return null;
-    return noThemedWrapper
-        ? createPortal(children, mountNode)
-        : createPortal(React.createElement("div", { className: themeClass }, children), mountNode);
+import { isBrowser, isHtmlElement, setRef } from "../../utils/index.js";
+import { useTheme } from "../ThemeProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+function Portal(_ref, ref) {
+  var _useTheme;
+
+  let {
+    children,
+    container,
+    noThemedWrapper
+  } = _ref;
+  const themeClass = (_useTheme = useTheme()) === null || _useTheme === void 0 ? void 0 : _useTheme.themeClass;
+  const [mountNode, setMountNode] = useState(null);
+
+  if (isBrowser) {
+    useLayoutEffect(() => {
+      setMountNode(isHtmlElement(container) ? container : document.body);
+    }, [container]);
+    useLayoutEffect(() => {
+      if (mountNode) {
+        setRef(ref, mountNode);
+      }
+
+      return () => {
+        void setRef(ref, null);
+      };
+    }, [ref, mountNode]);
+  }
+
+  if (!mountNode) return null;
+  return noThemedWrapper ? createPortal(children, mountNode) : createPortal(_jsx("div", {
+    className: themeClass,
+    children: children
+  }), mountNode);
 }
+
 const _Portal = forwardRef(Portal);
+
 export { _Portal as Portal };
-export default Portal;
+export default Portal;

package/dist/components/Portal/index.js

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

package/dist/components/Positioner/Positioner.css.js

@@ -1,8 +1,16 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+
+__vanilla_filescope__.setFileScope("lib/components/Positioner/Positioner.css.ts", "@autoguru/overdrive");
+
 import { style } from '@vanilla-extract/css';
 export const root = style({
-    zIndex: 1050,
-    top: 0,
-    left: 0,
-    transform: 'translateZ(0)',
-    willChange: 'transform',
-});
+  zIndex: 1050,
+  top: 0,
+  left: 0,
+  transform: 'translateZ(0)',
+  willChange: 'transform'
+}, "root");
+
+__vanilla_filescope__.endFileScope();