@depict-ai/react-ui 0.0.91 → 0.0.93

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,3 +1,3 @@
1
- # React flavour of the Depict UI
2
-
1
+ # React flavour of the Depict UI
2
+
3
3
  See the [documentation](https://docs.depict.ai/docs/sdk-intro).
package/dist/index.d.ts CHANGED
@@ -1,388 +1,388 @@
1
- import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
2
- import { Display } from "@depict-ai/utilishared";
3
- import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
4
- import { Locale } from "@depict-ai/ui/locales";
5
- export const version = "0.0.91";
6
- interface PLPConfig<T extends Display> extends BaseProductListingConfig {
7
- /**
8
- * The product card to use for rendering products.
9
- */
10
- productCard: DepictProductCard<T>;
11
- }
12
- /**
13
- * The Depict product card props.
14
- */
15
- export interface DepictProductCardProps<T extends Display> {
16
- /** The display data to render. */
17
- display: T | null;
18
- }
19
- /**
20
- * Depict product card to use for rendering products.
21
- */
22
- export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
23
- type NavigateFunction = (relativeUrl: string) => void;
24
- /**
25
- * The config for the DepictProvider.
26
- */
27
- type ProviderConfig = BaseProviderConfig & {
28
- /**
29
- * The function to use for navigating to a new page.
30
- * This function will be used internally by our components to navigate.
31
- *
32
- * You don't need to provide any in a Next.js context.
33
- *
34
- * @param relativeUrl - The relative url to navigate to.
35
- *
36
- * @example
37
- * Here is how you would use it with react-router, @reach/router, Gatsby or similar.
38
- * ```tsx
39
- * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
40
- * import { useNavigate } from "react-router-dom";
41
- * // import { navigate } from "gatsby";
42
- *
43
- * function Router() {
44
- * const navigate = useNavigate();
45
- * return (
46
- * <DepictProvider
47
- * merchant="houdini"
48
- * market="en-de"
49
- * navigateFunction={navigate}
50
- * search={{
51
- * searchPagePath: "/search",
52
- * }}
53
- * >
54
- * <Routes>[...]</Routes>
55
- * </DepictProvider>
56
- * );
57
- * }
58
- * ```
59
- * @example
60
- * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
61
- * ```tsx
62
- * const navigateFunction = (relativeUrl: string) => {
63
- * router.push(relativeUrl);
64
- * };
65
- * ```
66
- */
67
- navigateFunction?: NavigateFunction;
68
- /**
69
- * The locale to use for the Depict components.
70
- * @default en
71
- */
72
- locale?: Locale;
73
- /**
74
- * Unique ID of the currently logged in user, if applicable.
75
- */
76
- userId?: string;
77
- /**
78
- * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
79
- */
80
- metaData?: Record<string, string>;
81
- search: BaseSearchProviderConfig;
82
- };
83
- /**
84
- * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
85
- *
86
- * Make sure it's mounted on every page where the search modal should be available.
87
- *
88
- * @param props - The props for the DepictProvider.
89
- *
90
- * @example
91
- * ```tsx
92
- * const App = () => { *
93
- * return (
94
- * <DepictProvider
95
- * merchant="YOUR_MERCHANT"
96
- * market="YOUR_MARKET"
97
- * search={{
98
- * searchPagePath: "/search",
99
- * }}
100
- * >
101
- * <App />
102
- * </DepictProvider>
103
- * );
104
- * };
105
- * ```
106
- * @returns {JSX.Element} The DepictProvider.
107
- */
108
- export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
109
- children?: import("react").ReactNode;
110
- }>;
111
- /**
112
- * A component used to align other Depict components to.
113
- * @example
114
- * Align the search modal
115
- * ```tsx
116
- * import React from "react";
117
- * import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
118
- *
119
- * const App = () => {
120
- * const ref = React.createRef();
121
- *
122
- * const { open } = useSearchModal({
123
- * location: "aligned",
124
- * alignerRef: ref,
125
- * });
126
- *
127
- * return (
128
- * <div>
129
- * <ComponentAligner ref={ref} />
130
- * <button onClick={open}>Open</button>
131
- * </div>
132
- * );
133
- * };
134
- * ```
135
- * @returns {JSX.Element}
136
- */
137
- export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
138
- interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
139
- }
140
- /**
141
- * SearchPage is a component that renders a Depict search results page.
142
- * @param props - The props for the search page.
143
- *
144
- * @example
145
- * ```tsx
146
- * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
147
- *
148
- * function Search() {
149
- * return <SearchPage productCard={MyCustomSearchProductCard} />
150
- * }
151
- *
152
- * interface MyCustomDisplay extends Display {}
153
- *
154
- * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
155
- * display,
156
- * }) => {
157
- * if (!display) {
158
- * return <ImagePlaceholder aspectRatio={3 / 4} />
159
- * }
160
- *
161
- * return (
162
- * <>
163
- * <MyCustomProductCard
164
- * product={{
165
- * id: display.product_id,
166
- * name: display.title,
167
- * description: display.title,
168
- * images: [{ url: display.image_url }],
169
- * price: {
170
- * value: display.sale_price,
171
- * },
172
- * }}
173
- * />
174
- * </>
175
- * )
176
- * }
177
- *
178
- * ```
179
- */
180
- export function SearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
181
- interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
182
- /**
183
- * The category id to show.
184
- */
185
- categoryId: string;
186
- /**
187
- * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
188
- * @default CategoryTitle
189
- *
190
- * @example
191
- * ```tsx
192
- * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} categoryTitlePlugin={CategoryTitle} />
193
- * ```
194
- */
195
- categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
196
- }
197
- /**
198
- * CategoryPage is a component that renders a Depict category page.
199
- * @param props the props for the category page.
200
- *
201
- * @example
202
- * ```tsx
203
- * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
204
- *
205
- * function Category() {
206
- * return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
207
- * }
208
- *
209
- * interface MyCustomDisplay extends Display {}
210
- *
211
- * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
212
- * display,
213
- * }) => {
214
- * if (!display) {
215
- * return <ImagePlaceholder aspectRatio={3 / 4} />
216
- * }
217
- *
218
- * return (
219
- * <>
220
- * <MyCustomProductCard
221
- * product={{
222
- * id: display.product_id,
223
- * name: display.title,
224
- * description: display.title,
225
- * images: [{ url: display.image_url }],
226
- * price: {
227
- * value: display.sale_price,
228
- * },
229
- * }}
230
- * />
231
- * </>
232
- * )
233
- * }
234
- * ```
235
- */
236
- export function CategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
237
- /**
238
- * BreadCrumbs is the "trail" in the header of a category page.
239
- */
240
- export function BreadCrumbs(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
241
- /**
242
- * QuickLinks is a component enabling the user to go sideways and downwards in the category tree.
243
- */
244
- export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
245
- /**
246
- * A placeholder image that can be used in place of an image that is loading.
247
- * @param props
248
- * @returns
249
- */
250
- export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
251
- /** A placeholder text that can be used in place of a text that is loading. */
252
- export const TextPlaceholder: React.FC<TextPlaceholderProps>;
253
- /**
254
- * Parameters to configure the search modal.
255
- */
256
- interface UseSearchModalParams {
257
- /**
258
- * How the modal should be opened.
259
- * Will default to "centered" if nothing else is specified.
260
- * - "centered" - The modal will be opened in the center of the screen.
261
- * - "aligned" - The modal will be opened aligned to the alignerRef element.
262
- */
263
- location?: ModalLocation;
264
- /**
265
- * The ref to the element that the modal should be aligned to.
266
- * This is only used when location is "aligned".
267
- * @default undefined
268
- * @example
269
- * ```tsx
270
- import React from "react";
271
- import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
272
-
273
- const App = () => {
274
- const ref = React.createRef();
275
-
276
- const { open } = useSearchModal({
277
- location: "aligned",
278
- alignerRef: ref,
279
- });
280
-
281
- return (
282
- <div>
283
- <ComponentAligner ref={ref} />
284
- <button onClick={open}>Open</button>
285
- </div>
286
- );
287
- };
288
- * ```
289
- */
290
- alignerRef?: React.RefObject<HTMLElement>;
291
- }
292
- type OpenModal = () => void;
293
- /**
294
- * How the modal should be opened.
295
- */
296
- type ModalLocation = "centered" | "aligned";
297
- interface UseSearchModalReturn {
298
- open: OpenModal;
299
- }
300
- /**
301
- * Hook used to open the search modal.
302
- * @example
303
- * Open a centered modal:
304
- * ```tsx
305
- * import React from "react";
306
- * import { useSearchModal } from "@depict-ai/react-ui";
307
- *
308
- * const App = () => {
309
- * const { open } = useSearchModal({
310
- * location: "centered",
311
- * });
312
- *
313
- * return (
314
- * <div>
315
- * <button onClick={open}>Open</button>
316
- * </div>
317
- * );
318
- * };
319
- * ```
320
- * @returns {JSX.Element}
321
- */
322
- export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
323
- interface SearchFieldProps {
324
- /**
325
- * A reference to the DOM element that the modal should be aligned to.
326
- *
327
- * The top of the modal will be aligned to the top of the element.
328
- *
329
- * The height of the search field in the modal will be the same as the height of the element.
330
- * If not provided, the modal will be aligned to the search field itself.
331
- */
332
- alignerRef?: React.RefObject<HTMLElement>;
333
- }
334
- interface UseSearchFieldReturn {
335
- /**
336
- * A React component that renders the search field.
337
- */
338
- SearchField: () => ReactElement;
339
- }
340
- /**
341
- * Hook used to configure the Depict search field.
342
- * @example
343
- * Render a search field that opens a modal aligned to the search field itself:
344
- * ```tsx
345
- * import React from "react";
346
- * import { useSearchField } from "@depict-ai/react-ui";
347
- *
348
- * const App = () => {
349
- * const { SearchField } = useSearchField();
350
- *
351
- * return (
352
- * <div>
353
- * <SearchField />
354
- * </div>
355
- * );
356
- * };
357
- * ```
358
- * @example
359
- * Render a search field that opens a modal aligned another DOM element:
360
- * ```tsx
361
- * import React from "react";
362
- * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
363
- *
364
- * const App = () => {
365
- * const ref = useRef(null);
366
- * const { SearchField } = useSearchField({
367
- * alignerRef: ref
368
- * });
369
- *
370
- * return (
371
- * <div>
372
- * <ComponentAligner ref={ref} />
373
- * <SearchField />
374
- * </div>
375
- * );
376
- * };
377
- * ```
378
- * @returns {JSX.Element}
379
- */
380
- export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
381
- /**
382
- * Helper function to navigate to a new page depending on the navigation library used.
383
- */
384
- export const Navigation: {
385
- nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
386
- };
387
- export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
388
- export type { Locale } from "@depict-ai/ui/locales";
1
+ import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
2
+ import { Display } from "@depict-ai/utilishared";
3
+ import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
4
+ import { Locale } from "@depict-ai/ui/locales";
5
+ export const version = "0.0.93";
6
+ interface PLPConfig<T extends Display> extends BaseProductListingConfig {
7
+ /**
8
+ * The product card to use for rendering products.
9
+ */
10
+ productCard: DepictProductCard<T>;
11
+ }
12
+ /**
13
+ * The Depict product card props.
14
+ */
15
+ export interface DepictProductCardProps<T extends Display> {
16
+ /** The display data to render. */
17
+ display: T | null;
18
+ }
19
+ /**
20
+ * Depict product card to use for rendering products.
21
+ */
22
+ export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
23
+ type NavigateFunction = (relativeUrl: string) => void;
24
+ /**
25
+ * The config for the DepictProvider.
26
+ */
27
+ type ProviderConfig = BaseProviderConfig & {
28
+ /**
29
+ * The function to use for navigating to a new page.
30
+ * This function will be used internally by our components to navigate.
31
+ *
32
+ * You don't need to provide any in a Next.js context.
33
+ *
34
+ * @param relativeUrl - The relative url to navigate to.
35
+ *
36
+ * @example
37
+ * Here is how you would use it with react-router, @reach/router, Gatsby or similar.
38
+ * ```tsx
39
+ * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
40
+ * import { useNavigate } from "react-router-dom";
41
+ * // import { navigate } from "gatsby";
42
+ *
43
+ * function Router() {
44
+ * const navigate = useNavigate();
45
+ * return (
46
+ * <DepictProvider
47
+ * merchant="houdini"
48
+ * market="en-de"
49
+ * navigateFunction={navigate}
50
+ * search={{
51
+ * searchPagePath: "/search",
52
+ * }}
53
+ * >
54
+ * <Routes>[...]</Routes>
55
+ * </DepictProvider>
56
+ * );
57
+ * }
58
+ * ```
59
+ * @example
60
+ * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
61
+ * ```tsx
62
+ * const navigateFunction = (relativeUrl: string) => {
63
+ * router.push(relativeUrl);
64
+ * };
65
+ * ```
66
+ */
67
+ navigateFunction?: NavigateFunction;
68
+ /**
69
+ * The locale to use for the Depict components.
70
+ * @default en
71
+ */
72
+ locale?: Locale;
73
+ /**
74
+ * Unique ID of the currently logged in user, if applicable.
75
+ */
76
+ userId?: string;
77
+ /**
78
+ * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
79
+ */
80
+ metaData?: Record<string, string>;
81
+ search?: BaseSearchProviderConfig;
82
+ };
83
+ /**
84
+ * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
85
+ *
86
+ * Make sure it's mounted on every page where the search modal should be available.
87
+ *
88
+ * @param props - The props for the DepictProvider.
89
+ *
90
+ * @example
91
+ * ```tsx
92
+ * const App = () => { *
93
+ * return (
94
+ * <DepictProvider
95
+ * merchant="YOUR_MERCHANT"
96
+ * market="YOUR_MARKET"
97
+ * search={{
98
+ * searchPagePath: "/search",
99
+ * }}
100
+ * >
101
+ * <App />
102
+ * </DepictProvider>
103
+ * );
104
+ * };
105
+ * ```
106
+ * @returns {JSX.Element} The DepictProvider.
107
+ */
108
+ export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
109
+ children?: import("react").ReactNode;
110
+ }>;
111
+ /**
112
+ * A component used to align other Depict components to.
113
+ * @example
114
+ * Align the search modal
115
+ * ```tsx
116
+ * import React from "react";
117
+ * import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
118
+ *
119
+ * const App = () => {
120
+ * const ref = React.createRef();
121
+ *
122
+ * const { open } = useSearchModal({
123
+ * location: "aligned",
124
+ * alignerRef: ref,
125
+ * });
126
+ *
127
+ * return (
128
+ * <div>
129
+ * <ComponentAligner ref={ref} />
130
+ * <button onClick={open}>Open</button>
131
+ * </div>
132
+ * );
133
+ * };
134
+ * ```
135
+ * @returns {JSX.Element}
136
+ */
137
+ export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
138
+ interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
139
+ }
140
+ /**
141
+ * SearchPage is a component that renders a Depict search results page.
142
+ * @param props - The props for the search page.
143
+ *
144
+ * @example
145
+ * ```tsx
146
+ * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
147
+ *
148
+ * function Search() {
149
+ * return <SearchPage productCard={MyCustomSearchProductCard} />
150
+ * }
151
+ *
152
+ * interface MyCustomDisplay extends Display {}
153
+ *
154
+ * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
155
+ * display,
156
+ * }) => {
157
+ * if (!display) {
158
+ * return <ImagePlaceholder aspectRatio={3 / 4} />
159
+ * }
160
+ *
161
+ * return (
162
+ * <>
163
+ * <MyCustomProductCard
164
+ * product={{
165
+ * id: display.product_id,
166
+ * name: display.title,
167
+ * description: display.title,
168
+ * images: [{ url: display.image_url }],
169
+ * price: {
170
+ * value: display.sale_price,
171
+ * },
172
+ * }}
173
+ * />
174
+ * </>
175
+ * )
176
+ * }
177
+ *
178
+ * ```
179
+ */
180
+ export function SearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
181
+ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
182
+ /**
183
+ * The category id to show.
184
+ */
185
+ categoryId: string;
186
+ /**
187
+ * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
188
+ * @default CategoryTitle
189
+ *
190
+ * @example
191
+ * ```tsx
192
+ * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} categoryTitlePlugin={CategoryTitle} />
193
+ * ```
194
+ */
195
+ categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
196
+ }
197
+ /**
198
+ * CategoryPage is a component that renders a Depict category page.
199
+ * @param props the props for the category page.
200
+ *
201
+ * @example
202
+ * ```tsx
203
+ * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
204
+ *
205
+ * function Category() {
206
+ * return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
207
+ * }
208
+ *
209
+ * interface MyCustomDisplay extends Display {}
210
+ *
211
+ * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
212
+ * display,
213
+ * }) => {
214
+ * if (!display) {
215
+ * return <ImagePlaceholder aspectRatio={3 / 4} />
216
+ * }
217
+ *
218
+ * return (
219
+ * <>
220
+ * <MyCustomProductCard
221
+ * product={{
222
+ * id: display.product_id,
223
+ * name: display.title,
224
+ * description: display.title,
225
+ * images: [{ url: display.image_url }],
226
+ * price: {
227
+ * value: display.sale_price,
228
+ * },
229
+ * }}
230
+ * />
231
+ * </>
232
+ * )
233
+ * }
234
+ * ```
235
+ */
236
+ export function CategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
237
+ /**
238
+ * BreadCrumbs is the "trail" in the header of a category page.
239
+ */
240
+ export function BreadCrumbs(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
241
+ /**
242
+ * QuickLinks is a component enabling the user to go sideways and downwards in the category tree.
243
+ */
244
+ export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
245
+ /**
246
+ * A placeholder image that can be used in place of an image that is loading.
247
+ * @param props
248
+ * @returns
249
+ */
250
+ export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
251
+ /** A placeholder text that can be used in place of a text that is loading. */
252
+ export const TextPlaceholder: React.FC<TextPlaceholderProps>;
253
+ /**
254
+ * Parameters to configure the search modal.
255
+ */
256
+ interface UseSearchModalParams {
257
+ /**
258
+ * How the modal should be opened.
259
+ * Will default to "centered" if nothing else is specified.
260
+ * - "centered" - The modal will be opened in the center of the screen.
261
+ * - "aligned" - The modal will be opened aligned to the alignerRef element.
262
+ */
263
+ location?: ModalLocation;
264
+ /**
265
+ * The ref to the element that the modal should be aligned to.
266
+ * This is only used when location is "aligned".
267
+ * @default undefined
268
+ * @example
269
+ * ```tsx
270
+ import React from "react";
271
+ import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
272
+
273
+ const App = () => {
274
+ const ref = React.createRef();
275
+
276
+ const { open } = useSearchModal({
277
+ location: "aligned",
278
+ alignerRef: ref,
279
+ });
280
+
281
+ return (
282
+ <div>
283
+ <ComponentAligner ref={ref} />
284
+ <button onClick={open}>Open</button>
285
+ </div>
286
+ );
287
+ };
288
+ * ```
289
+ */
290
+ alignerRef?: React.RefObject<HTMLElement>;
291
+ }
292
+ type OpenModal = () => void;
293
+ /**
294
+ * How the modal should be opened.
295
+ */
296
+ type ModalLocation = "centered" | "aligned";
297
+ interface UseSearchModalReturn {
298
+ open: OpenModal;
299
+ }
300
+ /**
301
+ * Hook used to open the search modal.
302
+ * @example
303
+ * Open a centered modal:
304
+ * ```tsx
305
+ * import React from "react";
306
+ * import { useSearchModal } from "@depict-ai/react-ui";
307
+ *
308
+ * const App = () => {
309
+ * const { open } = useSearchModal({
310
+ * location: "centered",
311
+ * });
312
+ *
313
+ * return (
314
+ * <div>
315
+ * <button onClick={open}>Open</button>
316
+ * </div>
317
+ * );
318
+ * };
319
+ * ```
320
+ * @returns {JSX.Element}
321
+ */
322
+ export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
323
+ interface SearchFieldProps {
324
+ /**
325
+ * A reference to the DOM element that the modal should be aligned to.
326
+ *
327
+ * The top of the modal will be aligned to the top of the element.
328
+ *
329
+ * The height of the search field in the modal will be the same as the height of the element.
330
+ * If not provided, the modal will be aligned to the search field itself.
331
+ */
332
+ alignerRef?: React.RefObject<HTMLElement>;
333
+ }
334
+ interface UseSearchFieldReturn {
335
+ /**
336
+ * A React component that renders the search field.
337
+ */
338
+ SearchField: () => ReactElement;
339
+ }
340
+ /**
341
+ * Hook used to configure the Depict search field.
342
+ * @example
343
+ * Render a search field that opens a modal aligned to the search field itself:
344
+ * ```tsx
345
+ * import React from "react";
346
+ * import { useSearchField } from "@depict-ai/react-ui";
347
+ *
348
+ * const App = () => {
349
+ * const { SearchField } = useSearchField();
350
+ *
351
+ * return (
352
+ * <div>
353
+ * <SearchField />
354
+ * </div>
355
+ * );
356
+ * };
357
+ * ```
358
+ * @example
359
+ * Render a search field that opens a modal aligned another DOM element:
360
+ * ```tsx
361
+ * import React from "react";
362
+ * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
363
+ *
364
+ * const App = () => {
365
+ * const ref = useRef(null);
366
+ * const { SearchField } = useSearchField({
367
+ * alignerRef: ref
368
+ * });
369
+ *
370
+ * return (
371
+ * <div>
372
+ * <ComponentAligner ref={ref} />
373
+ * <SearchField />
374
+ * </div>
375
+ * );
376
+ * };
377
+ * ```
378
+ * @returns {JSX.Element}
379
+ */
380
+ export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
381
+ /**
382
+ * Helper function to navigate to a new page depending on the navigation library used.
383
+ */
384
+ export const Navigation: {
385
+ nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
386
+ };
387
+ export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
388
+ export type { Locale } from "@depict-ai/ui/locales";
package/dist/main.js CHANGED
@@ -27,7 +27,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
27
27
  $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
28
28
  /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
29
29
  // Note, if you add an export here, also add one in src-server/main.ts
30
- const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.91";
30
+ const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.93";
31
31
 
32
32
 
33
33
 
@@ -67,9 +67,9 @@ function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
67
67
  $6319748b4f0426f0$var$addLotsOfPadding();
68
68
  });
