@autoguru/overdrive 4.14.7 → 4.15.0

package/dist/components/FillHeightBox/FillHeightBox.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { UseWindowHeightFillProps } from '../../hooks/useWindowHeightFill/useWindowHeightFill';
+import { ScrollPane } from '../ScrollPane';
+type Props = Omit<UseWindowHeightFillProps, 'containerRef'> & ComponentProps<typeof ScrollPane>;
+export declare const FillHeightBox: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=FillHeightBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FillHeightBox.d.ts","sourceRoot":"","sources":["../../../lib/components/FillHeightBox/FillHeightBox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1D,OAA4B,EAC3B,wBAAwB,EACxB,MAAM,qDAAqD,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,KAAK,KAAK,GAAG,IAAI,CAAC,wBAAwB,EAAE,cAAc,CAAC,GAC1D,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAsBlD,CAAC"}

package/dist/components/FillHeightBox/FillHeightBox.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["includeMobile", "bottomGap", "serverVhFallback", "style"];
+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 useWindowHeightFill from "../../hooks/useWindowHeightFill/useWindowHeightFill.js";
+import { ScrollPane } from "../ScrollPane/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FillHeightBox = _ref => {
+  let {
+      includeMobile,
+      bottomGap,
+      serverVhFallback,
+      style
+    } = _ref,
+    scrollPaneProps = _objectWithoutProperties(_ref, _excluded);
+  const containerRef = React.useRef(null);
+  const containerHeight = useWindowHeightFill({
+    containerRef,
+    includeMobile,
+    bottomGap,
+    serverVhFallback
+  });
+  return _jsx(ScrollPane, _objectSpread(_objectSpread({}, scrollPaneProps), {}, {
+    ref: containerRef,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      maxHeight: containerHeight
+    })
+  }));
+};

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

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

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

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

package/dist/components/FillHeightBox/index.js

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

package/dist/components/FillHeightBox/stories.js

@@ -0,0 +1,47 @@
+"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 * as React from 'react';
+import { Box } from "../Box/index.js";
+import { StickyBox } from "../StickyBox/index.js";
+import { Text } from "../Text/index.js";
+import { FillHeightBox } from "./FillHeightBox.js";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: 'Foundation/Layout/FillHeightBox',
+  component: StickyBox
+};
+const Template = args => _jsx(FillHeightBox, _objectSpread(_objectSpread({
+  rounded: true,
+  includeMobile: true,
+  bottomGap: "5",
+  width: "full",
+  backgroundColour: "white",
+  borderColour: "gray",
+  borderWidth: "1",
+  boxShadow: "1",
+  height: "full",
+  borderRadius: "1"
+}, args), {}, {
+  children: _jsx(Box, {
+    padding: "5",
+    width: "full",
+    style: {
+      minHeight: '300vh'
+    },
+    children: Array.from({
+      length: 100
+    }).map((_, i) => _jsxs(Text, {
+      is: "p",
+      children: ["I am page content ", i + 1]
+    }, i))
+  })
+}));
+const standardProps = {
+  top: 'none'
+};
+export const standard = Template.bind(standardProps);
+standard.args = standardProps;

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

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const rounded: string;
+//# sourceMappingURL=ScrollPane.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollPane.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QA6Bf,CAAC;AAEH,eAAO,MAAM,OAAO,QAOlB,CAAC"}

package/dist/components/ScrollPane/ScrollPane.css.js

@@ -0,0 +1,45 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/ScrollPane/ScrollPane.css.ts", "@autoguru/overdrive");
+import { style } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+export const root = style({
+  '::-webkit-scrollbar': {
+    backgroundColor: 'transparent',
+    width: 6
+  },
+  '::-webkit-scrollbar-corner': {
+    background: 'transparent'
+  },
+  '::-webkit-scrollbar-thumb': {
+    overflow: 'hidden',
+    backgroundColor: vars.colours.gamut.gray300
+  },
+  '::-webkit-scrollbar-track': {
+    position: 'absolute',
+    backgroundColor: vars.colours.gamut.gray100,
+    border: "1px solid ".concat(vars.colours.gamut.gray200)
+  },
+  '::-webkit-scrollbar-button': {
+    display: 'none'
+  },
+  selectors: {
+    ['&::-webkit-scrollbar-track:hover']: {
+      backgroundColor: vars.colours.gamut.gray300
+    },
+    ['&::-webkit-scrollbar-thumb:hover']: {
+      backgroundColor: vars.colours.gamut.gray400,
+      border: "1px solid ".concat(vars.colours.gamut.gray400)
+    }
+  }
+}, "root");
+export const rounded = style({
+  '::-webkit-scrollbar-thumb': {
+    borderRadius: vars.border.radius['1']
+  },
+  '::-webkit-scrollbar-track': {
+    borderRadius: "0 ".concat(vars.border.radius['1'], " ").concat(vars.border.radius['1'], " 0")
+  }
+}, "rounded");
+__vanilla_filescope__.endFileScope();

package/dist/components/ScrollPane/ScrollPane.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Tokens } from '../../themes/tokens';
+import { Box } from '../Box';
+interface Props extends Omit<ComponentProps<typeof Box>, 'overflow'> {
+    bottomGap?: keyof Tokens['space'];
+    serverVhFallback?: number;
+    includeMobile?: boolean;
+    rounded?: boolean;
+    className?: string;
+}
+export declare const ScrollPane: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=ScrollPane.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollPane.d.ts","sourceRoot":"","sources":["../../../lib/components/ScrollPane/ScrollPane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,KAAK,CAW/C,CAAC"}

package/dist/components/ScrollPane/ScrollPane.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "rounded"];
+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 clsx from 'clsx';
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { Box } from "../Box/index.js";
+import * as styles from "./ScrollPane.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScrollPane = forwardRef((_ref, ref) => {
+  let {
+      className = '',
+      rounded = false
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return _jsx(Box, _objectSpread({
+    ref: ref,
+    overflow: "auto",
+    className: clsx(className, styles.root, {
+      [styles.rounded]: rounded
+    })
+  }, rest));
+});

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

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

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

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

package/dist/components/ScrollPane/index.js

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

package/dist/components/ScrollPane/stories.js

@@ -0,0 +1,55 @@
+"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 * as React from 'react';
+import { Box } from "../Box/index.js";
+import { Heading } from "../Heading/index.js";
+import { StickyBox } from "../StickyBox/index.js";
+import { Text } from "../Text/index.js";
+import { ScrollPane } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Foundation/Layout/ScrollPane',
+  component: ScrollPane
+};
+const Template = args => _jsxs(ScrollPane, _objectSpread(_objectSpread({
+  style: {
+    maxHeight: '300px'
+  }
+}, args), {}, {
+  children: [_jsx(StickyBox, {
+    width: "full",
+    children: _jsx(Box, {
+      matginTop: "8",
+      padding: "3",
+      width: "full",
+      backgroundColour: "yellow700",
+      borderRadius: "1",
+      overflow: "hidden",
+      children: _jsx(Heading, {
+        is: "h2",
+        align: "center",
+        colour: "white",
+        children: "I'm a sticky header"
+      })
+    })
+  }), _jsx(Box, {
+    padding: "5",
+    width: "full",
+    style: {
+      minHeight: '300vh'
+    },
+    children: Array.from({
+      length: 100
+    }).map((_, i) => _jsxs(Text, {
+      is: "p",
+      children: ["I am page content ", i + 1]
+    }, i))
+  })]
+}));
+const standardProps = {};
+export const standard = Template.bind(standardProps);
+standard.args = standardProps;

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

@@ -0,0 +1,7 @@
+export declare const root: string;
+export declare const content: string;
+export declare const popped: string;
+export declare const zIndex: Record<never, string>;
+export declare const top: Record<never, string>;
+export declare const bottom: Record<never, string>;
+//# sourceMappingURL=StickyBox.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickyBox.css.d.ts","sourceRoot":"","sources":["../../../lib/components/StickyBox/StickyBox.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,MAAM,QAEjB,CAAC;AAEH,eAAO,MAAM,MAAM,uBAQlB,CAAC;AAEF,eAAO,MAAM,GAAG,uBASf,CAAC;AAEF,eAAO,MAAM,MAAM,uBASlB,CAAC"}

package/dist/components/StickyBox/StickyBox.css.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
+__vanilla_filescope__.setFileScope("lib/components/StickyBox/StickyBox.css.ts", "@autoguru/overdrive");
+import { style, styleVariants } from '@vanilla-extract/css';
+import { themeContractVars as vars } from "../../themes/theme.css.js";
+import { mapTokenToProperty } from "../../utils/mapTokenToProperty.js";
+export const root = style({
+  position: 'sticky',
+  transition: "box-shadow 0.3s ".concat(vars.animation.easing.standard, " 0s")
+}, "root");
+export const content = style({
+  height: 'fit-content',
+  transition: "transform 0.3s ".concat(vars.animation.easing.standard, " 0s")
+}, "content");
+export const popped = style({
+  transform: 'scale(1.01)'
+}, "popped");
+export const zIndex = styleVariants(mapTokenToProperty([0, 1, 2, 3, 99].reduce((tokens, current) => {
+  tokens[current] = current;
+  return tokens;
+}, {}), 'zIndex'), "zIndex");
+export const top = styleVariants(mapTokenToProperty(['none', '1', '3', '5', '7', 'subHeader'].reduce((tokens, current) => {
+  if (current === 'subHeader') tokens[current] = '72px';else tokens[current] = vars.space[current];
+  return tokens;
+}, {}), 'top'), "top");
+export const bottom = styleVariants(mapTokenToProperty(['none', '1', '3', '5', '7', 'subHeader'].reduce((tokens, current) => {
+  if (current === 'subHeader') tokens[current] = '72px';else tokens[current] = vars.space[current];
+  return tokens;
+}, {}), 'bottom'), "bottom");
+__vanilla_filescope__.endFileScope();

package/dist/components/StickyBox/StickyBox.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { Box } from '../Box';
+interface Props extends ComponentProps<typeof Box> {
+    top?: 'none' | '1' | '2' | '3' | '5' | '7' | 'subHeader';
+    bottom?: 'none' | '1' | '2' | '3' | 'subHeader';
+    zIndex?: 0 | 1 | 2 | 3 | 99;
+    className?: string;
+}
+export declare const StickyBox: FunctionComponent<Props>;
+export {};
+//# sourceMappingURL=StickyBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickyBox.d.ts","sourceRoot":"","sources":["../../../lib/components/StickyBox/StickyBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAI7B,UAAU,KAAM,SAAQ,cAAc,CAAC,OAAO,GAAG,CAAC;IACjD,GAAG,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC;IAChD,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,KAAK,CAgD9C,CAAC"}

package/dist/components/StickyBox/StickyBox.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["top", "bottom", "zIndex", "className", "backgroundColour", "boxShadow", "children"];
+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 clsx from 'clsx';
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Box } from "../Box/index.js";
+import * as styles from "./StickyBox.css.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const StickyBox = _ref => {
+  var _containerRef$current2;
+  let {
+      top = 'none',
+      bottom = 'none',
+      zIndex = 2,
+      className = '',
+      backgroundColour,
+      boxShadow,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const containerRef = React.useRef(null);
+  const [withShadow, setWithShadow] = useState(false);
+  useEffect(() => {
+    var _containerRef$current;
+    if (!((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.parentElement) || !window) return void 0;
+    const parentElement = containerRef.current.parentElement;
+    const onScroll = () => {
+      setWithShadow(parentElement.scrollTop > 3);
+    };
+    parentElement.removeEventListener('scroll', onScroll);
+    parentElement.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    return () => parentElement.removeEventListener('scroll', onScroll);
+  }, [(_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.parentElement]);
+  return _jsx(Box, _objectSpread(_objectSpread({
+    ref: containerRef,
+    overflow: "hidden",
+    className: clsx(className, styles.root, styles.top[top], styles.zIndex[zIndex]),
+    backgroundColour: withShadow ? backgroundColour || 'white' : void 0,
+    boxShadow: withShadow ? boxShadow || '3' : void 0
+  }, rest), {}, {
+    children: _jsx(Box, {
+      className: clsx(className, styles.content, {
+        [styles.popped]: withShadow
+      }),
+      children: children
+    })
+  }));
+};

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

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

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

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

package/dist/components/StickyBox/index.js

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

package/dist/components/StickyBox/stories.js

@@ -0,0 +1,64 @@
+"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 * as React from 'react';
+import { Box } from "../Box/index.js";
+import { FillHeightBox } from "../FillHeightBox/index.js";
+import { Heading } from "../Heading/index.js";
+import { Text } from "../Text/index.js";
+import { StickyBox } from "./index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: 'Foundation/Layout/StickyBox',
+  component: StickyBox
+};
+const Template = args => _jsxs(FillHeightBox, {
+  rounded: true,
+  includeMobile: true,
+  bottomGap: "5",
+  width: "full",
+  backgroundColour: "white",
+  borderColour: "gray",
+  borderWidth: "1",
+  boxShadow: "1",
+  height: "full",
+  borderRadius: "1",
+  children: [_jsx(StickyBox, _objectSpread(_objectSpread({
+    width: "full"
+  }, args), {}, {
+    children: _jsx(Box, {
+      matginTop: "8",
+      padding: "3",
+      width: "full",
+      backgroundColour: "yellow700",
+      borderRadius: "1",
+      overflow: "hidden",
+      children: _jsx(Heading, {
+        is: "h2",
+        align: "center",
+        colour: "white",
+        children: "I'm a sticky header"
+      })
+    })
+  })), _jsx(Box, {
+    padding: "5",
+    width: "full",
+    style: {
+      minHeight: '300vh'
+    },
+    children: Array.from({
+      length: 100
+    }).map((_, i) => _jsxs(Text, {
+      is: "p",
+      children: ["I am page content ", i + 1]
+    }, i))
+  })]
+});
+const standardProps = {
+  top: 'none'
+};
+export const standard = Template.bind(standardProps);
+standard.args = standardProps;

package/dist/components/index.d.ts

@@ -57,4 +57,7 @@ export * from './DividerLine';
 export * from './ThemeOverrideProvider';
 export * from './SliderProgress';
 export * from './HorizontalAutoScroller';
+export * from './FillHeightBox';
+export * from './StickyBox';
+export * from './ScrollPane';
 //# 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;AACjC,cAAc,0BAA0B,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;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -58,4 +58,7 @@ export * from "./ColourInput/index.js";
 export * from "./DividerLine/index.js";
 export * from "./ThemeOverrideProvider/index.js";
 export * from "./SliderProgress/index.js";
-export * from "./HorizontalAutoScroller/index.js";
+export * from "./HorizontalAutoScroller/index.js";
+export * from "./FillHeightBox/index.js";
+export * from "./StickyBox/index.js";
+export * from "./ScrollPane/index.js";

package/dist/hooks/useWindowHeightFill/index.d.ts

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

package/dist/hooks/useWindowHeightFill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useWindowHeightFill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/hooks/useWindowHeightFill/index.js

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

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+import { Tokens } from '../../themes/tokens';
+export interface UseWindowHeightFillProps {
+    bottomGap?: keyof Tokens['space'];
+    serverVhFallback?: number;
+    includeMobile?: boolean;
+    containerRef: RefObject<HTMLDivElement>;
+}
+export declare const useWindowHeightFill: ({ bottomGap, includeMobile, serverVhFallback, containerRef, }: UseWindowHeightFillProps) => string;
+export default useWindowHeightFill;
+//# sourceMappingURL=useWindowHeightFill.d.ts.map

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowHeightFill.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useWindowHeightFill/useWindowHeightFill.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,WAAW,wBAAwB;IACxC,SAAS,CAAC,EAAE,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,kEAK7B,wBAAwB,KAAG,MAiD7B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/hooks/useWindowHeightFill/useWindowHeightFill.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { useLayoutEffect, useState } from 'react';
+import { useResponsiveValue, useTheme } from "../../index.js";
+import { themeContractVars } from "../../themes/theme.css.js";
+import { getThemeTokenValue } from "../../utils/css.js";
+export const useWindowHeightFill = _ref => {
+  var _window2, _document2;
+  let {
+    bottomGap = 'none',
+    includeMobile = false,
+    serverVhFallback = 100,
+    containerRef
+  } = _ref;
+  const cappedHeight = useResponsiveValue([includeMobile,, true]);
+  const {
+    themeClass
+  } = useTheme();
+  const [containerHeight, setContainerHeight] = useState("".concat(serverVhFallback, "vh"));
+  useLayoutEffect(() => {
+    var _window, _document;
+    if (!(containerRef !== null && containerRef !== void 0 && containerRef.current) || !((_window = window) !== null && _window !== void 0 && _window.innerHeight) || !((_document = document) !== null && _document !== void 0 && _document.body)) return void 0;
+    const resize = () => {
+      const gap = getThemeTokenValue(themeClass, themeContractVars.space[bottomGap]) || '0px';
+      const availableHeight = window.innerHeight - containerRef.current.getBoundingClientRect().top;
+      setContainerHeight(gap ? "calc(".concat(availableHeight, "px - ").concat(gap, ")") : "".concat(availableHeight, "px"));
+    };
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(document.body);
+    window.removeEventListener('resize', resize);
+    window.addEventListener('resize', resize, {
+      passive: true
+    });
+    resize();
+    return () => {
+      window.removeEventListener('resize', resize);
+      resizeObserver.disconnect();
+    };
+  }, [containerRef === null || containerRef === void 0 ? void 0 : containerRef.current, (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.innerHeight, (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.body, themeClass, bottomGap]);
+  return cappedHeight ? containerHeight : 'auto';
+};
+export default useWindowHeightFill;

package/dist/utils/css.d.ts

@@ -1,3 +1,3 @@
 export declare const cssVarUnwrap: (value: string) => string;
-export declare const getThemeTokenValue: (themeClass: string, token: string) => string | null;
+export declare const getThemeTokenValue: (themeClass?: string | null, token?: string | null) => string;
 //# sourceMappingURL=css.d.ts.map

package/dist/utils/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,UAAW,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,eAClB,MAAM,SACX,MAAM,KACX,MAAM,GAAG,IAOX,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../lib/utils/css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,UAAW,MAAM,WAIzC,CAAC;AAEF,eAAO,MAAM,kBAAkB,gBACjB,MAAM,GAAG,IAAI,UAClB,MAAM,GAAG,IAAI,KACnB,MAQF,CAAC"}

package/dist/utils/css.js

@@ -7,8 +7,9 @@ export const cssVarUnwrap = value => {
 };
 export const getThemeTokenValue = (themeClass, token) => {
   var _getComputedStyle$get;
+  if (!themeClass || !token) return '';
   const cssVar = cssVarUnwrap(token);
   const themedElement = document.querySelector(".".concat(themeClass));
-  if (!themedElement || !cssVar) return null;
-  return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || null;
+  if (!themedElement || !cssVar) return '';
+  return ((_getComputedStyle$get = getComputedStyle(themedElement).getPropertyValue(cssVar)) === null || _getComputedStyle$get === void 0 ? void 0 : _getComputedStyle$get.trim()) || '';
 };

package/package.json

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