@popsure/dirty-swan 0.66.0 → 0.66.2

package/dist/cjs/index.js

@@ -21993,6 +21993,31 @@ var SegmentedControl = function (_a) {
                     } })] }) }));
 };
 
+var useDropdownAlignment = function (containerRef, dropdownRef, isOpen) {
+    var _a = React.useState('left'), alignX = _a[0], setAlignX = _a[1];
+    var _b = React.useState('bottom'), alignY = _b[0], setAlignY = _b[1];
+    var updateAlignment = React.useCallback(function () {
+        if (containerRef.current && dropdownRef.current) {
+            var containerRect = containerRef.current.getBoundingClientRect();
+            var dropdownWidth = dropdownRef.current.offsetWidth;
+            var dropdownHeight = dropdownRef.current.offsetHeight;
+            var spaceOnRight = window.innerWidth - containerRect.left;
+            var spaceBelow = window.innerHeight - containerRect.bottom;
+            setAlignX(spaceOnRight < dropdownWidth ? 'right' : 'left');
+            setAlignY(spaceBelow < dropdownHeight && containerRect.top > spaceBelow ? 'top' : 'bottom');
+        }
+    }, [containerRef, dropdownRef]);
+    React.useEffect(function () {
+        if (!isOpen)
+            return;
+        updateAlignment();
+        var observer = new ResizeObserver(updateAlignment);
+        observer.observe(document.documentElement);
+        return function () { return observer.disconnect(); };
+    }, [isOpen, updateAlignment]);
+    return { alignX: alignX, alignY: alignY };
+};
+
 var useEscapeKey = function (callback) {
     var handleOnEscape = React.useCallback(function (e) {
         if (e.key === 'Escape') {
@@ -22005,8 +22030,8 @@ var useEscapeKey = function (callback) {
     }, [handleOnEscape]);
 };
 
-var css_248z$e = ".style-module_bs-xs__2KEsk {\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__3u9QM {\n  box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__2LfxW {\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__2Qx0R {\n  box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__kaOuM {\n  box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_container__2064q {\n  position: relative;\n}\n\n.style-module_selectTrigger__1GiSB {\n  padding: 10px 12px;\n  border: 1px solid #e7e7ed;\n}\n.style-module_selectTrigger__1GiSB:hover {\n  border-color: #b8b8c0;\n}\n.style-module_selectTrigger__1GiSB:focus-visible {\n  outline: 1px solid #26262e;\n  outline-offset: 1px;\n}\n.style-module_selectTriggerOpen__29Kor {\n  border-color: #26262e;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_disabled__2BlO- {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.style-module_chevronOpen__Ot3RV {\n  transform: rotate(180deg);\n}\n\n.style-module_condensed__GDq0d {\n  width: auto;\n  padding: 8px 10px;\n  gap: 8px;\n}\n\n.style-module_bordered__tRh9H {\n  border: 1px solid #e7e7ed;\n}\n.style-module_bordered__tRh9H:hover {\n  border-color: #b8b8c0;\n}\n\n.style-module_dropdown__1A-wl {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 280px;\n  border: 1px solid #e7e7ed;\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n  z-index: 10;\n}\n\n.style-module_dropdownUp__2PCvx {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.style-module_dropdownUp__2PCvx .style-module_searchContainer__4O1qv {\n  order: 2;\n  padding-bottom: 0;\n  padding-top: 8px;\n}\n.style-module_dropdownUp__2PCvx .style-module_optionList__-2I8l {\n  order: 1;\n}\n\n.style-module_searchContainer__4O1qv {\n  position: sticky;\n  top: 0;\n}\n\n.style-module_optionList__-2I8l {\n  max-height: 308px;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.style-module_optionList__-2I8l::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_optionWrapper__3GVCB {\n  position: relative;\n}\n\n.style-module_optionRadio__3GBog {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.style-module_optionRadio__3GBog:focus-visible + label {\n  outline: 2px solid #26262e;\n  outline-offset: -2px;\n  border-radius: 8px;\n}\n\n.style-module_option__1HkKR {\n  padding: 10px 12px;\n  border: none;\n  background-color: transparent;\n}\n.style-module_option__1HkKR:hover {\n  background-color: #f7f7fd;\n}\n.style-module_optionSelected__2pPt9 {\n  background-color: #F6F6FE;\n}\n.style-module_optionSelected__2pPt9:hover {\n  background-color: #F6F6FE;\n}\n\n.style-module_optionIcon__2hBSY {\n  flex-shrink: 0;\n}\n\n.style-module_noResults__18exv {\n  padding: 10px 12px;\n}";
-var styles$e = {"container":"style-module_container__2064q","selectTrigger":"style-module_selectTrigger__1GiSB","selectTriggerOpen":"style-module_selectTriggerOpen__29Kor","disabled":"style-module_disabled__2BlO-","chevronOpen":"style-module_chevronOpen__Ot3RV","condensed":"style-module_condensed__GDq0d","bordered":"style-module_bordered__tRh9H","dropdown":"style-module_dropdown__1A-wl","dropdownUp":"style-module_dropdownUp__2PCvx","searchContainer":"style-module_searchContainer__4O1qv","optionList":"style-module_optionList__-2I8l","optionWrapper":"style-module_optionWrapper__3GVCB","optionRadio":"style-module_optionRadio__3GBog","option":"style-module_option__1HkKR","optionSelected":"style-module_optionSelected__2pPt9","optionIcon":"style-module_optionIcon__2hBSY","noResults":"style-module_noResults__18exv"};
+var css_248z$e = ".style-module_bs-xs__2KEsk {\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_bs-sm__3u9QM {\n  box-shadow: 0 2px 20px 0 rgba(38, 38, 46, 0.04);\n}\n\n.style-module_bs-md__2LfxW {\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n}\n\n.style-module_bs-lg__2Qx0R {\n  box-shadow: 0 2px 32px rgba(38, 38, 46, 0.1);\n}\n\n.style-module_bs-xl__kaOuM {\n  box-shadow: 0 2px 50px rgba(38, 38, 46, 0.18);\n}\n\n.style-module_container__2064q {\n  position: relative;\n}\n\n.style-module_selectTrigger__1GiSB {\n  padding: 10px 12px;\n  border: 1px solid #e7e7ed;\n}\n.style-module_selectTrigger__1GiSB:hover {\n  border-color: #b8b8c0;\n}\n.style-module_selectTrigger__1GiSB:focus-visible {\n  outline: 1px solid #26262e;\n  outline-offset: 1px;\n}\n.style-module_selectTriggerOpen__29Kor {\n  border-color: #26262e;\n  box-shadow: 0 2px 12px rgba(38, 38, 46, 0.03);\n}\n\n.style-module_disabled__2BlO- {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.style-module_chevronOpen__Ot3RV {\n  transform: rotate(180deg);\n}\n\n.style-module_condensed__GDq0d {\n  width: auto;\n  padding: 8px 10px;\n  gap: 8px;\n}\n\n.style-module_bordered__tRh9H {\n  border: 1px solid #e7e7ed;\n}\n.style-module_bordered__tRh9H:hover {\n  border-color: #b8b8c0;\n}\n\n.style-module_dropdown__1A-wl {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  min-width: 280px;\n  border: 1px solid #e7e7ed;\n  box-shadow: 0 2px 28px rgba(38, 38, 46, 0.08);\n  z-index: 10;\n}\n\n.style-module_dropdownXRight__2LIci {\n  left: auto;\n  right: 0;\n}\n\n.style-module_dropdownYTop__Amnit {\n  top: auto;\n  bottom: calc(100% + 4px);\n}\n.style-module_dropdownYTop__Amnit .style-module_searchContainer__4O1qv {\n  order: 2;\n  padding-bottom: 0;\n  padding-top: 8px;\n}\n.style-module_dropdownYTop__Amnit .style-module_optionList__-2I8l {\n  order: 1;\n}\n\n.style-module_optionList__-2I8l {\n  max-height: 308px;\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.style-module_optionList__-2I8l::-webkit-scrollbar {\n  display: none;\n}\n\n.style-module_optionWrapper__3GVCB {\n  position: relative;\n}\n\n.style-module_optionRadio__3GBog {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.style-module_optionRadio__3GBog:focus-visible + label {\n  outline: 2px solid #26262e;\n  outline-offset: -2px;\n  border-radius: 8px;\n}\n\n.style-module_option__1HkKR {\n  padding: 10px 12px;\n  border: none;\n  background-color: transparent;\n}\n.style-module_option__1HkKR:hover {\n  background-color: #f7f7fd;\n}\n.style-module_optionSelected__2pPt9 {\n  background-color: #F6F6FE;\n}\n.style-module_optionSelected__2pPt9:hover {\n  background-color: #F6F6FE;\n}\n\n.style-module_optionIcon__2hBSY {\n  flex-shrink: 0;\n}\n\n.style-module_noResults__18exv {\n  padding: 10px 12px;\n}";
+var styles$e = {"container":"style-module_container__2064q","selectTrigger":"style-module_selectTrigger__1GiSB","selectTriggerOpen":"style-module_selectTriggerOpen__29Kor","disabled":"style-module_disabled__2BlO-","chevronOpen":"style-module_chevronOpen__Ot3RV","condensed":"style-module_condensed__GDq0d","bordered":"style-module_bordered__tRh9H","dropdown":"style-module_dropdown__1A-wl","dropdownXRight":"style-module_dropdownXRight__2LIci","dropdownYTop":"style-module_dropdownYTop__Amnit","optionList":"style-module_optionList__-2I8l","optionWrapper":"style-module_optionWrapper__3GVCB","optionRadio":"style-module_optionRadio__3GBog","option":"style-module_option__1HkKR","optionSelected":"style-module_optionSelected__2pPt9","optionIcon":"style-module_optionIcon__2hBSY","noResults":"style-module_noResults__18exv"};
 styleInject(css_248z$e);
 
 var SearchableDropdown = function (_a) {
@@ -22019,6 +22044,7 @@ var SearchableDropdown = function (_a) {
     var searchInputRef = React.useRef(null);
     var containerRef = React.useRef(null);
     var triggerRef = React.useRef(null);
+    var dropdownRef = React.useRef(null);
     var optionRefs = React.useRef(new Map());
     var groupName = React.useState(function () { return groupNameProp !== null && groupNameProp !== void 0 ? groupNameProp : "sd-".concat(generateId()); })[0];
     var dropdownId = "".concat(groupName, "-dropdown");
@@ -22032,6 +22058,7 @@ var SearchableDropdown = function (_a) {
         if (isOpen)
             closeAndRestoreFocus();
     }, [isOpen, closeAndRestoreFocus]));
+    var _s = useDropdownAlignment(containerRef, dropdownRef, isOpen), alignX = _s.alignX, alignY = _s.alignY;
     React.useEffect(function () {
         if (isOpen && searchable && searchInputRef.current) {
             searchInputRef.current.focus();
@@ -22121,7 +22148,7 @@ var SearchableDropdown = function (_a) {
                     _b[styles$e.condensed] = condensed,
                     _b[styles$e.bordered] = bordered,
                     _b[styles$e.disabled] = disabled,
-                    _b)), onClick: handleTriggerClick, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen ? dropdownId : undefined, children: [jsxRuntime.jsxs("span", { className: 'd-flex ai-center gap8', children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) && (jsxRuntime.jsx("span", { className: styles$e.optionIcon, children: selectedOption.icon })), !condensed && (jsxRuntime.jsx("span", { className: "p-p", children: (_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _e !== void 0 ? _e : triggerPlaceholder }))] }), showChevron && (jsxRuntime.jsx(ChevronDownIcon, { className: classNames('ml8', (_c = {}, _c[styles$e.chevronOpen] = isOpen, _c)), size: 20, noMargin: true, color: "neutral-600" }))] }), isOpen && (jsxRuntime.jsxs("div", { id: dropdownId, className: classNames(styles$e.dropdown, 'bg-white br8 p8 d-flex fd-column', (_d = {}, _d[styles$e.dropdownUp] = dropUp, _d)), children: [searchable && (jsxRuntime.jsx("div", { className: classNames('pb8 bg-white', styles$e.searchContainer), children: jsxRuntime.jsx(Input, { ref: searchInputRef, type: "text", placeholder: placeholder, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, label: placeholder, hideLabel: true, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$e.optionList, role: "radiogroup", "aria-label": groupName, children: [filteredOptions.map(function (option) {
+                    _b)), onClick: handleTriggerClick, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": isOpen ? dropdownId : undefined, children: [jsxRuntime.jsxs("span", { className: 'd-flex ai-center gap8', children: [(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) && (jsxRuntime.jsx("span", { className: styles$e.optionIcon, children: selectedOption.icon })), !condensed && (jsxRuntime.jsx("span", { className: "p-p", children: (_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _e !== void 0 ? _e : triggerPlaceholder }))] }), showChevron && (jsxRuntime.jsx(ChevronDownIcon, { className: classNames('ml8', (_c = {}, _c[styles$e.chevronOpen] = isOpen, _c)), size: 20, noMargin: true, color: "neutral-600" }))] }), isOpen && (jsxRuntime.jsxs("div", { id: dropdownId, ref: dropdownRef, className: classNames(styles$e.dropdown, 'bg-white br8 p8 d-flex fd-column', (_d = {}, _d[styles$e.dropdownYTop] = dropUp || alignY === 'top', _d[styles$e.dropdownXRight] = alignX === 'right', _d)), children: [searchable && (jsxRuntime.jsx("div", { className: "pb8 bg-white", children: jsxRuntime.jsx(Input, { ref: searchInputRef, type: "text", placeholder: placeholder, value: searchTerm, onChange: function (e) { return setSearchTerm(e.target.value); }, label: placeholder, hideLabel: true, onKeyDown: handleSearchKeyDown }) })), jsxRuntime.jsxs("div", { className: styles$e.optionList, role: "radiogroup", "aria-label": groupName, children: [filteredOptions.map(function (option) {
                                 var _a;
                                 return (jsxRuntime.jsxs("div", { className: styles$e.optionWrapper, children: [jsxRuntime.jsx("input", { type: "radio", id: "".concat(groupName, "-").concat(option.id), name: groupName, value: option.id, checked: option.id === localValue, onChange: function () { return setLocalValue(option.id); }, onClick: function () { return handleOptionClick(option.id); }, tabIndex: option.id === localValue ? 0 : -1, className: styles$e.optionRadio, ref: function (el) { return handleOptionRef(option.id, el); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option.id); } }), jsxRuntime.jsxs("label", { htmlFor: "".concat(groupName, "-").concat(option.id), className: classNames('d-flex ai-center gap8 w100 br8 c-pointer ta-left tc-neutral-900', styles$e.option, (_a = {},
                                                 _a[styles$e.optionSelected] = option.id === localValue,