69
69
  }
70
- /*
71
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
72
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
70
+ /*
71
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
72
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
73
73
  */ function $6319748b4f0426f0$var$addLotsOfPadding() {
74
74
  if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
75
75
  $6319748b4f0426f0$var$padding_animation = document.body.animate({
@@ -209,28 +209,30 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
209
209
  try {
210
210
  const { search: search , category: category , api: api } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
211
211
  const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
212
- set_search_page_path($24b00503eef73528$var$ensure_correct_formatting(searchPagePath));
213
212
  if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
214
213
  const on_navigation = (new_relative_url)=>{
215
214
  if (navigateFunction) navigateFunction(new_relative_url);
216
215
  else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_relative_url);
217
216
  };
218
217
  if (!api) (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api = new (0, $4GYXz$depictaiui.DepictAPI)(async ()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).metaData);
219
- if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
220
- api: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api,
221
- search_query_url_param_name: urlParamName,
222
- market: market,
223
- merchant: merchant,
224
- enable_category_suggestions: enableCategorySuggestions ?? false,
225
- // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
226
- localization: usedLocale,
227
- url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path),
228
- on_navigation: on_navigation
229
- }));
230
- else {
231
- search.market = market;
232
- search.merchant = merchant;
233
- search.localization = usedLocale;
218
+ if (searchPagePath) {
219
+ set_search_page_path($24b00503eef73528$var$ensure_correct_formatting(searchPagePath));
220
+ if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
221
+ api: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api,
222
+ search_query_url_param_name: urlParamName,
223
+ market: market,
224
+ merchant: merchant,
225
+ enable_category_suggestions: enableCategorySuggestions ?? false,
226
+ // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
227
+ localization: usedLocale,
228
+ url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path),
229
+ on_navigation: on_navigation
230
+ }));
231
+ else {
232
+ search.market = market;
233
+ search.merchant = merchant;
234
+ search.localization = usedLocale;
235
+ }
234
236
  }
235
237
  if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaiui.DepictCategory)({
236
238
  api: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).api,
@@ -447,7 +449,7 @@ const $177ac8f5258066ba$export$d69d8daa20eae175 = (createOpenModalParams)=>{
447
449
  "location": "centered",
448
450
  "search": globalState.search
449
451
  });
450
- } else throw new Error("No search instance was provided.");
452
+ } else throw new Error("Depict search is not configured. Add to your DepictProvider.");
451
453
  };
452
454
  return openModal;
453
455
  };
package/dist/module.js CHANGED
@@ -9,7 +9,7 @@ import {createPortal as $TZSbU$createPortal} from "react-dom";
9
9
 
10
10
  /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
11
11
  // Note, if you add an export here, also add one in src-server/main.ts
12
- const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.91";
12
+ const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.93";
13
13
 
14
14
 
15
15
 
@@ -49,9 +49,9 @@ function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
49
49
  $8071251ee4e9ffa1$var$addLotsOfPadding();
50
50
  });
51
51
  }
52
- /*
53
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
54
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
52
+ /*
53
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
54
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
55
55
  */ function $8071251ee4e9ffa1$var$addLotsOfPadding() {
56
56
  if ($8071251ee4e9ffa1$var$padding_animation) return; // We're already showing a bunch of padding
57
57
  $8071251ee4e9ffa1$var$padding_animation = document.body.animate({
@@ -191,28 +191,30 @@ function $5376eb2a386cd90d$export$9fac37a9c21c2f3b(props) {
191
191
  try {
192
192
  const { search: search , category: category , api: api } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
193
193
  const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
194
- set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
195
194
  if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
196
195
  const on_navigation = (new_relative_url)=>{
197
196
  if (navigateFunction) navigateFunction(new_relative_url);
198
197
  else (0, $7216ca4c8308a0f9$export$599d4515591ef232)(new_relative_url);
199
198
  };
200
199
  if (!api) (0, $42858f023ef23dab$export$8e769ad4338a911e).api = new (0, $TZSbU$DepictAPI)(async ()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).metaData);
201
- if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
202
- api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
203
- search_query_url_param_name: urlParamName,
204
- market: market,
205
- merchant: merchant,
206
- enable_category_suggestions: enableCategorySuggestions ?? false,
207
- // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
208
- localization: usedLocale,
209
- url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path),
210
- on_navigation: on_navigation
211
- }));
212
- else {
213
- search.market = market;
214
- search.merchant = merchant;
215
- search.localization = usedLocale;
200
+ if (searchPagePath) {
201
+ set_search_page_path($5376eb2a386cd90d$var$ensure_correct_formatting(searchPagePath));
202
+ if (!search) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
203
+ api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
204
+ search_query_url_param_name: urlParamName,
205
+ market: market,
206
+ merchant: merchant,
207
+ enable_category_suggestions: enableCategorySuggestions ?? false,
208
+ // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
209
+ localization: usedLocale,
210
+ url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path),
211
+ on_navigation: on_navigation
212
+ }));
213
+ else {
214
+ search.market = market;
215
+ search.merchant = merchant;
216
+ search.localization = usedLocale;
217
+ }
216
218
  }
217
219
  if (!category) (0, $TZSbU$createRoot)(()=>(0, $42858f023ef23dab$export$8e769ad4338a911e).category = new (0, $TZSbU$DepictCategory)({
218
220
  api: (0, $42858f023ef23dab$export$8e769ad4338a911e).api,
@@ -429,7 +431,7 @@ const $41cab674edff4277$export$d69d8daa20eae175 = (createOpenModalParams)=>{
429
431
  "location": "centered",
430
432
  "search": globalState.search
431
433
  });
432
- } else throw new Error("No search instance was provided.");
434
+ } else throw new Error("Depict search is not configured. Add to your DepictProvider.");
433
435
  };
434
436
  return openModal;
435
437
  };
@@ -0,0 +1,28 @@
1
+ import { ReactElement } from "react";
2
+ type OpenModal = () => void;
3
+ interface UseSearchModalReturn {
4
+ open: OpenModal;
5
+ }
6
+ interface UseSearchFieldReturn {
7
+ /**
8
+ * A React component that renders the search field.
9
+ */
10
+ SearchField: () => ReactElement;
11
+ }
12
+ export const version = "0.0.93";
13
+ export function DepictProvider(props: any): any;
14
+ export function SearchPage(): any;
15
+ export function CategoryPage(): any;
16
+ export function BreadCrumbs(): any;
17
+ export function QuickLinks(): any;
18
+ export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
19
+ className: string;
20
+ style: {
21
+ height: string;
22
+ };
23
+ }, HTMLElement>;
24
+ export function ImagePlaceholder(): any;
25
+ export function TextPlaceholder(): any;
26
+ export function useSearchField(): UseSearchFieldReturn;
27
+ export function openModal(): void;
28
+ export function useSearchModal(): UseSearchModalReturn;
@@ -0,0 +1,80 @@
1
+ var $5efvh$react = require("react");
2
+ var $5efvh$reactjsxruntime = require("react/jsx-runtime");
3
+
4
+ function $parcel$export(e, n, v, s) {
5
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
6
+ }
7
+
8
+ $parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b);
9
+ $parcel$export(module.exports, "SearchPage", () => $41e7e5d85b5e0d49$export$a54ec244c8863715);
10
+ $parcel$export(module.exports, "CategoryPage", () => $41e7e5d85b5e0d49$export$f7d2f673fc2f091d);
11
+ $parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
12
+ $parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466cdc317043f6cb);
13
+ $parcel$export(module.exports, "ComponentAligner", () => $41e7e5d85b5e0d49$export$80e99ee6b29cadd2);
14
+ $parcel$export(module.exports, "ImagePlaceholder", () => $41e7e5d85b5e0d49$export$3f37af283f8fb843);
15
+ $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
16
+ $parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
17
+ $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
18
+ $parcel$export(module.exports, "useSearchModal", () => $41e7e5d85b5e0d49$export$912994940e660d32);
19
+ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
20
+
21
+
22
+ const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.93";
23
+
24
+
25
+ function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
26
+ return props.children;
27
+ }
28
+ function $41e7e5d85b5e0d49$export$a54ec244c8863715() {
29
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
30
+ children: []
31
+ });
32
+ }
33
+ function $41e7e5d85b5e0d49$export$f7d2f673fc2f091d() {
34
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
35
+ children: []
36
+ });
37
+ }
38
+ function $41e7e5d85b5e0d49$export$5646050d516e06bc() {
39
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
40
+ children: []
41
+ });
42
+ }
43
+ function $41e7e5d85b5e0d49$export$466cdc317043f6cb() {
44
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
45
+ children: []
46
+ });
47
+ }
48
+ function $41e7e5d85b5e0d49$export$80e99ee6b29cadd2() {
49
+ return (0, $5efvh$react.createElement)("div", {
50
+ className: "depict aligner",
51
+ style: {
52
+ height: "100%"
53
+ }
54
+ });
55
+ }
56
+ function $41e7e5d85b5e0d49$export$3f37af283f8fb843() {
57
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
58
+ children: []
59
+ });
60
+ }
61
+ function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
62
+ return (0, $5efvh$reactjsxruntime.jsx)("div", {
63
+ children: []
64
+ });
65
+ }
66
+ function $41e7e5d85b5e0d49$export$9bb30bbe003b82e0() {
67
+ return {
68
+ SearchField: ()=>(0, $5efvh$reactjsxruntime.jsx)("div", {
69
+ children: []
70
+ })
71
+ };
72
+ }
73
+ function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
74
+ function $41e7e5d85b5e0d49$export$912994940e660d32() {
75
+ return {
76
+ open: ()=>{}
77
+ };
78
+ }
79
+
80
+
@@ -0,0 +1,65 @@
1
+ import {createElement as $1RlIW$createElement} from "react";
2
+ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
3
+
4
+
5
+
6
+ const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.93";
7
+
8
+
9
+ function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
10
+ return props.children;
11
+ }
12
+ function $2b1fdeb83610500f$export$a54ec244c8863715() {
13
+ return (0, $1RlIW$jsx)("div", {
14
+ children: []
15
+ });
16
+ }
17
+ function $2b1fdeb83610500f$export$f7d2f673fc2f091d() {
18
+ return (0, $1RlIW$jsx)("div", {
19
+ children: []
20
+ });
21
+ }
22
+ function $2b1fdeb83610500f$export$5646050d516e06bc() {
23
+ return (0, $1RlIW$jsx)("div", {
24
+ children: []
25
+ });
26
+ }
27
+ function $2b1fdeb83610500f$export$466cdc317043f6cb() {
28
+ return (0, $1RlIW$jsx)("div", {
29
+ children: []
30
+ });
31
+ }
32
+ function $2b1fdeb83610500f$export$80e99ee6b29cadd2() {
33
+ return (0, $1RlIW$createElement)("div", {
34
+ className: "depict aligner",
35
+ style: {
36
+ height: "100%"
37
+ }
38
+ });
39
+ }
40
+ function $2b1fdeb83610500f$export$3f37af283f8fb843() {
41
+ return (0, $1RlIW$jsx)("div", {
42
+ children: []
43
+ });
44
+ }
45
+ function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
46
+ return (0, $1RlIW$jsx)("div", {
47
+ children: []
48
+ });
49
+ }
50
+ function $2b1fdeb83610500f$export$9bb30bbe003b82e0() {
51
+ return {
52
+ SearchField: ()=>(0, $1RlIW$jsx)("div", {
53
+ children: []
54
+ })
55
+ };
56
+ }
57
+ function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
58
+ function $2b1fdeb83610500f$export$912994940e660d32() {
59
+ return {
60
+ open: ()=>{}
61
+ };
62
+ }
63
+
64
+
65
+ export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
@@ -1,28 +1,28 @@
1
- import { ReactElement } from "react";
2
- type OpenModal = () => void;
3
- interface UseSearchModalReturn {
4
- open: OpenModal;
5
- }
6
- interface UseSearchFieldReturn {
7
- /**
8
- * A React component that renders the search field.
9
- */
10
- SearchField: () => ReactElement;
11
- }
12
- export const version = "0.0.91";
13
- export function DepictProvider(props: any): any;
14
- export function SearchPage(): any;
15
- export function CategoryPage(): any;
16
- export function BreadCrumbs(): any;
17
- export function QuickLinks(): any;
18
- export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
19
- className: string;
20
- style: {
21
- height: string;
22
- };
23
- }, HTMLElement>;
24
- export function ImagePlaceHolder(): any;
25
- export function TextPlaceholder(): any;
26
- export function useSearchField(): UseSearchFieldReturn;
27
- export function openModal(): void;
28
- export function useSearchModal(): UseSearchModalReturn;
1
+ import { ReactElement } from "react";
2
+ type OpenModal = () => void;
3
+ interface UseSearchModalReturn {
4
+ open: OpenModal;
5
+ }
6
+ interface UseSearchFieldReturn {
7
+ /**
8
+ * A React component that renders the search field.
9
+ */
10
+ SearchField: () => ReactElement;
11
+ }
12
+ export const version = "0.0.92";
13
+ export function DepictProvider(props: any): any;
14
+ export function SearchPage(): any;
15
+ export function CategoryPage(): any;
16
+ export function BreadCrumbs(): any;
17
+ export function QuickLinks(): any;
18
+ export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
19
+ className: string;
20
+ style: {
21
+ height: string;
22
+ };
23
+ }, HTMLElement>;
24
+ export function ImagePlaceholder(): any;
25
+ export function TextPlaceholder(): any;
26
+ export function useSearchField(): UseSearchFieldReturn;
27
+ export function openModal(): void;
28
+ export function useSearchModal(): UseSearchModalReturn;
@@ -11,7 +11,7 @@ $parcel$export(module.exports, "CategoryPage", () => $41e7e5d85b5e0d49$export$f7
11
11
  $parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
12
12
  $parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466cdc317043f6cb);
13
13
  $parcel$export(module.exports, "ComponentAligner", () => $41e7e5d85b5e0d49$export$80e99ee6b29cadd2);
14
- $parcel$export(module.exports, "ImagePlaceHolder", () => $41e7e5d85b5e0d49$export$ecf150517ad2aa0);
14
+ $parcel$export(module.exports, "ImagePlaceholder", () => $41e7e5d85b5e0d49$export$3f37af283f8fb843);
15
15
  $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
16
16
  $parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
17
17
  $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
@@ -19,7 +19,7 @@ $parcel$export(module.exports, "useSearchModal", () => $41e7e5d85b5e0d49$export$
19
19
  $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
20
20
 
21
21
 
22
- const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.91";
22
+ const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.92";
23
23
 
24
24
 
25
25
  function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
@@ -53,7 +53,7 @@ function $41e7e5d85b5e0d49$export$80e99ee6b29cadd2() {
53
53
  }
54
54
  });
55
55
  }
56
- function $41e7e5d85b5e0d49$export$ecf150517ad2aa0() {
56
+ function $41e7e5d85b5e0d49$export$3f37af283f8fb843() {
57
57
  return (0, $5efvh$reactjsxruntime.jsx)("div", {
58
58
  children: []
59
59
  });
@@ -3,7 +3,7 @@ import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
3
3
 
4
4
 
5
5
 
6
- const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.91";
6
+ const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.92";
7
7
 
8
8
 
9
9
  function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
@@ -37,7 +37,7 @@ function $2b1fdeb83610500f$export$80e99ee6b29cadd2() {
37
37
  }
38
38
  });
39
39
  }
40
- function $2b1fdeb83610500f$export$ecf150517ad2aa0() {
40
+ function $2b1fdeb83610500f$export$3f37af283f8fb843() {
41
41
  return (0, $1RlIW$jsx)("div", {
42
42
  children: []
43
43
  });
@@ -62,4 +62,4 @@ function $2b1fdeb83610500f$export$912994940e660d32() {
62
62
  }
63
63
 
64
64
 
65
- export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$ecf150517ad2aa0 as ImagePlaceHolder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
65
+ export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};
@@ -1,2 +1,2 @@
1
- export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
2
- export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";
1
+ export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
2
+ export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";
package/locales/index.js CHANGED
@@ -1 +1 @@
1
- export * from "@depict-ai/ui/locales";
1
+ export * from "@depict-ai/ui/locales";
@@ -1 +1 @@
1
- module.exports = require("@depict-ai/ui/locales");
1
+ module.exports = require("@depict-ai/ui/locales");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@depict-ai/react-ui",
3
- "version": "0.0.91",
3
+ "version": "0.0.93",
4
4
  "packageManager": "yarn@3.2.2",
5
5
  "source": "src/index.ts",
6
6
  "main": "dist/main.js",
@@ -96,9 +96,9 @@
96
96
  "/locales"
97
97
  ],
98
98
  "dependencies": {
99
- "@depict-ai/plp-styling": "^0.0.31",
100
- "@depict-ai/ui": "^0.0.70",
101
- "@depict-ai/utilishared": "^0.0.74",
99
+ "@depict-ai/plp-styling": "^0.0.33",
100
+ "@depict-ai/ui": "^0.0.72",
101
+ "@depict-ai/utilishared": "^0.0.76",
102
102
  "solid-js": "^1.6.2"
103
103
  },
104
104
  "peerDependencies": {
@@ -111,7 +111,7 @@
111
111
  "@babel/preset-typescript": "latest",
112
112
  "@babel/runtime": "latest",
113
113
  "@babel/runtime-corejs3": "latest",
114
- "@depict-ai/plp-styling": "^0.0.31",
114
+ "@depict-ai/plp-styling": "^0.0.33",
115
115
  "@jest/globals": "^29.3.1",
116
116
  "@parcel/babel-preset-env": "latest",
117
117
  "@parcel/resolver-default": "^2.8.0",