@mohasinac/appkit 3.1.7 → 3.2.1

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/dist/utils/id-generators.d.ts

@@ -242,6 +242,12 @@ export type MediaFilenameContext = ({
     refundId: string;
     ext?: string;
     date?: Date;
+} | {
+    type: "payment-proof";
+    orderId: string;
+    buyerName: string;
+    ext?: string;
+    date?: Date;
 };
 export declare function generateMediaFilename(ctx: MediaFilenameContext): string;
 export declare function validateMediaFilename(filename: string): boolean;

package/dist/utils/id-generators.js

@@ -384,6 +384,15 @@ export function generateMediaFilename(ctx) {
             const ext = ctx.ext ?? "pdf";
             return `refund-proof-${ctx.orderId}-${ctx.refundId}-${y}${m}${day}.${ext}`;
         }
+        case "payment-proof": {
+            const d = ctx.date ?? new Date();
+            const y = d.getFullYear();
+            const m = String(d.getMonth() + 1).padStart(2, "0");
+            const day = String(d.getDate()).padStart(2, "0");
+            const ext = ctx.ext ?? "jpg";
+            const name = ctx.buyerName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "").slice(0, 20);
+            return `payment-proof-${ctx.orderId}-${name}-${y}${m}${day}.${ext}`;
+        }
     }
 }
 /**

package/package.json

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