@depict-ai/react-ui 0.0.57 → 0.0.60

package/dist/index.d.ts

@@ -37,7 +37,6 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
-export function DepictSearchField(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 type NavigateFunction = (href: string) => void;
 type DepictSearchConfig = {
     /**
@@ -392,7 +391,14 @@ interface UseSearchModalReturn {
  * @returns {JSX.Element}
  */
 export function useDepictSearchModal(params: UseSearchModalParams): UseSearchModalReturn;
-export const version = "0.0.57";
+interface SearchFieldProps {
+    alignerRef?: React.RefObject<HTMLElement>;
+}
+interface SearchFieldReturn {
+    DepictSearchField: React.FC;
+}
+export const useDepictSearchField: (props: SearchFieldProps) => SearchFieldReturn;
+export const version = "0.0.60";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */

package/dist/main.js

@@ -17,10 +17,10 @@ $parcel$export(module.exports, "DepictAligner", () => $d96434e62e08087d$export$3
 $parcel$export(module.exports, "DepictProvider", () => $24b00503eef73528$export$9fac37a9c21c2f3b);
 $parcel$export(module.exports, "DepictCategoryPage", () => $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d);
 $parcel$export(module.exports, "DepictSearchPage", () => $7ad7a3d0011b7b1b$export$210723f5a54a7028);
-$parcel$export(module.exports, "DepictSearchField", () => $03c714523ff406fc$export$4c0fa313cf50c4ad);
 $parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "useDepictSearchModal", () => $3647cad61d03b89c$export$cc1e9aaf280afdcb);
+$parcel$export(module.exports, "useDepictSearchField", () => $913da7f4d0bc77f2$export$45080d603eda647c);
 $parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
@@ -44,6 +44,8 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
 
 
 
+
+
 let $b4d0d98857ed9934$var$run_on_href_change;
 function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
     $b4d0d98857ed9934$var$run_on_href_change = cb;
@@ -115,13 +117,15 @@ async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , in
 }
 
 
-
-
-function $03c714523ff406fc$export$4c0fa313cf50c4ad() {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
-            depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search
-        })), {});
-}
+const $03c714523ff406fc$export$bde46b5bb6287cea = (props)=>{
+    const ReactSearchField = ()=>{
+        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
+                depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
+                aligner_ref: props?.alignerRef?.current
+            })), {});
+    };
+    return ReactSearchField;
+};
 
 
 
@@ -245,9 +249,6 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
 }
 
 
-// PoC maybe-component
-// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
-// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
 
 const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $4GYXz$react.createElement)("div", {
@@ -425,7 +426,7 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
-    const { globalState: globalState , location: location , alignerRef: alignerRef , document: document  } = createOpenModalParams;
+    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         const headerAligner = alignerRef?.current;
         if (!globalState.search) throw new Error("No active search in the app!");
@@ -475,7 +476,6 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params) {
     const open = (0, $ef7db890e488d4f4$export$d69d8daa20eae175)({
         globalState: $0b7cd4fb39fc3502$export$8e769ad4338a911e,
-        document: document,
         ...params
     });
     return {
@@ -485,9 +485,20 @@ function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params) {
 
 
 
+const $913da7f4d0bc77f2$export$45080d603eda647c = (props)=>{
+    const SearchField = (0, $03c714523ff406fc$export$bde46b5bb6287cea)({
+        alignerRef: props.alignerRef
+    });
+    return {
+        DepictSearchField: SearchField
+    };
+};
+
+
+
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.57";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.60";
 
 
 

package/dist/module.js

@@ -1,6 +1,6 @@
 import {dlog as $TZSbU$dlog, href_change_ipns as $TZSbU$href_change_ipns, catchify as $TZSbU$catchify, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask, 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, SearchField as $TZSbU$SearchField, 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} from "@depict-ai/ui";
-import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createRoot as $TZSbU$createRoot, createComputed as $TZSbU$createComputed} from "solid-js";
+import {createSignal as $TZSbU$createSignal, untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, onCleanup as $TZSbU$onCleanup, createRoot as $TZSbU$createRoot, createComputed as $TZSbU$createComputed} from "solid-js";
 import {render as $TZSbU$render} from "solid-js/web";
 import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, forwardRef as $TZSbU$forwardRef} from "react";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
@@ -26,6 +26,8 @@ const $42858f023ef23dab$export$8e769ad4338a911e = {
 
 
 
+
+
 let $c83ba9ab79386687$var$run_on_href_change;
 function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
     $c83ba9ab79386687$var$run_on_href_change = cb;
@@ -97,13 +99,15 @@ async function $c83ba9ab79386687$export$79c79419c1ef0081({ display: display , in
 }
 
 
-
-
-function $02e2452814b6e7d6$export$4c0fa313cf50c4ad() {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
-            depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search
-        })), {});
-}
+const $02e2452814b6e7d6$export$bde46b5bb6287cea = (props)=>{
+    const ReactSearchField = ()=>{
+        return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
+                depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
+                aligner_ref: props?.alignerRef?.current
+            })), {});
+    };
+    return ReactSearchField;
+};
 
 
 
@@ -227,9 +231,6 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
 }
 
 
