@popsure/dirty-swan 0.66.1 → 0.66.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +9 -9
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/hooks/useDropdownAlignment.d.ts +2 -2
- package/dist/esm/components/searchableDropdown/index.js +1 -1
- package/dist/esm/components/searchableDropdown/index.stories.js +1 -1
- package/dist/esm/components/searchableDropdown/index.test.js +1 -1
- package/dist/esm/{index-QeP_xz9v.js → index-B18M6b67.js} +10 -10
- package/dist/esm/index-B18M6b67.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/lib/hooks/useDropdownAlignment.d.ts +2 -2
- package/package.json +1 -1
- package/src/lib/components/searchableDropdown/index.tsx +3 -3
- package/src/lib/components/searchableDropdown/style.module.scss +2 -7
- package/src/lib/hooks/useDropdownAlignment.test.ts +17 -17
- package/src/lib/hooks/useDropdownAlignment.ts +5 -5
- package/dist/esm/index-QeP_xz9v.js.map +0 -1
package/dist/cjs/index.js
CHANGED
|
@@ -21994,8 +21994,8 @@ var SegmentedControl = function (_a) {
|
|
|
21994
21994
|
};
|
|
21995
21995
|
|
|
21996
21996
|
var useDropdownAlignment = function (containerRef, dropdownRef, isOpen) {
|
|
21997
|
-
var _a = React.useState(
|
|
21998
|
-
var _b = React.useState(
|
|
21997
|
+
var _a = React.useState('left'), alignX = _a[0], setAlignX = _a[1];
|
|
21998
|
+
var _b = React.useState('bottom'), alignY = _b[0], setAlignY = _b[1];
|
|
21999
21999
|
var updateAlignment = React.useCallback(function () {
|
|
22000
22000
|
if (containerRef.current && dropdownRef.current) {
|
|
22001
22001
|
var containerRect = containerRef.current.getBoundingClientRect();
|
|
@@ -22003,8 +22003,8 @@ var useDropdownAlignment = function (containerRef, dropdownRef, isOpen) {
|
|
|
22003
22003
|
var dropdownHeight = dropdownRef.current.offsetHeight;
|
|
22004
22004
|
var spaceOnRight = window.innerWidth - containerRect.left;
|
|
22005
22005
|
var spaceBelow = window.innerHeight - containerRect.bottom;
|
|
22006
|
-
|
|
22007
|
-
|
|
22006
|
+
setAlignX(spaceOnRight < dropdownWidth ? 'right' : 'left');
|
|
22007
|
+
setAlignY(spaceBelow < dropdownHeight && containerRect.top > spaceBelow ? 'top' : 'bottom');
|
|
22008
22008
|
}
|
|
22009
22009
|
}, [containerRef, dropdownRef]);
|
|
22010
22010
|
React.useEffect(function () {
|
|
@@ -22015,7 +22015,7 @@ var useDropdownAlignment = function (containerRef, dropdownRef, isOpen) {
|
|
|
22015
22015
|
observer.observe(document.documentElement);
|
|
22016
22016
|
return function () { return observer.disconnect(); };
|
|
22017
22017
|
}, [isOpen, updateAlignment]);
|
|
22018
|
-
return {
|
|
22018
|
+
return { alignX: alignX, alignY: alignY };
|
|
22019
22019
|
};
|
|
22020
22020
|
|
|
22021
22021
|
var useEscapeKey = function (callback) {
|
|
@@ -22030,8 +22030,8 @@ var useEscapeKey = function (callback) {
|
|
|
22030
22030
|
}, [handleOnEscape]);
|
|
22031
22031
|
};
|
|
22032
22032
|
|
|
22033
|
-
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-
|
|
22034
|
-
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","
|
|
22033
|
+
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}";
|
|
22034
|
+
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"};
|
|
22035
22035
|
styleInject(css_248z$e);
|
|
22036
22036
|
|
|
22037
22037
|
var SearchableDropdown = function (_a) {
|
|
@@ -22058,7 +22058,7 @@ var SearchableDropdown = function (_a) {
|
|
|
22058
22058
|
if (isOpen)
|
|
22059
22059
|
closeAndRestoreFocus();
|
|
22060
22060
|
}, [isOpen, closeAndRestoreFocus]));
|
|
22061
|
-
var _s = useDropdownAlignment(containerRef, dropdownRef, isOpen),
|
|
22061
|
+
var _s = useDropdownAlignment(containerRef, dropdownRef, isOpen), alignX = _s.alignX, alignY = _s.alignY;
|
|
22062
22062
|
React.useEffect(function () {
|
|
22063
22063
|
if (isOpen && searchable && searchInputRef.current) {
|
|
22064
22064
|
searchInputRef.current.focus();
|
|
@@ -22148,7 +22148,7 @@ var SearchableDropdown = function (_a) {
|
|
|
22148
22148
|
_b[styles$e.condensed] = condensed,
|
|
22149
22149
|
_b[styles$e.bordered] = bordered,
|
|
22150
22150
|
_b[styles$e.disabled] = disabled,
|
|
22151
|
-
_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.
|
|
22151
|
+
_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) {
|
|
22152
22152
|
var _a;
|
|
22153
22153
|
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 = {},
|
|
22154
22154
|
_a[styles$e.optionSelected] = option.id === localValue,
|