sea-react-components 1.3.26 → 1.3.27

package/dist/components/button/index.js

@@ -11,5 +11,5 @@ const classes = {
 };
 export default function Button({ loading = false, disabled, className, children, variant = "primary", ...props }) {
     const classVariants = variant != "other" ? classes[variant] || classes["primary"] : className;
-    return (_jsx("button", { className: clsx("flex px-4 py-2 rounded-lg gap-1 items-center justify-center custom-animation", classVariants), disabled: disabled, ...props, children: loading ? (_jsx(Icon, { icon: "line-md:loading-loop", className: "w-6 h-6" })) : (children) }));
+    return (_jsx("button", { className: clsx("flex px-2 md:px-4 py-2 rounded-lg gap-1 items-center justify-center custom-animation", classVariants), disabled: disabled, ...props, children: loading ? (_jsx(Icon, { icon: "line-md:loading-loop", className: "w-6 h-6" })) : (children) }));
 }

package/dist/components/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,OAAc,EACd,SAAS,EACT,QAAQ,EACR,IAAW,GACZ,EAAE,KAAK,2CAyDP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,SAAmB,EACnB,OAAc,EACd,SAAS,EACT,QAAQ,EACR,IAAW,GACZ,EAAE,KAAK,2CAsDP"}

package/dist/components/drawer/index.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import clsx from "clsx";
 import { Icon } from "@iconify/react";
 const sizeClass = {
-    sm: "w-[320px] md:w-[320px]",
-    md: "sm:w-[85%]  xl:w-[25%] lg:w-[40%] md:w-[40%]",
-    lg: "sm:w-[95%] md:w-[60%]",
-    xl: "sm:w-full md:w-[80%]",
+    sm: "w-[100%] md:w-[320px]",
+    md: "w-[100%] sm:w-[400px] ",
+    lg: "w-[100%] md:w-[528px]",
+    xl: "w-[100%] md:w-[736px]",
 };
 export default function Drawer({ isOpen, onClose, placement = "right", overlay = true, className, children, size = "md", // NEW
  }) {
@@ -20,5 +20,5 @@ export default function Drawer({ isOpen, onClose, placement = "right", overlay =
                     "top-0 left-0 max-h-screen h-full translate-x-0": placement === "left" && isOpen,
                     "bottom-0 left-0 w-full h-auto transform translate-y-full": placement === "bottom" && !isOpen,
                     "bottom-0 left-0 w-full h-auto translate-y-0": placement === "bottom" && isOpen,
-                }, widthClass, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2 text-secondary-dark", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-5 w-5 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));
+                }, widthClass, className), children: [_jsx("button", { onClick: onClose, className: "absolute top-2 right-2", children: _jsx(Icon, { icon: "line-md:close-small", className: "h-6 w-6 hover:scale-110 transition-all duration-300 ease-in-out" }) }), children] })] }));
 }

package/dist/components/searchable-select/index.d.ts

@@ -1,9 +1,14 @@
 import React from "react";
 import { SelectProps } from "../../";
 export type Props<T, K> = Omit<SelectProps<T>, "options" | "onChangeSearchInput"> & {
-    getItems: (q: string) => Promise<K[]>;
+    /** Fetch paginated / filtered list */
+    getItems: (query: string) => Promise<K[]>;
+    /** OPTIONAL: fetch single item by value (for selected values not in page) */
+    getOneItem?: (id: T) => Promise<K>;
+    /** Map item → label */
     getLabel: (item: K) => React.ReactNode;
+    /** Map item → value */
     getValue: (item: K) => T;
 };
-export default function SearchableSelect<T, K>({ getItems, getLabel, getValue, ...props }: Props<T, K>): import("react/jsx-runtime").JSX.Element;
+export default function SearchableSelect<T, K>({ getItems, getOneItem, getLabel, getValue, values, ...props }: Props<T, K>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/searchable-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/searchable-select/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAAwB,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE3D,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAC5B,WAAW,CAAC,CAAC,CAAC,EACd,SAAS,GAAG,qBAAqB,CAClC,GAAG;IACF,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,EAC7C,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,2CAsCb"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/searchable-select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AACpE,OAAO,EAAwB,WAAW,EAAE,MAAM,QAAQ,CAAC;AAY3D,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAC5B,WAAW,CAAC,CAAC,CAAC,EACd,SAAS,GAAG,qBAAqB,CAClC,GAAG;IACF,sCAAsC;IACtC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAE1C,6EAA6E;IAC7E,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAEnC,uBAAuB;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAEvC,uBAAuB;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAAE,EAC7C,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,2CAoHb"}

package/dist/components/searchable-select/index.js

@@ -1,28 +1,104 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Select } from "../../";
-export default function SearchableSelect({ getItems, getLabel, getValue, ...props }) {
+/* ------------------------------------------------------------------ */
+/* Utils */
+/* ------------------------------------------------------------------ */
+function isValidValue(value) {
+    return value !== undefined && value !== null && value !== "";
+}
+/* ------------------------------------------------------------------ */
+/* Component */
+/* ------------------------------------------------------------------ */
+export default function SearchableSelect({ getItems, getOneItem, getLabel, getValue, values = [], ...props }) {
     const [query, setQuery] = useState("");
-    const [options, setOptions] = useState([]);
-    // --- Memoize callbacks if not already ---
-    const memoGetItems = useCallback(getItems, [getItems]);
-    const memoGetLabel = useCallback(getLabel, [getLabel]);
-    const memoGetValue = useCallback(getValue, [getValue]);
+    const [items, setItems] = useState([]);
+    const [resolvedSelected, setResolvedSelected] = useState([]);
+    /* ------------------------------------------------------------------
+     * Refs to avoid refetching on rerenders (Formik-safe)
+     * ------------------------------------------------------------------ */
+    const getItemsRef = useRef(getItems);
+    const getOneItemRef = useRef(getOneItem);
+    useEffect(() => {
+        getItemsRef.current = getItems;
+    }, [getItems]);
+    useEffect(() => {
+        getOneItemRef.current = getOneItem;
+    }, [getOneItem]);
+    /* ------------------------------------------------------------------
+     * Fetch list ONLY when query changes
+     * ------------------------------------------------------------------ */
     useEffect(() => {
         let active = true;
-        memoGetItems(query).then((items) => {
-            if (active)
-                setOptions(items);
+        getItemsRef.current(query).then((data) => {
+            if (active) {
+                setItems(data);
+            }
         });
         return () => {
-            active = false; // cancel stale promises
+            active = false;
         };
     }, [query]);
-    // --- Memoize mapped options ---
-    const mappedOptions = useMemo(() => options.map((item) => ({
-        label: memoGetLabel(item),
-        value: memoGetValue(item),
-    })), [options, memoGetLabel, memoGetValue]);
-    return (_jsx(Select, { ...props, options: mappedOptions, onChangeSearchInput: setQuery, isSearchable: true, isRemote: true }));
+    /* ------------------------------------------------------------------
+     * Resolve selected values not in current page (pagination-safe)
+     * ------------------------------------------------------------------ */
+    useEffect(() => {
+        if (!getOneItemRef.current)
+            return;
+        if (!(values === null || values === void 0 ? void 0 : values.length))
+            return;
+        const validValues = values.filter(isValidValue);
+        if (!validValues.length)
+            return;
+        const knownIds = new Set([...items, ...resolvedSelected]
+            .map((i) => getValue(i))
+            .filter(isValidValue));
+        const missingIds = validValues.filter((id) => !knownIds.has(id));
+        if (!missingIds.length)
+            return;
+        let active = true;
+        Promise.all(missingIds.map((id) => getOneItemRef.current(id)))
+            .then((fetched) => {
+            if (!active)
+                return;
+            setResolvedSelected((prev) => {
+                const map = new Map();
+                [...prev, ...fetched].forEach((item) => {
+                    const value = getValue(item);
+                    if (isValidValue(value)) {
+                        map.set(value, item);
+                    }
+                });
+                return Array.from(map.values());
+            });
+        })
+            .catch(() => {
+            /* ignore */
+        });
+        return () => {
+            active = false;
+        };
+    }, [values, items, resolvedSelected, getValue]);
+    /* ------------------------------------------------------------------
+     * Merge selected + paginated items
+     * Selected items always stay on top
+     * ------------------------------------------------------------------ */
+    const selectOptions = useMemo(() => {
+        const map = new Map();
+        [...resolvedSelected, ...items].forEach((item) => {
+            const value = getValue(item);
+            if (isValidValue(value)) {
+                map.set(value, item);
+            }
+        });
+        return Array.from(map.values()).map((item) => ({
+            label: getLabel(item),
+            value: getValue(item),
+        }));
+    }, [items, resolvedSelected, getLabel, getValue]);
+    /* ------------------------------------------------------------------
+     * Render
+     * ------------------------------------------------------------------ */
+    return (_jsx(Select, { ...props, values: values, options: selectOptions, isSearchable: true, isRemote: true, onChangeSearchInput: setQuery }));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sea-react-components",
   "description": "SEA react components library",
-  "version": "1.3.26",
+  "version": "1.3.27",
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc --build && npx postcss src/styles.css -o dist/styles.css && npx postcss src/components/text-editor/style.css -o dist/components/text-editor/style.css",
@@ -48,7 +48,7 @@
     "jwt-decode": "^4.0.0",
     "lowlight": "^3.3.0",
     "react-dom": "^18.3.1",
-    "sea-platform-helpers": "^1.5.21",
+    "sea-platform-helpers": "^1.5.22",
     "sea-react-components": "file:",
     "uuid": "^13.0.0",
     "yup": "^1.5.0"