@searchspring/snap-preact-components 0.20.0

package/dist/cjs/components/Organisms/Results/Results.js

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Results = void 0;
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = require("@emotion/react");
+var classnames_1 = __importDefault(require("classnames"));
+var InlineBanner_1 = require("../../Atoms/Merchandising/InlineBanner");
+var Result_1 = require("../../Molecules/Result");
+var types_1 = require("../../../types");
+var utilities_1 = require("../../../utilities");
+var providers_1 = require("../../../providers");
+var useDisplaySettings_1 = require("../../../hooks/useDisplaySettings");
+var CSS = {
+    results: function (_a) {
+        var _b;
+        var columns = _a.columns, gapSize = _a.gapSize;
+        return (0, react_1.css)({
+            display: 'flex',
+            flexFlow: 'row wrap',
+            gap: gapSize,
+            gridTemplateRows: 'auto',
+            gridTemplateColumns: "repeat(".concat(columns, ", 1fr)"),
+            '& .ss__result': (_b = {
+                    boxSizing: 'border-box',
+                    flex: '0 1 auto',
+                    width: "calc(".concat(100 / columns, "% - (").concat(columns - 1, " * ").concat(gapSize, " / ").concat(columns, " ) )"),
+                    marginRight: gapSize,
+                    marginBottom: gapSize
+                },
+                _b["&:nth-of-type(".concat(columns, "n)")] = {
+                    marginRight: '0',
+                },
+                _b["&:nth-last-of-type(-n+".concat(columns, ")")] = {
+                    marginBottom: '0',
+                },
+                _b),
+            '@supports (display: grid)': {
+                display: 'grid',
+                '& .ss__result': {
+                    width: 'initial',
+                    margin: 0,
+                },
+            },
+        });
+    },
+};
+var defaultBreakpointsProps = {
+    0: {
+        columns: 1,
+    },
+    540: {
+        columns: 2,
+    },
+    768: {
+        columns: 3,
+    },
+    991: {
+        columns: 4,
+    },
+};
+exports.Results = (0, mobx_react_lite_1.observer)(function (properties) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var globalTheme = (0, providers_1.useTheme)();
+    var props = __assign(__assign(__assign({ 
+        // default props
+        results: (_b = (_a = properties.controller) === null || _a === void 0 ? void 0 : _a.store) === null || _b === void 0 ? void 0 : _b.results, columns: 4, gapSize: '20px', layout: types_1.Layout.GRID, breakpoints: defaultBreakpointsProps }, (_c = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _c === void 0 ? void 0 : _c.results), properties), (_e = (_d = properties.theme) === null || _d === void 0 ? void 0 : _d.components) === null || _e === void 0 ? void 0 : _e.results);
+    var displaySettings = (0, useDisplaySettings_1.useDisplaySettings)(props.breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        props = __assign(__assign({}, props), displaySettings);
+    }
+    var disableStyles = props.disableStyles, className = props.className, layout = props.layout, style = props.style, controller = props.controller;
+    var subProps = {
+        result: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__results__result' }, (_f = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _f === void 0 ? void 0 : _f.result), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+        inlineBanner: __assign(__assign(__assign({ 
+            // default props
+            className: 'ss__results__inline-banner' }, (_g = globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.components) === null || _g === void 0 ? void 0 : _g.inlineBanner), (0, utilities_1.defined)({
+            disableStyles: disableStyles,
+        })), { 
+            // component theme overrides
+            theme: props.theme }),
+    };
+    var results;
+    if ((props === null || props === void 0 ? void 0 : props.columns) > 0 && (props === null || props === void 0 ? void 0 : props.rows) > 0) {
+        results = props.results.slice(0, props.columns * props.rows);
+    }
+    else {
+        results = props.results;
+    }
+    var styling = {};
+    if (!disableStyles) {
+        styling.css = [CSS.results({ columns: layout == types_1.Layout.LIST ? 1 : props.columns, gapSize: props.gapSize }), style];
+    }
+    else if (style) {
+        styling.css = [style];
+    }
+    return (results === null || results === void 0 ? void 0 : results.length) ? ((0, react_1.jsx)(providers_1.CacheProvider, null,
+        (0, react_1.jsx)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__results', className) }), results.map(function (result) {
+            return (function () {
+                switch (result.type) {
+                    case types_1.BannerType.BANNER:
+                        return (0, react_1.jsx)(InlineBanner_1.InlineBanner, __assign({ key: result.uid }, subProps.inlineBanner, { banner: result, layout: props.layout }));
+                    default:
+                        return (0, react_1.jsx)(Result_1.Result, __assign({ key: result.uid }, subProps.result, { result: result, layout: props.layout, controller: controller }));
+                }
+            })();
+        })))) : null;
+});

package/dist/cjs/components/Organisms/Results/Results.stories.d.ts

@@ -0,0 +1,163 @@
+/// <reference types="react" />
+import { h } from 'preact';
+import { ResultsProp } from './Results';
+import { Layout } from '../../../types';
+declare const _default: {
+    title: string;
+    component: ((properties: ResultsProp) => JSX.Element) & {
+        displayName: string;
+    };
+    parameters: {
+        docs: {
+            page: () => h.JSX.Element;
+        };
+    };
+    decorators: ((Story: any) => h.JSX.Element)[];
+    argTypes: {
+        className: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        disableStyles: {
+            defaultValue: boolean;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        style: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        theme: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        results: {
+            description: string;
+            type: {
+                required: boolean;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        layout: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+                options: Layout[];
+            };
+        };
+        columns: {
+            defaultValue: number;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        rows: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        gapSize: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        breakpoints: {
+            defaultValue: {};
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+        controller: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Grid: any;
+export declare const List: any;
+//# sourceMappingURL=Results.stories.d.ts.map

package/dist/cjs/components/Organisms/Results/Results.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Results.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/Results.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAI3B,OAAO,EAAW,WAAW,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,wBAqGE;AAQF,eAAO,MAAM,IAAI,KAAwB,CAAC;AAc1C,eAAO,MAAM,IAAI,KAAwB,CAAC"}

package/dist/cjs/components/Organisms/Results/Results.stories.js

@@ -0,0 +1,186 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.Grid = void 0;
+var preact_1 = require("preact");
+var blocks_1 = require("@storybook/addon-docs/blocks");
+var Results_1 = require("./Results");
+var utilities_1 = require("../../../utilities");
+var snapify_1 = require("../../../utilities/snapify");
+var types_1 = require("../../../types");
+var readme_md_1 = __importDefault(require("./readme.md"));
+exports.default = {
+    title: "Organisms/Results",
+    component: Results_1.Results,
+    parameters: {
+        docs: {
+            page: function () { return ((0, preact_1.h)("div", null,
+                (0, preact_1.h)(readme_md_1.default, null),
+                (0, preact_1.h)(blocks_1.ArgsTable, { story: blocks_1.PRIMARY_STORY }))); },
+        },
+    },
+    decorators: [
+        function (Story) { return ((0, preact_1.h)("div", { style: {
+                maxWidth: '900px',
+            } },
+            (0, preact_1.h)(Story, null))); },
+    ],
+    argTypes: __assign({ results: {
+            description: 'Results store reference',
+            type: { required: false },
+            table: {
+                type: {
+                    summary: 'Results store object',
+                },
+            },
+            control: { type: 'none' },
+        }, layout: {
+            description: 'Results layout',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+            control: {
+                type: 'select',
+                options: [types_1.Layout.GRID, types_1.Layout.LIST],
+            },
+        }, columns: {
+            defaultValue: 4,
+            description: 'Number of columns in results grid',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+                defaultValue: { summary: 4 },
+            },
+            control: { type: 'number' },
+        }, rows: {
+            description: 'Number of rows in results grid - adding this will put a hard limit on the results',
+            table: {
+                type: {
+                    summary: 'number',
+                },
+            },
+            control: { type: 'number' },
+        }, gapSize: {
+            defaultValue: '20px',
+            description: 'Gap size between rows and columns',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+                defaultValue: { summary: '20px' },
+            },
+            control: { type: 'text' },
+        }, breakpoints: {
+            defaultValue: {},
+            description: 'Breakpoints options object',
+            table: {
+                type: {
+                    summary: 'object',
+                },
+            },
+            control: {
+                type: 'object',
+            },
+        }, controller: {
+            description: 'Controller reference',
+            table: {
+                type: {
+                    summary: 'Controller',
+                },
+            },
+            control: { type: 'none' },
+        } }, utilities_1.componentArgs),
+};
+var snapInstance = snapify_1.Snapify.search({ id: 'Results', globals: { siteId: '8uyt2m' } });
+var GridTemplate = function (args, _a) {
+    var _b;
+    var controller = _a.loaded.controller;
+    return (0, preact_1.h)(Results_1.Results, __assign({}, args, { controller: controller, results: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results }));
+};
+exports.Grid = GridTemplate.bind({});
+exports.Grid.loaders = [
+    function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, snapInstance.search()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, {
+                            controller: snapInstance,
+                        }];
+            }
+        });
+    }); },
+];
+var ListTemplate = function (args, _a) {
+    var _b;
+    var controller = _a.loaded.controller;
+    return (0, preact_1.h)(Results_1.Results, __assign({}, args, { controller: controller, results: (_b = controller === null || controller === void 0 ? void 0 : controller.store) === null || _b === void 0 ? void 0 : _b.results, layout: types_1.Layout.LIST }));
+};
+exports.List = ListTemplate.bind({});
+exports.List.loaders = [
+    function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, snapInstance.search()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, {
+                            controller: snapInstance,
+                        }];
+            }
+        });
+    }); },
+];

package/dist/cjs/components/Organisms/Results/index.d.ts

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

package/dist/cjs/components/Organisms/Results/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Organisms/Results/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/cjs/components/Organisms/Results/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Results"), exports);

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

@@ -0,0 +1,5 @@
+export * from './useClickOutside';
+export * from './useMediaQuery';
+export * from './useIntersection';
+export * from './useDisplaySettings';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC"}

package/dist/cjs/hooks/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useClickOutside"), exports);
+__exportStar(require("./useMediaQuery"), exports);
+__exportStar(require("./useIntersection"), exports);
+__exportStar(require("./useDisplaySettings"), exports);

package/dist/cjs/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+export declare function useClickOutside<T extends HTMLElement>(callback: (e: Event) => void): preact.RefObject<T>;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/cjs/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAGA,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAmBxG"}

package/dist/cjs/hooks/useClickOutside.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickOutside = void 0;
+var hooks_1 = require("preact/hooks");
+function useClickOutside(callback) {
+    var callbackRef = (0, hooks_1.useRef)();
+    var innerRef = (0, hooks_1.useRef)();
+    (0, hooks_1.useEffect)(function () {
+        callbackRef.current = callback;
+    });
+    (0, hooks_1.useEffect)(function () {
+        document.addEventListener('click', handleClick);
+        return function () { return document.removeEventListener('click', handleClick); };
+        function handleClick(e) {
+            if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target))
+                callbackRef.current(e);
+        }
+    }, []);
+    return innerRef;
+}
+exports.useClickOutside = useClickOutside;

package/dist/cjs/hooks/useDisplaySettings.d.ts

@@ -0,0 +1,3 @@
+import { BreakpointsProps, BreakpointsEntry } from '../components/Organisms/Results/Results';
+export declare function useDisplaySettings(breakpointsObj: BreakpointsProps): BreakpointsEntry;
+//# sourceMappingURL=useDisplaySettings.d.ts.map

