@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

package/dist/cjs/components/src/components/Organisms/ChatButton/ChatButton.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatButtonOrganism = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Chat_lang_1 = require("../Chat/Chat.lang");
+const ChatButton_lang_1 = require("./ChatButton.lang");
+const defaultStyles = ({ theme }) => {
+    // primary may be 'currentColor' (base theme) — background stays fixed so the
+    // pill remains legible wherever it inherits its color from
+    const color = theme?.variables?.colors?.primary || '#333';
+    return (0, react_1.css)({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        padding: '8px 16px',
+        background: '#fff',
+        color: color,
+        border: `1px solid ${color}`,
+        borderRadius: '24px',
+        fontSize: '14px',
+        fontWeight: 600,
+        lineHeight: 1.2,
+        cursor: 'pointer',
+        transition: 'box-shadow 0.15s ease',
+        '&:hover': {
+            boxShadow: '0 2px 6px rgba(0, 0, 0, 0.15)',
+        },
+        '&:focus-visible': {
+            outline: '2px solid currentColor',
+            outlineOffset: '2px',
+        },
+        // native Button always renders its content span — collapse it when empty
+        // so the flex gap doesn't offset icon-only buttons
+        '.ss__button__content:empty': {
+            display: 'none',
+        },
+        '.ss__icon': {
+            fill: 'currentColor',
+            stroke: 'currentColor',
+        },
+    });
+};
+exports.ChatButtonOrganism = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        icon: 'chat',
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatButton', globalTheme, defaultProps, properties);
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('chatButton', props);
+    const { className, internalClassName, controller, content, children, icon, disableStyles, treePath } = props;
+    const { store } = controller;
+    // Register with the store so the Chat organism hides its built-in bubble while
+    // an external launcher is mounted. Runs before any early return (hooks-order safe).
+    (0, hooks_1.useEffect)(() => store.registerLauncher(), [store]);
+    // Same visibility rule as the Chat organism: hidden when disabled at bootstrap,
+    // but kept mounted when chat becomes disabled mid-session.
+    const wasVisibleRef = (0, hooks_1.useRef)(false);
+    if (!store.chatEnabled && !wasVisibleRef.current) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    }
+    wasVisibleRef.current = true;
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const subProps = {
+        button: {
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const lang = (0, deepmerge_1.default)(ChatButton_lang_1.chatButtonDefaultLang, props.lang || {});
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { ...styling, ...subProps.button, native: true, type: "button", className: (0, classnames_1.default)('ss__chat-button', { 'ss__chat-button--open': store.open }, className, internalClassName), "aria-label": store.open ? (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'aria-label') : (0, Chat_lang_1.langAttrOf)(lang.openChatButton, 'aria-label'), title: store.open ? (0, Chat_lang_1.langAttrOf)(lang.closeChatButton, 'title') : (0, Chat_lang_1.langAttrOf)(lang.openChatButton, 'title'), "aria-expanded": store.open, onClick: () => controller.handlers.button.click(), content: content || children ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__chat-button__content", children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] })) : undefined, icon: icon && { internalClassName: 'ss__chat-button__icon', ...(typeof icon == 'string' ? { icon: icon } : typeof icon == 'object' ? icon : {}) } }) }));
+});

package/dist/cjs/components/src/components/Organisms/ChatButton/ChatButton.lang.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chatButtonDefaultLang = void 0;
+exports.chatButtonDefaultLang = {
+    openChatButton: {
+        attributes: { 'aria-label': 'Open chat', title: 'Open Chat' },
+    },
+    closeChatButton: {
+        attributes: { 'aria-label': 'Close chat', title: 'Close Chat' },
+    },
+};

package/dist/cjs/components/src/components/Organisms/ChatButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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("./ChatButton"), exports);
+__exportStar(require("./ChatButton.lang"), exports);

package/dist/cjs/components/src/components/Organisms/Facet/Facet.js

@@ -478,11 +478,7 @@ const FacetContent = (props) => {
     // used by the submit button, the Enter key, and (optionally) blur, so it works even when the
     // submit button isn't rendered (e.g. when rangeInputsSubmitButtonText is an empty string).
     const submitRange = () => {
-        if (facet?.services?.urlManager &&
-            typeof low === 'number' &&
-            Number.isFinite(low) &&
-            typeof high === 'number' &&
-            Number.isFinite(high)) {
+        if (facet?.services?.urlManager && typeof low === 'number' && Number.isFinite(low) && typeof high === 'number' && Number.isFinite(high)) {
             let currentLow = low;
             let currentHigh = high;
             //adjust ranges if high and low have swapped.