@depict-ai/react-ui 0.0.63 → 0.0.65

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui/dist";
 import { Display } from "../../../lib/displays/Display";
-import React, { ReactNode, PropsWithChildren } from "react";
+import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { Locale } from "@depict-ai/ui/locales";
 import { Display as _Display1 } from "@depict-ai/utilishared";
 import { CategoryPage } from "@depict-ai/ui";
@@ -392,16 +392,64 @@ interface UseSearchModalReturn {
  */
 export function useDepictSearchModal(params: UseSearchModalParams): UseSearchModalReturn;
 interface SearchFieldProps {
+    /**
+     * A reference to the DOM element that the modal should be aligned to.
+     *
+     * The top of the modal will be aligned to the top of the element.
+     *
+     * The hight of the search field in the modal will be the same as the height of the element.
+     * If not provided, the modal will be aligned to the search field itself.
+     */
     alignerRef?: React.RefObject<HTMLElement>;
 }
 interface UseDepictSearchFieldReturn {
-    DepictSearchField: React.FC;
-}
-interface SearchFieldProps {
-    alignerRef?: React.RefObject<HTMLElement>;
+    /**
+     * A React component that renders the search field.
+     */
+    DepictSearchField: () => ReactElement;
 }
+/**
+ * Hook used to configure the Depict search field.
+ * @example
+ * Render a search field that opens a modal aligned to the search field itself:
+ * ```tsx
+ * import React from "react";
+ * import { useDepictSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { DepictSearchField } = useDepictSearchModal();
+ *
+ *   return (
+ *     <div>
+ *       <DepictSearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example
+ * Render a search field that opens a modal aligned another DOM element:
+ * ```tsx
+ * import React from "react";
+ * import { useDepictSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const alignerRef = useRef(null);
+ *   const { DepictSearchField } = useDepictSearchModal({
+ *     alignerRef: ref
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <div ref={alignerRef} style={{ height: "100px", width: "100px" }} />
+ *       <DepictSearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {JSX.Element}
+ */
 export const useDepictSearchField: (props: SearchFieldProps) => UseDepictSearchFieldReturn;
-export const version = "0.0.63";
+export const version = "0.0.65";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -410,7 +410,6 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
@@ -423,17 +422,11 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        const style_element = document.createElement("style");
-        document.head.append(style_element);
-        const resize_observer = new ResizeObserver((0, $4GYXz$depictaiutilishared.catchify)(()=>{
-            const styles = (0, $4GYXz$depictaiui.styles_to_valid_css_string)({
-                ".depict.plp .depict-search-modal .query-input": {
-                    "height": `${headerAligner?.clientHeight}px`
-                }
-            });
-            style_element.replaceChildren(styles);
-        }));
-        resize_observer.observe(headerAligner);
+        if (!headerAligner) // Very important not to throw here, as it just means the ref hasn't been set by react yet.
+        // This is a race condition that will be resolved in the next render.
+        // If we throw here, the app will crash.
+        return;
+        const { cleanup: cleanup  } = (0, $4GYXz$depictaiui.connect_query_input_height_to_aligner_height)(headerAligner);
         let dispose_aligner;
         /**
      * Setting position to fixed is important to make the modal work with align_field.
@@ -442,8 +435,7 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
         });
         (0, $4GYXz$solidjs.createRoot)((dispose)=>{
             dispose_aligner = ()=>{
-                resize_observer.disconnect();
-                style_element.remove();
+                cleanup();
                 dispose();
             };
             (0, $4GYXz$depictaiui.align_field)(style_props_, headerAligner, undefined, false, "top");
@@ -497,7 +489,7 @@ const $ca5840628781f899$export$45080d603eda647c = (props)=>{
 
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.63";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.65";
 
 
 

package/dist/module.js

@@ -1,5 +1,5 @@
 import {dlog as $TZSbU$dlog, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, href_change_ipns as $TZSbU$href_change_ipns, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
-import {add_to_version_info as $TZSbU$add_to_version_info, CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, styles_to_valid_css_string as $TZSbU$styles_to_valid_css_string, align_field as $TZSbU$align_field, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
+import {add_to_version_info as $TZSbU$add_to_version_info, CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, CategoryPage as $TZSbU$CategoryPage, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, connect_query_input_height_to_aligner_height as $TZSbU$connect_query_input_height_to_aligner_height, align_field as $TZSbU$align_field, SearchField as $TZSbU$SearchField} from "@depict-ai/ui";
 import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createSignal as $TZSbU$createSignal, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createComputed as $TZSbU$createComputed} from "solid-js";
 import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, forwardRef as $TZSbU$forwardRef} from "react";
 import {en as $TZSbU$en} from "@depict-ai/ui/locales";
@@ -392,7 +392,6 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-
 const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
@@ -405,17 +404,11 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
             globalState.search.modal_open = true;
             return;
         }
-        const style_element = document.createElement("style");
-        document.head.append(style_element);
-        const resize_observer = new ResizeObserver((0, $TZSbU$catchify)(()=>{
-            const styles = (0, $TZSbU$styles_to_valid_css_string)({
-                ".depict.plp .depict-search-modal .query-input": {
-                    "height": `${headerAligner?.clientHeight}px`
-                }
-            });
-            style_element.replaceChildren(styles);
-        }));
-        resize_observer.observe(headerAligner);
+        if (!headerAligner) // Very important not to throw here, as it just means the ref hasn't been set by react yet.
+        // This is a race condition that will be resolved in the next render.
+        // If we throw here, the app will crash.
+        return;
+        const { cleanup: cleanup  } = (0, $TZSbU$connect_query_input_height_to_aligner_height)(headerAligner);
         let dispose_aligner;
         /**
      * Setting position to fixed is important to make the modal work with align_field.
@@ -424,8 +417,7 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
         });
         (0, $TZSbU$createRoot)((dispose)=>{
             dispose_aligner = ()=>{
-                resize_observer.disconnect();
-                style_element.remove();
+                cleanup();
                 dispose();
             };
             (0, $TZSbU$align_field)(style_props_, headerAligner, undefined, false, "top");
@@ -479,7 +471,7 @@ const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.63";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.65";
 
 
 

package/dist-server/index.d.ts

@@ -1,11 +1,15 @@
+import { ReactElement } from "react";
 type OpenModal = () => void;
 interface UseSearchModalReturn {
     open: OpenModal;
 }
 interface UseDepictSearchFieldReturn {
-    DepictSearchField: React.FC;
+    /**
+     * A React component that renders the search field.
+     */
+    DepictSearchField: () => ReactElement;
 }
-export const version = "0.0.63";
+export const version = "0.0.65";
 export function DepictProvider(props: any): any;
 export function DepictSearchPage(): any;
 export function DepictCategoryPage(): any;

package/dist-server/main.js

@@ -19,7 +19,7 @@ $parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$e
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.63";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.65";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
@@ -65,9 +65,9 @@ function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
 }
 function $41e7e5d85b5e0d49$export$45080d603eda647c() {
     return {
-        DepictSearchField: (0, $5efvh$reactjsxruntime.jsx)("div", {
-            children: []
-        })
+        DepictSearchField: ()=>(0, $5efvh$reactjsxruntime.jsx)("div", {
+                children: []
+            })
     };
 }
 function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.63";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.65";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
@@ -49,9 +49,9 @@ function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
 }
 function $2b1fdeb83610500f$export$45080d603eda647c() {
     return {
-        DepictSearchField: (0, $1RlIW$jsx)("div", {
-            children: []
-        })
+        DepictSearchField: ()=>(0, $1RlIW$jsx)("div", {
+                children: []
+            })
     };
 }
 function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.40",
-    "@depict-ai/utilishared": "^0.0.38",
+    "@depict-ai/ui": "^0.0.42",
+    "@depict-ai/utilishared": "^0.0.40",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {