@mohasinac/appkit 3.2.0 → 3.2.2

package/dist/ui/components/PaginatedSelect.js

@@ -17,6 +17,7 @@ const C = {
     placeholder: "appkit-ps__placeholder",
     triggerLeft: "appkit-ps__trigger-left",
     dropdown: "appkit-ps__dropdown",
+    dropdownUp: "appkit-ps__dropdown--up",
     search: "appkit-ps__search",
     list: "appkit-ps__list",
     option: "appkit-ps__option",
@@ -55,6 +56,7 @@ export function PaginatedSelect(props) {
     const maxChipsVisible = isMulti ? props.maxChipsVisible ?? 3 : 0;
     const [query, setQuery] = useState("");
     const [open, setOpen] = useState(false);
+    const [opensUp, setOpensUp] = useState(false);
     const [asyncOptions, setAsyncOptions] = useState([]);
     const [page, setPage] = useState(1);
     const [hasMore, setHasMore] = useState(false);
@@ -88,6 +90,13 @@ export function PaginatedSelect(props) {
             return;
         void load(query, 1, true);
     }, [open, query, load, loadOptions]);
+    useEffect(() => {
+        if (!open || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - rect.bottom;
+        setOpensUp(spaceBelow < 220 && rect.top > 220);
+    }, [open]);
     useEffect(() => {
         const onClickOutside = (e) => {
             if (!containerRef.current?.contains(e.target))
@@ -182,7 +191,7 @@ export function PaginatedSelect(props) {
                                             removeChip(v);
                                         }, children: "\u2715" }))] }, String(v)))), overflowCount > 0 && (_jsxs("span", { className: C.overflowChip, children: ["+", overflowCount, " more"] }))] })), _jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [C.trigger, disabled ? C.triggerDisabled : ""]
                             .filter(Boolean)
-                            .join(" "), "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx("span", { className: C.triggerLeft, children: _jsx("span", { className: triggerEmpty ? C.placeholder : "", children: triggerLabel }) }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open && (_jsxs("div", { className: C.dropdown, role: "listbox", "aria-multiselectable": isMulti || undefined, children: [_jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, className: C.search }), _jsxs("ul", { className: C.list, children: [filtered.map((opt, idx) => {
+                            .join(" "), "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx("span", { className: C.triggerLeft, children: _jsx("span", { className: triggerEmpty ? C.placeholder : "", children: triggerLabel }) }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open && (_jsxs("div", { className: [C.dropdown, opensUp ? C.dropdownUp : ""].filter(Boolean).join(" "), role: "listbox", "aria-multiselectable": isMulti || undefined, children: [_jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, className: C.search }), _jsxs("ul", { className: C.list, children: [filtered.map((opt, idx) => {
                                         const selected = isSelected(opt.value);
                                         return (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": selected, className: [C.option, selected ? C.optionSelected : ""]
                                                     .filter(Boolean)

package/dist/ui/components/PaginatedSelect.style.css

@@ -120,6 +120,7 @@
   margin-top: 0.25rem;
   width: 100%;
   min-width: 14rem;
+  max-width: calc(100vw - 2rem);
   overflow: hidden;
   border-radius: 0.5rem;
   border: 1px solid var(--appkit-color-border);
@@ -127,6 +128,13 @@
   box-shadow: var(--appkit-shadow-lg);
 }
 
+.appkit-ps__dropdown--up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
+
 :is(.dark) .appkit-ps__dropdown {
   border-color: var(--appkit-color-border);
   background: var(--appkit-color-surface);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"