@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/components/src/components/Templates/SearchHorizontal/SearchHorizontal.js

@@ -1,21 +1,10 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchHorizontal = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var Search_1 = require("../Search/Search");
-exports.SearchHorizontal = (0, mobx_react_lite_1.observer)(function (properties) {
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Search_1.Search, __assign({}, properties, { alias: "searchHorizontal", internalClassName: "ss__search-horizontal" })) }));
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const Search_1 = require("../Search/Search");
+exports.SearchHorizontal = (0, mobx_react_lite_1.observer)((properties) => {
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Search_1.Search, { ...properties, alias: "searchHorizontal", internalClassName: "ss__search-horizontal" }) }));
 });

package/dist/cjs/components/src/components/Trackers/Recommendation/ProfileTracker/RecommendationProfileTracker.js

@@ -1,35 +1,24 @@
 "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.RecommendationProfileTracker = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var preact_1 = require("preact");
-var react_1 = require("@emotion/react");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var classnames_1 = __importDefault(require("classnames"));
-var utilities_1 = require("../../../../utilities");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const preact_1 = require("preact");
+const react_1 = require("@emotion/react");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const classnames_1 = __importDefault(require("classnames"));
+const utilities_1 = require("../../../../utilities");
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
 /**
  * @deprecated RecommendationProfileTracker is deprecated and is no longer functional
  */
-exports.RecommendationProfileTracker = (0, mobx_react_lite_1.observer)(function (properties) {
-    var children = properties.children, className = properties.className, internalClassName = properties.internalClassName;
-    var childs = (0, preact_1.toChildArray)(children);
-    var styling = (0, utilities_1.mergeStyles)(properties, defaultStyles);
-    return childs.length ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__recommendation-profile-tracker', className, internalClassName) }, styling, { children: children }))) : null;
+exports.RecommendationProfileTracker = (0, mobx_react_lite_1.observer)((properties) => {
+    const { children, className, internalClassName } = properties;
+    const childs = (0, preact_1.toChildArray)(children);
+    const styling = (0, utilities_1.mergeStyles)(properties, defaultStyles);
+    return childs.length ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__recommendation-profile-tracker', className, internalClassName), ...styling, children: children })) : null;
 });

package/dist/cjs/components/src/components/Trackers/ResultTracker/ResultTracker.js

@@ -1,52 +1,44 @@
 "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.ResultTracker = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var CSS = {
-    ResultTracker: function () { return (0, react_1.css)({}); },
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const CSS = {
+    ResultTracker: () => (0, react_1.css)({}),
 };
-exports.ResultTracker = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var props = (0, utilities_1.mergeProps)('resultTracker', globalTheme, {}, properties);
-    var defaultTrack = {
+exports.ResultTracker = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const props = (0, utilities_1.mergeProps)('resultTracker', globalTheme, {}, properties);
+    const defaultTrack = {
         impression: true,
         click: true,
     };
-    var children = props.children, result = props.result, track = props.track, controller = props.controller, className = props.className, internalClassName = props.internalClassName, disableStyles = props.disableStyles, style = props.style;
-    var mergedTrack = __assign(__assign({}, defaultTrack), track);
-    var _a = (0, utilities_1.createImpressionObserver)(), ref = _a.ref, inViewport = _a.inViewport;
+    const { children, result, track, controller, className, internalClassName, disableStyles, style } = props;
+    const mergedTrack = {
+        ...defaultTrack,
+        ...track,
+    };
+    const { ref, inViewport } = (0, utilities_1.createImpressionObserver)();
     if (inViewport && mergedTrack.impression) {
-        controller === null || controller === void 0 ? void 0 : controller.track.product.impression(result);
+        controller?.track.product.impression(result);
     }
-    var styling = {};
+    const styling = {};
     if (!disableStyles) {
         styling.css = [CSS.ResultTracker(), style];
     }
     else if (style) {
         styling.css = [style];
     }
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: (0, classnames_1.default)('ss__result-tracker', "ss__".concat(controller === null || controller === void 0 ? void 0 : controller.type, "-result-tracker"), className, internalClassName), onClick: function (e) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__result-tracker', `ss__${controller?.type}-result-tracker`, className, internalClassName), onClick: (e) => {
             if (mergedTrack.click) {
-                controller === null || controller === void 0 ? void 0 : controller.track.product.click(e, result);
+                controller?.track.product.click(e, result);
             }
-        }, ref: ref }, styling, { children: children })));
+        }, ref: ref, ...styling, children: children }));
 });