package/dist/cjs/hooks/useDisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAE7F,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,CAoBrF"}

package/dist/cjs/hooks/useDisplaySettings.js

@@ -0,0 +1,69 @@
+"use strict";
+var _this = this;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisplaySettings = void 0;
+var hooks_1 = require("preact/hooks");
+function useDisplaySettings(breakpointsObj) {
+    if (!breakpointsObj || !Object.keys(breakpointsObj).length)
+        return;
+    // Call getDisplaySettings right away to prevent flashing
+    var _a = (0, hooks_1.useState)(getDisplaySettings(breakpointsObj)), displaySettings = _a[0], setDisplaySettings = _a[1];
+    (0, hooks_1.useEffect)(function () {
+        function handleResize() {
+            // Set display settings to state
+            setDisplaySettings(getDisplaySettings(breakpointsObj));
+        }
+        // Add event listener
+        var debouncedHandleResize = debounce(function () { return handleResize(); });
+        window.addEventListener('resize', debouncedHandleResize);
+        // Remove event listener on cleanup
+        return function () { return window.removeEventListener('resize', debouncedHandleResize); };
+    }, []);
+    return displaySettings;
+}
+exports.useDisplaySettings = useDisplaySettings;
+var getDisplaySettings = function (breakpoints) {
+    var _a;
+    var breakpointsSettings;
+    var currentScreenWidth = window.innerWidth;
+    var sortedList = (_a = Object.keys(breakpoints)) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return parseInt(a) - parseInt(b); }).map(function (vp) {
+        var _a;
+        return (_a = {}, _a[vp] = breakpoints[vp], _a);
+    });
+    if (sortedList.length) {
+        //loop through and find the desired breakpoints setting
+        for (var i = 0; i < sortedList.length; i++) {
+            var entry = sortedList[i];
+            var breakpoint = parseInt(Object.keys(entry)[0]);
+            var isLastEntry = i + 1 === sortedList.length;
+            var isFirstEntry = i === 0;
+            if (isLastEntry || (isFirstEntry && currentScreenWidth < breakpoint)) {
+                // last entry or a '0' value breakpoint was not provided
+                breakpointsSettings = sortedList[i][breakpoint];
+                break;
+            }
+            else {
+                var nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
+                if (currentScreenWidth >= breakpoint && currentScreenWidth < nextBreakpoint) {
+                    breakpointsSettings = sortedList[i][breakpoint];
+                    break;
+                }
+            }
+        }
+        return breakpointsSettings;
+    }
+};
+var debounce = function (func, timeout) {
+    if (timeout === void 0) { timeout = 200; }
+    var timer;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            func.apply(_this, args);
+        }, timeout);
+    };
+};

package/dist/cjs/hooks/useIntersection.d.ts

@@ -0,0 +1,2 @@
+export declare const useIntersection: (ref: any, rootMargin?: string, fireOnce?: boolean) => boolean;
+//# sourceMappingURL=useIntersection.d.ts.map

package/dist/cjs/hooks/useIntersection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIntersection.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,gEAyB3B,CAAC"}

package/dist/cjs/hooks/useIntersection.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersection = void 0;
+var hooks_1 = require("preact/hooks");
+var useIntersection = function (ref, rootMargin, fireOnce) {
+    if (rootMargin === void 0) { rootMargin = '0px'; }
+    if (fireOnce === void 0) { fireOnce = false; }
+    // State and setter for storing whether element is visible
+    var _a = (0, hooks_1.useState)(false), isIntersecting = _a[0], setIntersecting = _a[1];
+    (0, hooks_1.useEffect)(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            // Update our state when observer callback fires
+            setIntersecting(entry.isIntersecting);
+            if (fireOnce && entry.isIntersecting) {
+                observer.unobserve(ref.current);
+            }
+        }, {
+            rootMargin: rootMargin,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return function () {
+            observer.unobserve(ref.current);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+    return isIntersecting;
+};
+exports.useIntersection = useIntersection;