-// PoC maybe-component
-// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
-// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
 
 const $4db0e2f013fc5124$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $TZSbU$forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $TZSbU$createElement)("div", {
@@ -407,7 +408,7 @@ const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
-    const { globalState: globalState , location: location , alignerRef: alignerRef , document: document  } = createOpenModalParams;
+    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         const headerAligner = alignerRef?.current;
         if (!globalState.search) throw new Error("No active search in the app!");
@@ -457,7 +458,6 @@ const $5e26376d86621891$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params) {
     const open = (0, $5e26376d86621891$export$d69d8daa20eae175)({
         globalState: $42858f023ef23dab$export$8e769ad4338a911e,
-        document: document,
         ...params
     });
     return {
@@ -467,9 +467,20 @@ function $cfa72c75e6cf6901$export$cc1e9aaf280afdcb(params) {
 
 
 
+const $2b886cf548a4775c$export$45080d603eda647c = (props)=>{
+    const SearchField = (0, $02e2452814b6e7d6$export$bde46b5bb6287cea)({
+        alignerRef: props.alignerRef
+    });
+    return {
+        DepictSearchField: SearchField
+    };
+};
+
+
+
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.57";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.60";
 
 
 
@@ -511,4 +522,4 @@ const $43099132aad1ceb6$var$package_name = "@depict-ai/react-ui";
 });
 
 
-export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $4db0e2f013fc5124$export$3f4580d6398c5027 as DepictAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$d87c61cecb2edf0d as DepictCategoryPage, $4a678f0c87b12e78$export$210723f5a54a7028 as DepictSearchPage, $02e2452814b6e7d6$export$4c0fa313cf50c4ad as DepictSearchField, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $cfa72c75e6cf6901$export$cc1e9aaf280afdcb as useDepictSearchModal, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};
+export {$b68a14248b7ef667$export$466cdc317043f6cb as QuickLinks, $f866f7ed9f751af4$export$5646050d516e06bc as BreadCrumbs, $4db0e2f013fc5124$export$3f4580d6398c5027 as DepictAligner, $5376eb2a386cd90d$export$9fac37a9c21c2f3b as DepictProvider, $48d7f568740a317d$export$d87c61cecb2edf0d as DepictCategoryPage, $4a678f0c87b12e78$export$210723f5a54a7028 as DepictSearchPage, $f446a84f85ba06f6$export$3f37af283f8fb843 as ImagePlaceholder, $cbd250061abf11cb$export$89c6019e4baa40b1 as TextPlaceholder, $cfa72c75e6cf6901$export$cc1e9aaf280afdcb as useDepictSearchModal, $2b886cf548a4775c$export$45080d603eda647c as useDepictSearchField, $43099132aad1ceb6$re_export$CategoryTitle as CategoryTitle, $43099132aad1ceb6$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version, $97603d19204ec48d$export$b8a61e5c71402559 as Navigation};

package/dist-server/index.d.ts

@@ -2,7 +2,7 @@ type OpenModal = () => void;
 interface UseSearchModalReturn {
     open: OpenModal;
 }
-export const version = "0.0.57";
+export const version = "0.0.60";
 export function DepictProvider(props: any): any;
 export function DepictSearchField(): any;
 export function DepictSearchPage(): any;
@@ -17,5 +17,8 @@ export function DepictAligner(): import("react").DetailedReactHTMLElement<{
 }, HTMLElement>;
 export function ImagePlaceHolder(): any;
 export function TextPlaceholder(): any;
+export function useDepictSearchField(): {
+    SearchField: any;
+};
 export function openModal(): void;
 export function useDepictSearchModal(): UseSearchModalReturn;

package/dist-server/main.js

@@ -14,12 +14,13 @@ $parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466c
 $parcel$export(module.exports, "DepictAligner", () => $41e7e5d85b5e0d49$export$3f4580d6398c5027);
 $parcel$export(module.exports, "ImagePlaceHolder", () => $41e7e5d85b5e0d49$export$ecf150517ad2aa0);
 $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
+$parcel$export(module.exports, "useDepictSearchField", () => $41e7e5d85b5e0d49$export$45080d603eda647c);
 $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
 $parcel$export(module.exports, "useDepictSearchModal", () => $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.57";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.60";
 
 
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
@@ -68,6 +69,13 @@ function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
         children: []
     });
 }
+function $41e7e5d85b5e0d49$export$45080d603eda647c() {
+    return {
+        SearchField: (0, $5efvh$reactjsxruntime.jsx)("div", {
+            children: []
+        })
+    };
+}
 function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
 function $41e7e5d85b5e0d49$export$cc1e9aaf280afdcb() {
     return {

package/dist-server/module.js

@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.57";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.60";
 
 
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
@@ -52,6 +52,13 @@ function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
         children: []
     });
 }
+function $2b1fdeb83610500f$export$45080d603eda647c() {
+    return {
+        SearchField: (0, $1RlIW$jsx)("div", {
+            children: []
+        })
+    };
+}
 function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
 function $2b1fdeb83610500f$export$cc1e9aaf280afdcb() {
     return {
@@ -60,4 +67,4 @@ function $2b1fdeb83610500f$export$cc1e9aaf280afdcb() {
 }
 
 
-export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$4c0fa313cf50c4ad as DepictSearchField, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$d87c61cecb2edf0d as DepictCategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$3f4580d6398c5027 as DepictAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$cc1e9aaf280afdcb as useDepictSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
+export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$4c0fa313cf50c4ad as DepictSearchField, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$d87c61cecb2edf0d as DepictCategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$3f4580d6398c5027 as DepictAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$45080d603eda647c as useDepictSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$cc1e9aaf280afdcb as useDepictSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -90,8 +90,8 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/ui": "^0.0.34",
-    "@depict-ai/utilishared": "^0.0.32",
+    "@depict-ai/ui": "^0.0.37",
+    "@depict-ai/utilishared": "^0.0.35",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -104,7 +104,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.3",
+    "@depict-ai/plp-styling": "^0.0.5",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",