package/dist/cjs/components/src/hooks/createRecommendationTemplate.js

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRecommendationTemplate = createRecommendationTemplate;
-var providers_1 = require("../providers");
-var useCreateController_1 = require("./useCreateController");
-var useComponent_1 = require("./useComponent");
+const providers_1 = require("../providers");
+const useCreateController_1 = require("./useCreateController");
+const useComponent_1 = require("./useComponent");
 function createRecommendationTemplate(templates) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    var recommendationTemplateComponent;
-    var recommendationTemplateResultComponent;
-    var recsController;
-    var snap = (0, providers_1.useSnap)();
-    var recommendationTemplatesEnabled = Boolean((_a = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _a === void 0 ? void 0 : _a.enabled);
-    var componentName = recommendationTemplatesEnabled ? ((_b = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _b === void 0 ? void 0 : _b.component) || 'RecommendationGrid' : undefined;
-    var resultComponentName = recommendationTemplatesEnabled ? ((_c = templates === null || templates === void 0 ? void 0 : templates.recommendation) === null || _c === void 0 ? void 0 : _c.resultComponent) || 'Result' : undefined;
-    var recommendationTemplateComponentMap = ((_d = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _d === void 0 ? void 0 : _d.library.import.component.recommendation.default) || {};
-    var recommendationTemplateResultComponentMap = ((_e = snap === null || snap === void 0 ? void 0 : snap.templates) === null || _e === void 0 ? void 0 : _e.library.import.component.result) || {};
-    var _j = (0, useComponent_1.useComponent)(recommendationTemplateComponentMap, componentName), namedRecommendationTemplateComponent = _j.ComponentOverride, shouldWaitForNamedRecommendationTemplateComponent = _j.shouldWaitForNamedOverride;
-    var _k = (0, useComponent_1.useComponent)(recommendationTemplateResultComponentMap, resultComponentName), namedRecommendationTemplateResultComponent = _k.ComponentOverride, shouldWaitForNamedRecommendationTemplateResultComponent = _k.shouldWaitForNamedOverride;
+    let recommendationTemplateComponent;
+    let recommendationTemplateResultComponent;
+    let recsController;
+    const snap = (0, providers_1.useSnap)();
+    const recommendationTemplatesEnabled = Boolean(templates?.recommendation?.enabled);
+    const componentName = recommendationTemplatesEnabled ? templates?.recommendation?.component || 'RecommendationGrid' : undefined;
+    const resultComponentName = recommendationTemplatesEnabled ? templates?.recommendation?.resultComponent || 'Result' : undefined;
+    const recommendationTemplateComponentMap = snap?.templates?.library.import.component.recommendation.default || {};
+    const recommendationTemplateResultComponentMap = snap?.templates?.library.import.component.result || {};
+    const { ComponentOverride: namedRecommendationTemplateComponent, shouldWaitForNamedOverride: shouldWaitForNamedRecommendationTemplateComponent } = (0, useComponent_1.useComponent)(recommendationTemplateComponentMap, componentName);
+    const { ComponentOverride: namedRecommendationTemplateResultComponent, shouldWaitForNamedOverride: shouldWaitForNamedRecommendationTemplateResultComponent, } = (0, useComponent_1.useComponent)(recommendationTemplateResultComponentMap, resultComponentName);
     if (recommendationTemplatesEnabled) {
         recommendationTemplateComponent = shouldWaitForNamedRecommendationTemplateComponent
             ? undefined
@@ -24,20 +23,20 @@ function createRecommendationTemplate(templates) {
         recommendationTemplateResultComponent = shouldWaitForNamedRecommendationTemplateResultComponent
             ? undefined
             : namedRecommendationTemplateResultComponent;
-        if (snap === null || snap === void 0 ? void 0 : snap.templates) {
-            var mergedConfig = Object.assign({
+        if (snap?.templates) {
+            const mergedConfig = Object.assign({
                 id: '',
                 tag: 'no-results',
                 branch: 'production',
             }, templates.recommendation.config);
-            mergedConfig.id = mergedConfig.id || "search-".concat(mergedConfig.tag);
+            mergedConfig.id = mergedConfig.id || `search-${mergedConfig.tag}`;
             recsController = (0, useCreateController_1.useCreateController)(snap, 'recommendation', mergedConfig);
-            if (!((_f = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _f === void 0 ? void 0 : _f.loaded) && !((_g = recsController === null || recsController === void 0 ? void 0 : recsController.store) === null || _g === void 0 ? void 0 : _g.loading) && ((_h = recsController === null || recsController === void 0 ? void 0 : recsController.store.error) === null || _h === void 0 ? void 0 : _h.type) !== 'error') {
-                recsController === null || recsController === void 0 ? void 0 : recsController.search();
+            if (!recsController?.store?.loaded && !recsController?.store?.loading && recsController?.store.error?.type !== 'error') {
+                recsController?.search();
             }
         }
     }
-    var returnObj = {
+    const returnObj = {
         RecommendationTemplateComponent: recommendationTemplateComponent,
         RecommendationTemplateResultComponent: recommendationTemplateResultComponent,
         recsController: recsController,

package/dist/cjs/components/src/hooks/useA11y.js

@@ -2,35 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FOCUSABLE_ELEMENTS = exports.A11Y_ATTRIBUTE = void 0;
 exports.useA11y = useA11y;
-var KEYCODE_TAB = 9;
-var KEYCODE_ESC = 27;
+const KEYCODE_TAB = 9;
+const KEYCODE_ESC = 27;
 exports.A11Y_ATTRIBUTE = 'ss-a11y';
 exports.FOCUSABLE_ELEMENTS = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]';
 function useA11y(elem, tabIndex, trapFocus, escCallback) {
-    var _a;
-    var styleId = 'ssA11yFocusStyle';
-    if (!document.querySelector("#".concat(styleId))) {
-        var style = document.createElement('style');
+    const styleId = 'ssA11yFocusStyle';
+    if (!document.querySelector(`#${styleId}`)) {
+        const style = document.createElement('style');
         style.type = 'text/css';
         style.id = styleId;
-        style.innerHTML = "[".concat(exports.A11Y_ATTRIBUTE, "]:focus-visible { outline: -webkit-focus-ring-color auto 1px !important; }");
+        style.innerHTML = `[${exports.A11Y_ATTRIBUTE}]:focus-visible { outline: -webkit-focus-ring-color auto 1px !important; }`;
         document.getElementsByTagName('head')[0].appendChild(style);
     }
-    if (elem && !((_a = elem.attributes) === null || _a === void 0 ? void 0 : _a[exports.A11Y_ATTRIBUTE])) {
+    if (elem && !elem.attributes?.[exports.A11Y_ATTRIBUTE]) {
         //A11y attribute is for debouncing on rerenders
         elem.setAttribute(exports.A11Y_ATTRIBUTE, true);
         //tab index 0 is default and used for actionable elements.
-        elem.setAttribute('tabIndex', "".concat(tabIndex || 0));
-        elem.addEventListener('keydown', function (event) {
+        elem.setAttribute('tabIndex', `${tabIndex || 0}`);
+        elem.addEventListener('keydown', (event) => {
             if (event.code === 'Space' || event.code === 'Enter') {
                 elem.click();
             }
         });
         if (trapFocus) {
             elem.addEventListener('keydown', function (e) {
-                var focusableEls = elem.querySelectorAll(exports.FOCUSABLE_ELEMENTS);
-                var firstFocusableEl = focusableEls[0];
-                var lastFocusableEl = focusableEls[focusableEls.length - 1];
+                const focusableEls = elem.querySelectorAll(exports.FOCUSABLE_ELEMENTS);
+                const firstFocusableEl = focusableEls[0];
+                const lastFocusableEl = focusableEls[focusableEls.length - 1];
                 //esc key
                 if (e.keyCode == KEYCODE_ESC) {
                     elem.focus();

package/dist/cjs/components/src/hooks/useAcRenderedInput.js

@@ -1,157 +1,109 @@
 "use strict";
-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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
-    }
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAcRenderedInput = useAcRenderedInput;
-var hooks_1 = require("preact/hooks");
-function useAcRenderedInput(_a) {
-    var _this = this;
-    var input = _a.input, controller = _a.controller, renderInput = _a.renderInput, buttonSelector = _a.buttonSelector, renderedInputRef = _a.renderedInputRef, setActive = _a.setActive;
-    var _b = (0, hooks_1.useState)(input), _input = _b[0], setInput = _b[1];
-    var _c = (0, hooks_1.useState)(false), renderedInputInitialized = _c[0], setRenderedInputInitialized = _c[1];
-    var onClick = function () {
+const hooks_1 = require("preact/hooks");
+function useAcRenderedInput({ input, controller, renderInput, buttonSelector, renderedInputRef, setActive, }) {
+    const [_input, setInput] = (0, hooks_1.useState)(input);
+    const [renderedInputInitialized, setRenderedInputInitialized] = (0, hooks_1.useState)(false);
+    const onClick = () => {
         if (setActive) {
             setActive(true);
         }
         //this is needed to await the rendered input to render before binding the controller
-        setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        if (!!renderedInputInitialized) return [3 /*break*/, 2];
-                        setInput(renderedInputRef.current);
-                        controller.config.selector = "".concat(controller.config.selector, ", .autocomplete__search-input input");
-                        return [4 /*yield*/, controller.bind()];
-                    case 1:
-                        _b.sent();
-                        (_a = renderedInputRef === null || renderedInputRef === void 0 ? void 0 : renderedInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        _b.label = 2;
-                    case 2:
-                        setRenderedInputInitialized(true);
-                        return [2 /*return*/];
-                }
-            });
-        }); });
+        setTimeout(async () => {
+            if (!renderedInputInitialized) {
+                setInput(renderedInputRef.current);
+                controller.config.selector = `${controller.config.selector}, .autocomplete__search-input input`;
+                await controller.bind();
+                renderedInputRef?.current?.focus();
+            }
+            setRenderedInputInitialized(true);
+        });
     };
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         // track pointer-initiated focus to avoid rendering the overlay between mousedown and mouseup,
         // which splits the click target to the nearest common ancestor instead of the input element
-        var pointerFocus = false;
-        var clearPointerFocus = function () {
+        let pointerFocus = false;
+        const clearPointerFocus = () => {
             pointerFocus = false;
         };
         if (renderInput && buttonSelector) {
-            var button_1;
+            let button;
             if (typeof buttonSelector == 'string') {
-                button_1 = document.querySelector(buttonSelector);
+                button = document.querySelector(buttonSelector);
             }
             else {
-                button_1 = buttonSelector;
+                button = buttonSelector;
             }
-            if (button_1) {
-                var onMousedown_1 = function () {
+            if (button) {
+                const onMousedown = () => {
                     pointerFocus = true;
                 };
-                var onClickBtn_1 = function (e) {
+                const onClickBtn = (e) => {
                     pointerFocus = false;
                     e.stopPropagation();
                     onClick();
                 };
-                var onFocusBtn_1 = function () {
+                const onFocusBtn = () => {
                     if (!pointerFocus) {
                         onClick();
                     }
                 };
-                var onSelectBtn_1 = function () { return onClick(); };
-                button_1.addEventListener('mousedown', onMousedown_1);
+                const onSelectBtn = () => onClick();
+                button.addEventListener('mousedown', onMousedown);
                 document.addEventListener('mouseup', clearPointerFocus, true);
-                button_1.addEventListener('click', onClickBtn_1);
-                button_1.addEventListener('focus', onFocusBtn_1);
-                button_1.addEventListener('select', onSelectBtn_1);
-                return function () {
-                    button_1.removeEventListener('mousedown', onMousedown_1);
+                button.addEventListener('click', onClickBtn);
+                button.addEventListener('focus', onFocusBtn);
+                button.addEventListener('select', onSelectBtn);
+                return () => {
+                    button.removeEventListener('mousedown', onMousedown);
                     document.removeEventListener('mouseup', clearPointerFocus, true);
-                    button_1.removeEventListener('click', onClickBtn_1);
-                    button_1.removeEventListener('focus', onFocusBtn_1);
-                    button_1.removeEventListener('select', onSelectBtn_1);
+                    button.removeEventListener('click', onClickBtn);
+                    button.removeEventListener('focus', onFocusBtn);
+                    button.removeEventListener('select', onSelectBtn);
                 };
             }
         }
         else {
             if (setActive) {
-                var onMousedown_2 = function () {
+                const onMousedown = () => {
                     pointerFocus = true;
                 };
-                var onClickInput_1 = function (e) {
+                const onClickInput = (e) => {
                     pointerFocus = false;
                     e.stopPropagation();
                     setActive(true);
                 };
-                var onFocusInput_1 = function () {
+                const onFocusInput = () => {
                     if (!pointerFocus) {
                         setActive(true);
                     }
                 };
-                var onSelectInput_1 = function () { return setActive(true); };
-                input.addEventListener('mousedown', onMousedown_2);
+                const onSelectInput = () => setActive(true);
+                input.addEventListener('mousedown', onMousedown);
                 document.addEventListener('mouseup', clearPointerFocus, true);
-                input.addEventListener('click', onClickInput_1);
-                input.addEventListener('focus', onFocusInput_1);
-                input.addEventListener('select', onSelectInput_1);
-                return function () {
-                    input.removeEventListener('mousedown', onMousedown_2);
+                input.addEventListener('click', onClickInput);
+                input.addEventListener('focus', onFocusInput);
+                input.addEventListener('select', onSelectInput);
+                return () => {
+                    input.removeEventListener('mousedown', onMousedown);
                     document.removeEventListener('mouseup', clearPointerFocus, true);
-                    input.removeEventListener('click', onClickInput_1);
-                    input.removeEventListener('focus', onFocusInput_1);
-                    input.removeEventListener('select', onSelectInput_1);
+                    input.removeEventListener('click', onClickInput);
+                    input.removeEventListener('focus', onFocusInput);
+                    input.removeEventListener('select', onSelectInput);
                 };
             }
         }
     }, []);
     // this is used to keep the values consistent between the native input and the rendered input
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (input !== _input && _input) {
-            var onInput_1 = function () {
+            const onInput = () => {
                 input.value = _input.value;
             };
-            _input.addEventListener('input', onInput_1);
-            return function () {
-                _input.removeEventListener('input', onInput_1);
+            _input.addEventListener('input', onInput);
+            return () => {
+                _input.removeEventListener('input', onInput);
             };
         }
     }, [_input]);

package/dist/cjs/components/src/hooks/useClickOutside.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useClickOutside = useClickOutside;
-var hooks_1 = require("preact/hooks");
+const 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 () {
+    const callbackRef = (0, hooks_1.useRef)();
+    const innerRef = (0, hooks_1.useRef)();
+    (0, hooks_1.useEffect)(() => {
         callbackRef.current = callback;
     });
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         document.addEventListener('click', handleClick);
-        return function () { return document.removeEventListener('click', handleClick); };
+        return () => document.removeEventListener('click', handleClick);
         function handleClick(e) {
             if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target))
                 callbackRef.current(e);

package/dist/cjs/components/src/hooks/useComponent.js

@@ -1,61 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComponent = void 0;
-var hooks_1 = require("preact/hooks");
-var useComponent = function (map, name) {
-    var _a = (0, hooks_1.useState)(undefined), importedComponent = _a[0], setImportedComponent = _a[1];
-    var _b = (0, hooks_1.useState)(false), importFailed = _b[0], setImportFailed = _b[1];
-    (0, hooks_1.useEffect)(function () {
+const hooks_1 = require("preact/hooks");
+const useComponent = (map, name) => {
+    const [importedComponent, setImportedComponent] = (0, hooks_1.useState)(undefined);
+    const [importFailed, setImportFailed] = (0, hooks_1.useState)(false);
+    (0, hooks_1.useEffect)(() => {
         // This flag belongs to one specific effect run.
         // Cleanup flips it so any async work from that run can no longer update state.
-        var isActive = true;
+        let isActive = true;
         if (!name) {
             // Clear the current component when nothing is selected.
             setImportedComponent(undefined);
-            return function () {
+            return () => {
                 isActive = false;
             };
         }
         setImportFailed(false);
-        var importFn = map[name];
+        const importFn = map[name];
         if (importFn && typeof importFn === 'function') {
-            var componentFn_1 = importFn();
-            if (componentFn_1 instanceof Promise) {
+            const componentFn = importFn();
+            if (componentFn instanceof Promise) {
                 // Guard against stale promises resolving after the effect has moved on.
-                componentFn_1
-                    .then(function (component) {
+                componentFn
+                    .then((component) => {
                     if (!isActive) {
                         return;
                     }
-                    setImportedComponent(function () { return component; });
+                    setImportedComponent(() => component);
                 })
-                    .catch(function (error) {
+                    .catch((error) => {
                     if (!isActive) {
                         return;
                     }
                     setImportFailed(true);
                     setImportedComponent(undefined);
-                    console.warn("Failed to load component \"".concat(name, "\"."), error);
+                    console.warn(`Failed to load component "${name}".`, error);
                 });
             }
             else {
                 // Synchronous resolution can update immediately as long as this effect is still current.
                 if (isActive) {
-                    setImportedComponent(function () { return componentFn_1; });
+                    setImportedComponent(() => componentFn);
                 }
             }
         }
         else {
             // Missing map entries intentionally clear the component and warn for easier debugging.
             setImportedComponent(undefined);
-            console.warn("Component \"".concat(name, "\" not found in component map."));
+            console.warn(`Component "${name}" not found in component map.`);
         }
         // Cleanup runs before the next effect invocation and on unmount.
-        return function () {
+        return () => {
             isActive = false;
         };
     }, [map, name]);
-    var hasNamedOverride = Boolean(name && typeof map[name] === 'function');
+    const hasNamedOverride = Boolean(name && typeof map[name] === 'function');
     return {
         ComponentOverride: importedComponent,
         shouldWaitForNamedOverride: hasNamedOverride && !importedComponent && !importFailed,

package/dist/cjs/components/src/hooks/useConstructor.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useConstructor = void 0;
-var hooks_1 = require("preact/hooks");
+const hooks_1 = require("preact/hooks");
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-var useConstructor = function (callBack) {
-    if (callBack === void 0) { callBack = function () { }; }
-    var hasBeenCalled = (0, hooks_1.useRef)(false);
+const useConstructor = (callBack = () => { }) => {
+    const hasBeenCalled = (0, hooks_1.useRef)(false);
     if (hasBeenCalled.current)
         return;
     callBack();

package/dist/cjs/components/src/hooks/useControllerStorage.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useControllerStorage = void 0;
-var hooks_1 = require("preact/hooks");
-var useControllerStorage = function (controller, key, defaultVal) {
+const hooks_1 = require("preact/hooks");
+const useControllerStorage = (controller, key, defaultVal) => {
     //todo - refactor abstract controller to have storage and use it
-    var storage = controller.storage;
-    var storedState = storage.get(key);
-    var initialState = storedState || defaultVal || undefined;
-    var _a = (0, hooks_1.useState)(initialState), state = _a[0], setState = _a[1];
-    var setter = function (newState) {
+    const storage = controller.storage;
+    const storedState = storage.get(key);
+    const initialState = storedState || defaultVal || undefined;
+    const [state, setState] = (0, hooks_1.useState)(initialState);
+    const setter = (newState) => {
         // update storage and setState
         storage.set(key, newState);
         setState(newState);