@athoscommerce/snap-preact 1.9.1 → 1.10.1-beta.150

package/dist/cjs/components/src/components/Atoms/Button/Button.js

@@ -1,44 +1,20 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var useA11y_1 = require("../../../hooks/useA11y");
-var utilities_1 = require("../../../utilities");
-var Icon_1 = require("../Icon");
-var hooks_1 = require("../../../hooks");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var defaultStyles = function (_a) {
-    var _b, _c, _d, _e;
-    var native = _a.native, color = _a.color, backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, theme = _a.theme;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const useA11y_1 = require("../../../hooks/useA11y");
+const utilities_1 = require("../../../utilities");
+const Icon_1 = require("../Icon");
+const hooks_1 = require("../../../hooks");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const defaultStyles = ({ native, color, backgroundColor, borderColor, theme }) => {
     // no styling on native
     if (native) {
         return (0, react_1.css)({});
@@ -49,10 +25,10 @@ var defaultStyles = function (_a) {
         gap: '5px',
         padding: '5px 10px',
         position: 'relative',
-        color: color || ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary),
+        color: color || theme?.variables?.colors?.primary,
         outline: 0,
         backgroundColor: backgroundColor || '#fff',
-        border: "1px solid ".concat(borderColor || color || ((_e = (_d = theme === null || theme === void 0 ? void 0 : theme.variables) === null || _d === void 0 ? void 0 : _d.colors) === null || _e === void 0 ? void 0 : _e.primary) || '#333'),
+        border: `1px solid ${borderColor || color || theme?.variables?.colors?.primary || '#333'}`,
         '&:not(.ss__button--disabled):hover': {
             cursor: 'pointer',
         },
@@ -70,38 +46,49 @@ var defaultStyles = function (_a) {
         },
     });
 };
-exports.Button = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a, _b, _c, _d, _e;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Button = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         disableA11y: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('button', globalTheme, defaultProps, properties);
-    var content = props.content, children = props.children, disabled = props.disabled, native = props.native, onClick = props.onClick, disableA11y = props.disableA11y, disableStyles = props.disableStyles, className = props.className, internalClassName = props.internalClassName, icon = props.icon, lang = props.lang, treePath = props.treePath, _ = props.style, __ = props.styleScript, ___ = props.themeStyleScript, additionalProps = __rest(props, ["content", "children", "disabled", "native", "onClick", "disableA11y", "disableStyles", "className", "internalClassName", "icon", "lang", "treePath", "style", "styleScript", "themeStyleScript"]);
-    var _f = (0, hooks_1.useCustomComponentOverride)('button', props), overrideElement = _f.overrideElement, shouldRenderDefault = _f.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('button', globalTheme, defaultProps, properties);
+    const { content, children, disabled, native, onClick, disableA11y, disableStyles, className, internalClassName, icon, lang, treePath, style: _, styleScript: __, themeStyleScript: ___, ...additionalProps } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('button', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var subProps = {
-        icon: __assign(__assign({ internalClassName: 'ss__button__icon' }, (0, utilities_1.defined)({
-            disableStyles: disableStyles,
-        })), { 
+    const subProps = {
+        icon: {
+            internalClassName: 'ss__button__icon',
+            // default props
+            // inherited props
+            ...(0, utilities_1.defined)({
+                disableStyles,
+            }),
             // component theme overrides
-            theme: props === null || props === void 0 ? void 0 : props.theme, treePath: treePath }),
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const elementProps = {
+        ...styling,
+        className: (0, classnames_1.default)('ss__button', { 'ss__button--native': native, 'ss__button--disabled': disabled }, className, internalClassName),
+        disabled,
+        onClick: (e) => !disabled && onClick && onClick(e),
+        ...additionalProps,
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var elementProps = __assign(__assign(__assign({}, styling), { className: (0, classnames_1.default)('ss__button', { 'ss__button--native': native, 'ss__button--disabled': disabled }, className, internalClassName), disabled: disabled, onClick: function (e) { return !disabled && onClick && onClick(e); } }), additionalProps);
-    var a11yProps = {
-        ref: function (e) { return (0, useA11y_1.useA11y)(e); },
+    const a11yProps = {
+        ref: (e) => (0, useA11y_1.useA11y)(e),
     };
     //initialize lang
-    var defaultLang = {};
+    const defaultLang = {};
     //deep merge with props.lang
-    var langs = (0, deepmerge_1.default)(defaultLang, lang || {});
-    var mergedLang = (0, hooks_1.useLang)(langs, {});
+    const langs = (0, deepmerge_1.default)(defaultLang, lang || {});
+    const mergedLang = (0, hooks_1.useLang)(langs, {}, { activeBreakpoint: globalTheme?.activeBreakpoint });
     // @ts-ignore - additionalProps may contain dangerouslySetInnerHTML which is fine to spread on the element, but doesn't fit the ButtonProps type definition so we need to ignore it here.
-    var hasDangerouslySetInnerHTML = Boolean(additionalProps.dangerouslySetInnerHTML);
-    return content || children || icon || ((_a = lang === null || lang === void 0 ? void 0 : lang.button) === null || _a === void 0 ? void 0 : _a.value) || hasDangerouslySetInnerHTML ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", __assign({}, elementProps, { children: [(0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_b = mergedLang.button) === null || _b === void 0 ? void 0 : _b.all, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] })), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) : ((0, jsx_runtime_1.jsxs)("div", __assign({}, (!disableA11y ? a11yProps : {}), { role: 'button', "aria-disabled": disabled }, elementProps, (_c = mergedLang.button) === null || _c === void 0 ? void 0 : _c.attributes, { children: [content || children || ((_d = mergedLang.button) === null || _d === void 0 ? void 0 : _d.value) ? ((0, jsx_runtime_1.jsxs)("span", __assign({ className: "ss__button__content" }, (_e = mergedLang.button) === null || _e === void 0 ? void 0 : _e.value, { children: [(0, utilities_1.cloneWithProps)(content, { treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { treePath: treePath })] }))) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, __assign({}, subProps.icon, (typeof icon == 'string' ? { icon: icon } : icon)))] }))) })) : null;
+    const hasDangerouslySetInnerHTML = Boolean(additionalProps.dangerouslySetInnerHTML);
+    return content || children || icon || lang?.button?.value || hasDangerouslySetInnerHTML ? ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: native ? ((0, jsx_runtime_1.jsxs)("button", { ...elementProps, children: [(0, jsx_runtime_1.jsxs)("span", { className: "ss__button__content", ...mergedLang.button?.all, children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] }), icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) : ((0, jsx_runtime_1.jsxs)("div", { ...(!disableA11y ? a11yProps : {}), role: 'button', "aria-disabled": disabled, ...elementProps, ...mergedLang.button?.attributes, children: [content || children || mergedLang.button?.value ? ((0, jsx_runtime_1.jsxs)("span", { className: "ss__button__content", ...mergedLang.button?.value, children: [(0, utilities_1.cloneWithProps)(content, { treePath }), (0, utilities_1.cloneWithProps)(children, { treePath })] })) : undefined, icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { ...subProps.icon, ...(typeof icon == 'string' ? { icon: icon } : icon) })] })) })) : null;
 });

package/dist/cjs/components/src/components/Atoms/ChatLoadingIndicator/ChatLoadingIndicator.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatLoadingIndicator = 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 providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const DEFAULT_VERB_KEYS = ['thinkingVerb', 'searchingVerb', 'analyzingVerb', 'generatingVerb', 'processingVerb'];
+const MIN_INTERVAL = 1000;
+const MAX_INTERVAL = 5000;
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        padding: '1em 2em 0 2em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        color: '#666',
+        fontSize: '14px',
+        fontStyle: 'italic',
+        '.ss__chat-loading-indicator__verb': {
+            animation: 'ss-chat-loading-indicator-fade 0.5s ease-out',
+        },
+        '@keyframes ss-chat-loading-indicator-fade': {
+            '0%': {
+                opacity: 0,
+                transform: 'translateY(4px)',
+            },
+            '100%': {
+                opacity: 1,
+                transform: 'translateY(0)',
+            },
+        },
+    });
+};
+const ChatLoadingIndicator = (properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = (0, utilities_1.mergeProps)('chatLoadingIndicator', globalTheme, defaultProps, properties);
+    const { loading, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('chatLoadingIndicator', props);
+    //initialize lang
+    const defaultLang = {
+        thinkingVerb: { value: 'Thinking' },
+        searchingVerb: { value: 'Searching' },
+        analyzingVerb: { value: 'Analyzing' },
+        generatingVerb: { value: 'Generating' },
+        processingVerb: { value: 'Processing' },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const defaultVerbs = DEFAULT_VERB_KEYS.map((key) => {
+        const value = lang[key]?.value;
+        return (typeof value == 'function' ? value() : value);
+    }).filter(Boolean);
+    // fall back to the lang-provided default verbs inline — can't rely on defaultProps because
+    // mergeProps spreads incoming props over defaults, so an explicit `verbs={undefined}` from a
+    // caller would wipe out the default array.
+    const verbs = props.verbs && props.verbs.length > 0 ? props.verbs : defaultVerbs;
+    // key on content (not array identity) so inline array props don't restart the cycle every render
+    const verbsKey = JSON.stringify(verbs);
+    const [verbIndex, setVerbIndex] = (0, hooks_1.useState)(0);
+    (0, hooks_1.useEffect)(() => {
+        if (!loading) {
+            setVerbIndex(0);
+            return;
+        }
+        let timeoutId;
+        const scheduleNext = () => {
+            const nextInterval = Math.floor(Math.random() * (MAX_INTERVAL - MIN_INTERVAL + 1)) + MIN_INTERVAL;
+            timeoutId = setTimeout(() => {
+                setVerbIndex((prev) => (prev + 1) % verbs.length);
+                scheduleNext();
+            }, nextInterval);
+        };
+        scheduleNext();
+        return () => clearTimeout(timeoutId);
+    }, [loading, verbsKey]);
+    // after all hooks — an override that resolves or fails mid-lifecycle must not
+    // change the hook count between renders
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const verb = verbs[verbIndex % verbs.length];
+    if (!loading || !verb)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__chat-loading-indicator', className, internalClassName), role: "status", "aria-live": "polite", ...styling, children: (0, jsx_runtime_1.jsxs)("span", { className: 'ss__chat-loading-indicator__verb', children: [verb, "..."] }, verbIndex) }) }));
+};
+exports.ChatLoadingIndicator = ChatLoadingIndicator;

package/dist/cjs/components/src/components/Atoms/ChatLoadingIndicator/index.js

@@ -0,0 +1,17 @@
+"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("./ChatLoadingIndicator"), exports);

package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -1,32 +1,20 @@
 "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.Dropdown = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var compat_1 = require("preact/compat");
-var hooks_1 = require("preact/hooks");
-var react_1 = require("@emotion/react");
-var classnames_1 = __importDefault(require("classnames"));
-var mobx_react_lite_1 = require("mobx-react-lite");
-var providers_1 = require("../../../providers");
-var hooks_2 = require("../../../hooks");
-var utilities_1 = require("../../../utilities");
-var useA11y_1 = require("../../../hooks/useA11y");
-var defaultStyles = function (_a) {
-    var disableOverlay = _a.disableOverlay;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const compat_1 = require("preact/compat");
+const hooks_1 = require("preact/hooks");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const providers_1 = require("../../../providers");
+const hooks_2 = require("../../../hooks");
+const utilities_1 = require("../../../utilities");
+const useA11y_1 = require("../../../hooks/useA11y");
+const defaultStyles = ({ disableOverlay, dropUp }) => {
     return (0, react_1.css)({
         position: 'relative',
         '&.ss__dropdown--open, &.ss__dropdown__portal--open': {
@@ -37,7 +25,7 @@ var defaultStyles = function (_a) {
             },
         },
         '.ss__dropdown__button': {
-            cursor: "".concat(disableOverlay ? 'default' : 'pointer'),
+            cursor: `${disableOverlay ? 'default' : 'pointer'}`,
         },
         '.ss__dropdown__content': {
             backgroundColor: '#fff',
@@ -45,42 +33,48 @@ var defaultStyles = function (_a) {
             minWidth: '100%',
             visibility: 'hidden',
             opacity: 0,
-            top: 'auto',
+            top: dropUp ? undefined : 'auto',
+            bottom: dropUp ? '100%' : undefined,
             left: 0,
         },
+        '&.ss__dropdown__portal--flip-x .ss__dropdown__content': {
+            left: 'auto',
+            right: 0,
+        },
     });
 };
-exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
-    var _a;
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.Dropdown = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         startOpen: false,
         disableA11y: false,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
-    var button = props.button, content = props.content, children = props.children, disabled = props.disabled, open = props.open, toggleOnHover = props.toggleOnHover, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, disableClick = props.disableClick, onClick = props.onClick, onToggle = props.onToggle, focusTrapContent = props.focusTrapContent, startOpen = props.startOpen, disableClickOutside = props.disableClickOutside, disableA11y = props.disableA11y, className = props.className, internalClassName = props.internalClassName, treePath = props.treePath, usePortal = props.usePortal;
-    var _b = (0, hooks_2.useCustomComponentOverride)('dropdown', props), overrideElement = _b.overrideElement, shouldRenderDefault = _b.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('dropdown', globalTheme, defaultProps, properties);
+    const { button, content, children, disabled, open, toggleOnHover, onMouseEnter, onMouseLeave, disableClick, onClick, onToggle, focusTrapContent, startOpen, disableClickOutside, disableA11y, className, internalClassName, treePath, usePortal, dropUp, boundaryRef, } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('dropdown', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var dropdownOpen, setDropdownOpen;
-    var stateful = open === undefined;
+    let dropdownOpen, setDropdownOpen;
+    const stateful = open === undefined;
     if (stateful) {
-        _a = (0, hooks_1.useState)(startOpen), dropdownOpen = _a[0], setDropdownOpen = _a[1];
+        [dropdownOpen, setDropdownOpen] = (0, hooks_1.useState)(startOpen);
     }
     else {
         dropdownOpen = open;
     }
     // state to track touch interactions
-    var _c = (0, hooks_1.useState)(false), isTouchInteraction = _c[0], setIsTouchInteraction = _c[1];
-    var buttonRef = (0, hooks_1.useRef)(null);
-    var contentRef = (0, hooks_1.useRef)(null);
-    var _d = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 }), coords = _d[0], setCoords = _d[1];
-    var innerRef;
+    const [isTouchInteraction, setIsTouchInteraction] = (0, hooks_1.useState)(false);
+    const buttonRef = (0, hooks_1.useRef)(null);
+    const contentRef = (0, hooks_1.useRef)(null);
+    const [coords, setCoords] = (0, hooks_1.useState)({ top: 0, left: 0, width: 0 });
+    const [flipX, setFlipX] = (0, hooks_1.useState)(false);
+    const [flipRight, setFlipRight] = (0, hooks_1.useState)(0);
+    let innerRef;
     if (!disableClickOutside) {
-        innerRef = (0, hooks_2.useClickOutside)(function (e) {
+        innerRef = (0, hooks_2.useClickOutside)((e) => {
             if (usePortal && contentRef.current && contentRef.current.contains(e.target)) {
                 return;
             }
@@ -92,32 +86,67 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
             }
         });
     }
-    (0, hooks_1.useEffect)(function () {
+    (0, hooks_1.useEffect)(() => {
         if (usePortal && dropdownOpen) {
-            var updateCoords_1 = function () {
+            const updateCoords = () => {
                 if (buttonRef.current) {
-                    var rect = buttonRef.current.getBoundingClientRect();
+                    const rect = buttonRef.current.getBoundingClientRect();
+                    // Clamp the anchor to the boundary's horizontal range so the dropdown
+                    // stays visible inside the boundary even when the button scrolls out
+                    // of view (e.g. a horizontally-scrolling facets row). The right edge
+                    // is handled by the flip-x logic below.
+                    const boundaryRect = boundaryRef?.current?.getBoundingClientRect();
+                    const left = boundaryRect ? Math.max(boundaryRect.left, Math.min(rect.left, boundaryRect.right)) : rect.left;
                     setCoords({
-                        top: rect.bottom + window.scrollY,
-                        left: rect.left + window.scrollX,
+                        top: dropUp ? rect.top : rect.bottom,
+                        left,
                         width: rect.width,
                     });
                 }
             };
-            updateCoords_1();
-            window.addEventListener('resize', updateCoords_1);
-            window.addEventListener('scroll', updateCoords_1, true);
-            return function () {
-                window.removeEventListener('resize', updateCoords_1);
-                window.removeEventListener('scroll', updateCoords_1, true);
+            updateCoords();
+            window.addEventListener('resize', updateCoords);
+            window.addEventListener('scroll', updateCoords, true);
+            return () => {
+                window.removeEventListener('resize', updateCoords);
+                window.removeEventListener('scroll', updateCoords, true);
             };
         }
-    }, [usePortal, dropdownOpen]);
-    var toggleOpenDropdown = function (e, state) {
+    }, [usePortal, dropdownOpen, dropUp, boundaryRef]);
+    // Reset flip state when dropdown closes
+    (0, hooks_1.useEffect)(() => {
+        if (!dropdownOpen) {
+            setFlipX(false);
+        }
+    }, [dropdownOpen]);
+    // After the portal renders, check if content overflows the right edge of the
+    // boundary (when provided) or the viewport and flip the horizontal anchor if so.
+    // When flipped, anchor the portal to the boundary's right edge so the dropdown
+    // stops at the boundary rather than at the button's right edge.
+    // useLayoutEffect fires before paint to avoid flash.
+    (0, hooks_1.useLayoutEffect)(() => {
+        if (usePortal && dropdownOpen && contentRef.current && coords.width > 0) {
+            // Measure the width the content would occupy when unflipped so the check
+            // uses the same basis in both states. When unflipped the portal is given an
+            // explicit `width: coords.width` (and the content has minWidth 100%), so the
+            // rendered width is max(intrinsic, coords.width); when flipped the explicit
+            // width is dropped, so offsetWidth alone reports only the intrinsic width.
+            // Reading rect.right after a flip would report the anchored edge instead of
+            // the natural one, causing the dropdown to oscillate between flipped and
+            // unflipped on every scroll tick.
+            const contentWidth = Math.max(contentRef.current.offsetWidth, coords.width);
+            const limit = boundaryRef?.current?.getBoundingClientRect().right ?? window.innerWidth;
+            const shouldFlip = coords.left + contentWidth > limit;
+            setFlipX(shouldFlip);
+            if (shouldFlip)
+                setFlipRight(Math.max(0, window.innerWidth - limit));
+        }
+    }, [usePortal, dropdownOpen, coords.left, coords.width, boundaryRef]);
+    const toggleOpenDropdown = (e, state) => {
         if (stateful) {
             setDropdownOpen &&
-                setDropdownOpen(function (prev) {
-                    var newState = state !== null && state !== void 0 ? state : !prev;
+                setDropdownOpen((prev) => {
+                    const newState = state ?? !prev;
                     if (newState != prev) {
                         onToggle && onToggle(e, newState);
                     }
@@ -125,10 +154,10 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 });
         }
     };
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    var hoverProps = {
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const hoverProps = {
         onMouseEnter: (toggleOnHover || onMouseEnter) &&
-            (function (e) {
+            ((e) => {
                 // skip if it's a touch interaction
                 if (isTouchInteraction)
                     return;
@@ -138,7 +167,7 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 onMouseEnter && onMouseEnter(e);
             }),
         onMouseLeave: (toggleOnHover || onMouseLeave) &&
-            (function (e) {
+            ((e) => {
                 // skip if it's a touch interaction
                 if (isTouchInteraction)
                     return;
@@ -148,10 +177,10 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                 onMouseLeave && onMouseLeave(e);
             }),
     };
-    var contentElement = ((0, jsx_runtime_1.jsxs)("div", { className: "ss__dropdown__content", ref: function (e) {
+    const contentElement = ((0, jsx_runtime_1.jsxs)("div", { className: `ss__dropdown__content`, ref: (e) => {
             contentRef.current = e;
             if (!disableA11y) {
-                (0, useA11y_1.useA11y)(e, 0, Boolean(focusTrapContent), function (e) {
+                (0, useA11y_1.useA11y)(e, 0, Boolean(focusTrapContent), (e) => {
                     if (stateful) {
                         toggleOpenDropdown(e);
                     }
@@ -160,33 +189,36 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)(function (properties) {
                     }
                 });
             }
-        }, children: [(0, utilities_1.cloneWithProps)(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath }), (0, utilities_1.cloneWithProps)(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath })] }));
-    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", __assign({}, styling, { className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className, internalClassName), ref: innerRef }, hoverProps, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__dropdown__button", ref: function (e) {
+        }, children: [(0, utilities_1.cloneWithProps)(content, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }), (0, utilities_1.cloneWithProps)(children, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath })] }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__dropdown', { 'ss__dropdown--open': dropdownOpen }, className, internalClassName), ref: innerRef, ...hoverProps, children: [(0, jsx_runtime_1.jsx)("div", { className: "ss__dropdown__button", ref: (e) => {
                         buttonRef.current = e;
                         if (!disableA11y)
                             (0, useA11y_1.useA11y)(e);
-                    }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: function () {
+                    }, "aria-expanded": dropdownOpen, role: "button", onTouchStart: () => {
                         // mark this as a touch interaction to avoid hover state conflicts
                         setIsTouchInteraction(true);
-                    }, onClick: function (e) {
+                    }, onClick: (e) => {
                         if (!disabled && !disableClick) {
                             toggleOpenDropdown(e);
                             onClick && onClick(e);
                         }
                         // reset touch interaction after a short delay
                         // this gives time for the click handler to complete before allowing hover events again
-                        setTimeout(function () {
+                        setTimeout(() => {
                             setIsTouchInteraction(false);
                         }, 300);
-                    }, children: (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath: treePath }) }), !usePortal
+                    }, children: (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, ...(disabled !== undefined ? { disabled } : {}), toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
                     ? (content || children) && contentElement
                     : (content || children) &&
-                        (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
-                                position: 'absolute',
+                        (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, {
+                                'ss__dropdown__portal--open': dropdownOpen,
+                                'ss__dropdown__portal--flip-x': flipX,
+                            }), css: styling.css, style: {
+                                position: 'fixed',
                                 top: coords.top,
-                                left: coords.left,
-                                width: coords.width,
+                                ...(flipX ? { right: flipRight } : { left: coords.left, width: coords.width }),
                                 zIndex: 9999,
+                                ...(dropUp ? { transform: 'translateY(-100%)' } : {}),
                                 pointerEvents: dropdownOpen ? 'auto' : 'none',
-                            }, children: contentElement }), document.body)] })) }));
+                            }, children: contentElement }), document.body)] }) }));
 });

package/dist/cjs/components/src/components/Atoms/FormattedNumber/FormattedNumber.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.FormattedNumber = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var mobx_react_lite_1 = require("mobx-react-lite");
-var react_1 = require("@emotion/react");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var classnames_1 = __importDefault(require("classnames"));
-var providers_1 = require("../../../providers");
-var utilities_1 = require("../../../utilities");
-var hooks_1 = require("../../../hooks");
-var defaultStyles = function () {
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const classnames_1 = __importDefault(require("classnames"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const defaultStyles = () => {
     return (0, react_1.css)({});
 };
-exports.FormattedNumber = (0, mobx_react_lite_1.observer)(function (properties) {
-    var globalTheme = (0, providers_1.useTheme)();
-    var globalTreePath = (0, providers_1.useTreePath)();
-    var defaultProps = {
+exports.FormattedNumber = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
         symbol: '',
         decimalPlaces: 3,
         padDecimalPlaces: true,
@@ -38,20 +27,20 @@ exports.FormattedNumber = (0, mobx_react_lite_1.observer)(function (properties)
         symbolAfter: true,
         treePath: globalTreePath,
     };
-    var props = (0, utilities_1.mergeProps)('formattedNumber', globalTheme, defaultProps, properties);
-    var value = props.value, symbol = props.symbol, decimalPlaces = props.decimalPlaces, padDecimalPlaces = props.padDecimalPlaces, thousandsSeparator = props.thousandsSeparator, decimalSeparator = props.decimalSeparator, symbolAfter = props.symbolAfter, className = props.className, internalClassName = props.internalClassName, raw = props.raw;
-    var _a = (0, hooks_1.useCustomComponentOverride)('formattedNumber', props), overrideElement = _a.overrideElement, shouldRenderDefault = _a.shouldRenderDefault;
+    const props = (0, utilities_1.mergeProps)('formattedNumber', globalTheme, defaultProps, properties);
+    const { value, symbol, decimalPlaces, padDecimalPlaces, thousandsSeparator, decimalSeparator, symbolAfter, className, internalClassName, raw } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('formattedNumber', props);
     if (!shouldRenderDefault) {
         return overrideElement;
     }
-    var formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
-        symbol: symbol,
-        decimalPlaces: decimalPlaces,
-        padDecimalPlaces: padDecimalPlaces,
-        thousandsSeparator: thousandsSeparator,
-        decimalSeparator: decimalSeparator,
-        symbolAfter: symbolAfter,
+    const formattedNumber = snap_toolbox_1.filters.formatNumber(value, {
+        symbol,
+        decimalPlaces,
+        padDecimalPlaces,
+        thousandsSeparator,
+        decimalSeparator,
+        symbolAfter,
     });
-    var styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: (0, classnames_1.default)('ss__formatted-number', className, internalClassName) }, styling, { children: formattedNumber })) }));
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    return raw ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedNumber })) : ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ss__formatted-number', className, internalClassName), ...styling, children: formattedNumber }) }));
 });