@depict-ai/react-ui 0.0.62 → 0.0.64

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.62";
+export const version = "0.0.64";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -497,7 +497,7 @@ const $ca5840628781f899$export$45080d603eda647c = (props)=>{
 
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.62";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.64";
 
 
 

package/dist/module.js

@@ -479,7 +479,7 @@ const $e3ccaca62718bae4$export$45080d603eda647c = (props)=>{
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.62";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.64";
 
 
 

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.62";
+export const version = "0.0.64";
 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.62";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.64";
 
 
 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.62";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.64";
 
 
 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.62",
+  "version": "0.0.64",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.39",
-    "@depict-ai/utilishared": "^0.0.37",
+    "@depict-ai/ui": "^0.0.41",
+    "@depict-ai/utilishared": "^0.0.39",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {